Featured Product

To add this section, please follow below steps:

1. From your Shopify admin, go to Online Store -> Themes.

2. Find the theme that you want to edit, and then click Customize.

3. Click Add section and choose "Featured product".

Section settings

General

Settings	Meaning
Section ID	Enter the Section ID to match the Menu link to enable the scroll to Section feature. Note: Enter the section ID to match the menu link and enable the scroll-to-section feature.
Section width	Select the layout width of the whole section. The options are: Default (same as the body width) Width (1170px) Width (1770px) Full width (100% of the viewport width).
Padding for 'full width' option on desktop	Determine the left and right spacing of the full width layout.
Show sticky product information on large screen	Show Sticky Product Information On Large Screens
Background color	Set color for the section background.
Section header
Title	Enter in the title for the section.
Title color	The color of the section title.
Title font size	Specify the font size of the title.
Title font size on mobile	Specify the font size of the title on mobile.
Title bottom margin	Determine the spacing of the title from bottom on Desktop.
Title bottom margin on mobile	Determine the spacing of the title from bottom on Mobile.
Alignment	Select the position of the title to be either to the left, right or center of its container on desktop.
Alignment on mobile	Select the position of the title to be either to the left, right or center of its container on mobile.
Description	Enter the text for the description.
Description color	Apply a color to the description.
Description font size	Specify the font size of the description on desktop.
Description bottom margin	Determine the spacing of the description from bottom.
Description bottom margin on mobile	Determine the spacing of the description from bottom on Mobile.
Alignment	Select the alignment of the header text to be either to the Left, Center or to the Right of the section.

Product

Settings	Meaning
Product	Choose a product to show

Main image

Settings	Meaning
Show navigation arrows on desktop	Toggle the navigation arrows on Desktop.
Show counter on mobile	Show above next arrow of slider. (Position current of item on slider / total items.)
Layout	Select the layout for the main images. There are 2 options: Style 1 Style 2
Main image position	Select the position of the main image: left/right.
Background image	Upload/Select an image as the main image background

Thumbnails

Settings	Meaning
Desktop layout	Select layout thumbnail. There are 3 layouts: Show thumbnails on the left Show thumbnails on the right Hide thumbnails
Show thumbnails on mobile	Toggle the Thumbnail on Mobile.
Maximum thumbnails to show	Limit the maximum number of thumbnails to display.
Active thumbnail color	Apply a color to the thumbnail active.
Navigation arrows color on mobile	Apply a color to the navigation arrows on Mobile.
Background color	Apply a color to the background.

Media

Learn more about media types.

Settings	Meaning
Media fit	Select the product card image crop type. There are 3 types: Original: The image will keep its current scale ratio to adapt. Fit content: The image will scale to cover up the full area of set product card image with retained ratio. Fill: The image will scale to scale up until the width or height reached the width or height of the set product card image with retained ratio.
Product image ratio	Select the desired ratio of the image: Adapt to image (the original image width and height are adopted) Portrait (the image is cropped to be portrait) Square (the image is cropped to be square)
Portrait aspect ratio	Determine the ratio between width and height of the image. Note: Only applicable to the portrait option of the product image ratio setting.
Image popup	Select the gallery popup when clicking the main image. There are 2 options: No popup Open fancybox
Video layout	Select the video layout There are 2 options: Thumbnails Popup

Product badges

Settings	Meaning
Show product badges	Toggle to show or hide the Badges on the main image.

Section top padding

Settings	Meaning
Desktop	Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 200px, increasing arithmetically of 5px (pixel).
Tablet	Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Mobile	Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).

Section bottom padding

Settings	Meaning
Desktop	Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 200px, increasing arithmetically of 5px (pixel).
Tablet	Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Mobile	Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).

Block settings

[BLOCK] Title

Settings	Meaning
Font size	The font size of the section title on tablet and desktop devices.
Font size on mobile	The font size of the section title on mobile devices.
Text color	The color of the section title.
Top padding / Bottom padding	Determine the spacing of the block from its top and bottom block separately.

[BLOCK] Meta

Settings	Meaning
Show sold in last period	Toggle the Show Sold In Last Function.
Product quantity list	Enter the number of products sold. Example: 3,5,6,7,8,10,12,15. Separate quantities with a comma (,).
Hours	Enter the number of hours since the product was last sold. Example: 10,15,16,17,18,20,25,35. Separate hours with a comma (,).
Text color	Apply a color to the text.
Top padding / Bottom padding	Determine the spacing of the block from its top and bottom block separately.

[BLOCK] Description

Settings	Meaning
Show short description	Toggle to show the short description.
Short description word count	Limit the description word count to truncate. Example: 17
Font size	Specify the font size of the description.
Text color	Apply a color to the description.
Top padding / Bottom padding	Determine the spacing of the block from its top and bottom block separately.

[BLOCK] Price

Settings	Meaning
Font size	Specify the font size of the price.
Style	Select the style for the price. Note: For products to have a compare price.
Sale price color	Apply a color to the sale price. Note: For style 2.
Top padding / Bottom padding	Determine the spacing of the block from its top and bottom block separately.

[BLOCK] Custom block

Settings	Meaning
Title	Enter in the title for the block.
Icon	Enter the SVG icon that stands next to the title. Note: Go to this link find your icon. Find the icon you want, then copy the SVG code and paste it here.
Description	Enter the text for the description.
Font size	Specify the font size of the description.
Content padding	Determines the padding of the block from its top, right, bottom, left block separately.
Content alignment	Select the alignment of block content to be either to the Left, Right or Center.
Text color	Apply a color to the text.
Background color	The background color of the block.
Background gradient	The background gradient of the block.
Top padding / Bottom padding	Determines the spacing of the block from its top and bottom block separately.

[BLOCK] Variant picker

Settings	Meaning
Type	Select the option type for the variant picker. There are 2 types: Dropdown Square / Rectangle / Swatch
Show variant image grouped	Toggle variant image grouped
Style	Select the style for the variant picker layout.
Font size	Specify the font size of the label variant picker.
Text color	Apply a color to the label variant grouped.
Show top border	Toggle border top
Show bottom border	Toggle border bottom
Border color	Apply a color to the border.
Top padding / Bottom padding	Determines the spacing of the block from its top and bottom block separately.

[BLOCK] Buy Buttons

Settings	Meaning
Dynamic checkout buttons
Show dynamic checkout buttons	Toggle to show or hide the dynamic checkout buttons.
Font size	Specify the font size of the Terms & Conditions checkbox.
Text color	Apply a color to the label.
Border color	Apply a border color to the label.
Quantity
Text color	Apply a color to the label.
Icon color	Apply a color to the icon.
Input color	Apply a color to the input.
Input background color	Apply a color to the input background.
Wishlist
Icon color	Apply the color to the wishlist icon.
Border color	Apply the border color to the wishlist button.
Background color	Apply the background color to the wishlist button.
Icon hover color	Apply the color to the wishlist icon for hover state.
Border hover color	Apply the border color to the wishlist button for hover state.
Background hover color	Apply the background color to the wishlist button for hover state.
Add to cart action
Animation	Select the animation of the button. There are 4 options: None Tilt shaking Vertical shaking Horizontal shaking
Text color - Border color - Background color - Background gradient - Text hover color - Border hover color - Background hover color - Background hover gradient	Set the text color, background, and border color for both the normal and hover states of the 'Add to cart action' button.
Buy it now action
Text color - Border color - Background color - Background gradient - Text hover color - Border hover color - Background hover color - Background hover gradient	Set the text color, background, and border color for both the normal and hover states of the 'Buy it now action' button.
Top padding / Bottom padding	Determines the spacing of the block from its top and bottom block separately.

[BLOCK] Quantity

Settings	Meaning
Style	Select the style for the quantity. There are 2 styles: Button Box
Layout	Select the layout for the quantity. There are 2 layouts: Movable Fixed Note: The quantity block cannot be moved up or down if the layout setting is set to fixed.
Font size	Specify the font size of the quantity label.
Movable layout
Text color	Apply a color to the label.
Icon color	Apply a color to the icon.
Input color	Apply a color to the input.
Input Background Color	Apply a color to the input background.
Top padding / Bottom padding	Determine the spacing of the block from its top and bottom block separately.

[BLOCK] Quantity

Settings	Meaning
View Detail	Enter the text.
Font size	Specify the font size of the text.
Text color	Apply a color to the text.
Top padding / Bottom padding	Determine the spacing of the block from its top and bottom block separately.

[BLOCK] Countdown

Settings	Meaning
Top padding / Bottom padding	Determine the spacing of the block from its top and bottom block separately.

[BLOCK] Vendor

Settings	Meaning
Font size	Specify the font size of the vendor.
Text color	Apply a color to the vendor.
Text style	Transform the description to be None, Capitalize, Uppercase or Lowercase.
Top padding / Bottom padding	Determine the spacing of the block from its top and bottom block separately.

[BLOCK] Hot stock function

Settings	Meaning
Style	Select Style for Hot Stock Function. There are 2 options: Text Text with progress bar
Color	Apply a color to the text.
Top padding / Bottom padding	Determine the spacing of the block from its top and bottom block separately.