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".
| 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. |
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. |
| Settings | Meaning |
|---|---|
Product | Choose a product to show |
| 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.) |
Main image position | Select the position of the main image: left/right. |
Background image | Upload/Select an image as the main image background |
| 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. |
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 |
| Settings | Meaning |
|---|---|
Show product badges | Toggle to show or hide the Badges on the main image. |
| Settings | Meaning |
|---|---|
Show Quantity | Toggle to show or hide the Quantity. |
| 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). |
| 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). |
| 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. |
| 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. |
| 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. |
| Settings | Meaning |
|---|---|
Font size | Specify the font size of the price. |
Top padding / Bottom padding | Determine the spacing of the block from its top and bottom block separately. |
| 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. |
| 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 |
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. |
| 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. |
| 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. |
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. |
| 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. |
| 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. |
