Featured Product
Last updated
Last updated
To add this section, please follow below steps:
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Add section and choose "Featured product".
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
Choose a product to show
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
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.
Learn more about media types.
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
Show product badges
Toggle to show or hide the Badges on the main image.
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).
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
Top padding / Bottom padding
Determine the spacing of the block from its top and bottom block separately.
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.
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.
