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.

Last updated