Featured product section settings

This guide describes the Featured Product section.

The Featured Product section is designed to highlight a single product in a prominent, focused layout.

This section is perfect for drawing attention to high-priority products and driving quick conversions from landing pages or homepages.

⭐ Key Features:

Showcase one selected product with full details
Display product image, title, price, description, and variant options
Include “Add to Cart” and “Buy Now” buttons
Showcase quantity selector and dynamic checkout buttons
Support for badges (e.g., Sale)
Customize media

How to access Featured product section

From any page in your Admin Dashboard, click the “Add section” button, search for “Featured product” and select it.

After adding the Featured Product section, customize its appearance and functionality using the available settings.

How to configure Featured product section

Basic Components

General settings – These control the overall settings of the section.
Block – Each block has its own individual settings.

Each Featured product section includes several blocks: Text, Title, Price, Variant picker, Buy buttons, SKU, Custom liquid, Product rating, and Icon with text.

To insert a new block between existing ones or to add a block when none have been added yet, refer to the article "Add a block" and locate the section titled “How to add a block”.

To begin customizing general settings, click the “Featured Product” section to access its settings.

General settings

Setting	Description
Select Product	The “Select Product” option allows you to add a link to a specific product in your store. When you click on the “Select Product” button, you have two options: If the product has not been created yet, you can click on the “Create product link” button, which will take you to the “Add product” page where you can enter all the necessary information for your product. Once you have saved your changes, you can go back to the original section and your newly created product will be available to select. If the product has already been created, you can select it from the list of products by clicking on the “Select” button next to the product. The chosen product will then appear on the page.
Enable sticky content on desktop	When the button is swiped to the right, the product media and content below will always remain visible side by side with the main product information.
Color scheme	A color scheme consists of a predefined set of colors you can apply to this section for consistent styling. These schemes are created in the Theme Settings and are available across all sections, making customization faster and ensuring a cohesive color system throughout your store. Learn more about color schemes.
Container color scheme	This option lets you select a color scheme for the container that can be different from the page’s default. It helps make the section visually more cohesive and aligned. Also, this color scheme applies colors for Blockquote placed on the image.

Media settings

To add media, navigate to Dashboard > Products, and select the specific product you wish to edit from the list. There are three product media types that can be added to the product page:

Images

3D models

Videos

Please read this detail information about media types.

Setting	Description
Desktop media width	Small Medium Large
Constrain media to screen height	When this option is enabled, the media, such as images or videos, will be constrained to fit within the height of the screen.
Media fit	“Media fit” refers to how product images or other media (such as videos) are sized and displayed within their respective containers on a web page. Two options for Media fit: Original: This setting displays the media at its original size, without any cropping or resizing. Fill: This option adjusts the media to fill the entire container, even if it requires cropping or resizing to do so.
Desktop layout	This option refers to the way in which product images are displayed in the featured product section. There are four options available to choose: Stacked: All media is displayed in a one-column layout. Clicking an every stacked media type opens a pop-up window with a larger view of the selected media. Stacked 2 columns: All media is displayed in a two-column layout following the big main product media. But the video and 3D model take up the entire column, so they go one after the other and not in two columns. Clicking an every stacked media type opens a pop-up window with a larger view of the selected media. 2 Columns: All media is displayed in a two-column layout. Thumbnails: When a product has multiple media types, the additional media are shown as thumbnails in small size below the main product media. Customers can click on any thumbnail to view it. Thumbnails large: When a product has multiple media types, the additional media are shown as thumbnails in large size below the main product media. Customers can click on any thumbnail to view it. Thumbnail carousel: When a product has multiple images, they are displayed as thumbnails in a slider on the main image. If the product also includes a video or a 3D model, the thumbnails are displayed in a slider below the main image. Clicking a thumbnail changes the main image. You can scroll through the thumbnails by dragging with your mouse.
Desktop media position	Choose the media position: Left: Media left, content right. Right: Media right, content left.
Image zoom	Open lightbox: When you click on an image, a lightbox will open, displaying the product media in a larger view for a more detailed visual experience. Click and hover: Interact with the product images by clicking or hovering over them directly on the page, without the need to open a separate lightbox. No zoom
Mobile layout	Hide thumbnails: You have visible images in slider without thumbnails with a mouse or button sliders Show thumbnails: When a product has multiple images, they are displayed as thumbnails in a slider on the main image. If the product also includes a video or a 3D model, the thumbnails are displayed in a slider below the main image.
Hide other variant’s media after selecting a variant	Select this option to hide the media for other variants after a variant has been selected.
Enable video looping	If you add a video to showcase your product, “enabling video looping” will allow customers to watch the video over and over again without having to manually restart it. This can be useful in highlighting specific features or aspects of the product that the customer may have missed during the first viewing.

Section padding

Setting	Description
Top padding	The 'Top padding' setting allows you to adjust the amount of space at the top of the section using a slider.
Bottom padding	The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section.
Top padding mobile	The 'Top padding mobile' setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile	The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the section for mobile devices.