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
ID Section	Enter the Section ID to match the Menu link to enable the scroll to Section feature
Layout	Select the layout width of the whole section. The options are: Default (same as the body width), 1170px, 1770px, Full Width (the 100% of the viewport width).
Padding Container Full Width	Determine the left and right spacing of the Full Width layout.
Show Sticky Product Information On Large Screens	Show Sticky Product Information On Large Screens
Spacing Top / Spacing Bottom on Desktop, Tablet, Mobile	Determine the spacing of the section from its top and bottom sections on Desktop, Tablet and Mobile separately.
Background Color	Set color for the section background.
Title	Enter in the title for the section.
Title Font Size	Specify the font size of the title.
Title Font Size Mobile	Specify the font size of the title on mobile.
Title Margin Bottom	Determine the spacing of the title from bottom on Desktop.
Title Margin Bottom 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 Margin Bottom	Determine the spacing of the description from bottom.
Description Spacing Bottom 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
Choose a product	Choose a product to show

Main Image

Settings	Meaning
Show Arrows On Desktop	Toggle the navigation arrows on Desktop.
Show Counter Number	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

Thumbnail

Settings	Meaning
Show Thumbnail Mobile?	Toggle the Thumbnail on Mobile.
Layout Thumbnail	Select layout thumbnail: Layout 1 : Left thumbnail. Layout 2 : Right thumbnail. No thumbnail
Maximum Number Of Thumbnail To Show	Limit the maximum number of thumbnails to display.
Color (Active)	Apply a color to the thumbnail active.
Arrow Color Mobile	Apply a color to the navigation arrows on Mobile.
Background Image	Upload/Select an image as the thumbnail background

Media

Settings	Meaning
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 if the Image Ratio: Portrait is selected.
Image Fit From Frame	Select the product card image crop type: Default: The image will keep its current scale ratio to adapt. Full Width Or Height (No Crop): The image will scale to cover up the full area of set product card image with retained ratio. Full Width Or Height (With Crop): 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.
Gallery Popup	Select the gallery popup when clicking the main image: None/Fancybox.
Video Layout	Select the video layout: Thumbnail/Popup.

Badge

Settings	Meaning
Show Badges?	Toggle the Badges on the main image.

Quantity

Settings	Meaning
Show Quantity?	Toggle the Quantity.

Block settings

[BLOCK] Meta

Settings	Meaning
Top / Bottom	Determine the spacing of the block from its top and bottom block separately.
Show Review?	Toggle the Review.
Show Sold In Last Function	Toggle the Show Sold In Last Function.
The Number Of Products:	Enter the number of products sold. Example : 3,5,6,7,8,10,12,15
Hours	Enter the number of hours since the product was last sold.
Text Color	Apply a color to the text.

[BLOCK] Short Description

Settings	Meaning
Word Number	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 / Bottom	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.
Top / Bottom	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.
Description	Enter the text for the description.
Description Font Size	Specify the font size of the description.
Content Spacing	Determine the padding of the block from its top, right, bottom, left block separately.
Block 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 - Background Gradient	Set color (or gradient) for the section background.
Top / Bottom	Determine the spacing of the block from its top and bottom block separately.

[BLOCK] Variant Picker

Settings	Meaning
Option Type	Select option type: Dropdown or Square / Rectangle / Swatch
Show Variant Image Grouped?	Toggle variant image grouped
Color	Apply a color to the label variant grouped.
Enable Border Top?	Toggle border top
Enable Border Bottom?	Toggle border bottom
Border Color	Apply a color to the border.
Top / Bottom	Determine the spacing of the block from its top and bottom block separately.

[BLOCK] Buy Buttons

Settings	Meaning
Show Dynamic Checkout Buttons?	Toggle dynamic checkout b uttons
Font Size	Specify the font size of the Terms & Conditions checkbox.
Color	Apply a color to the label
Border Color	Apply a border color to the label
Top / Bottom	Determine the spacing of the block from its top and bottom block separately.

Quantity

Settings	Meaning
Color	Apply a color to the label
Input Color	Apply a color to the input
Input Background Color	Apply a color to the input background.

Wishlist

Settings	Meaning
Color - Border Color - Background Color - Background Gradient - Hover / Active Color - Hover / Active Border Color - Hover / Active Background Color - Hover / Active Background Gradient	Set the text color, background and border color for both the normal and hover states of the wishlist button.

Add To Cart Action

Settings	Meaning
Animation	Select animation of the button: Option 1 : None. Option 2 : Tilt shaking. Option 3 : Vertical shaking. Option 4 : Horizontal shaking.
Color - Border Color - Background Color - Background Gradient - Hover / Active Color - Hover / Active Border Color - Hover / Active Background Color - Hover / Active Background Gradient	Set the text color, background and border color for both the normal and hover states of the "Add To Card Action" buttons.

Buy It Now Action

Settings	Meaning
Color - Border Color - Background Color - Background Gradient - Hover / Active Color - Hover / Active Border Color - Hover / Active Background Color - Hover / Active Background Gradient	Set the text color, background and border color for both the normal and hover states of the "Buy It Now Action" buttons..

[BLOCK] Vendor

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

[BLOCK] Hot Stock Function

Settings	Meaning
Select Style	"Select Style for Hot Stock Function : -Style 1: Only text -Style 2: Has text and progress bar"
Top / Bottom	Determine the spacing of the block from its top and bottom block separately.