The Featured product section allows you to showcase a selected product directly on the page with its media gallery, product information, variants, pricing, promotional content, and purchase actions. It gives customers access to key product details and allows them to add the product to cart without opening the full product page.
Click the section name to see the section settings on the right-hand sidebar.
Product: Select the Shopify product you want to display in the section.
Make section full width: Enable this option to extend the section across the full available page width.
Color scheme: Select the color scheme applied to the section. You can choose an available color scheme or customize it through Edit scheme.
Use these settings to adjust the spacing around the section.
Available options include:
Top padding
Bottom padding
Mobile top padding
Mobile bottom padding
Title: Enter the title used for this section in the Scrollspy navigation.
The Media container controls how the selected product's images and videos are displayed.
Show first media: Display the first product media until customers manually select a variant.
Select variants from carousel images: Allow customers to select a variant by navigating through carousel images. This option only works when the carousel is enabled.
Enable video autoplay: Automatically play product videos. Videos are muted automatically to allow autoplay.
Enable video looping: Replay product videos continuously after they finish.
Image ratio: Select the image ratio used for product media, such as Adapt to image.
The Stamp settings allow you to add additional visual content over the product media.
Stamp type: Choose between None, Image, and Text.
Stamp image: Select an image to use as the stamp when Image is selected.
Rotate stamp: Enable rotation for the stamp.
Use the desktop settings to control the product media layout.
Layout: Select how product media and thumbnails are displayed on desktop. For example, Thumbnails left displays thumbnails vertically beside the main media.
Width: Adjust the width of the media area on desktop.
Space between: Adjust the spacing between media elements.
The Information container displays the product details and purchasing options beside the product media.
Inherit color scheme: Apply the section's color scheme to the product information container.
Show border: Display a border around the information area.
Padding block: Adjust the vertical padding inside the information container.
Padding inline: Adjust the horizontal padding inside the information container.
The padding values are automatically optimized for screens smaller than 1150px.
Click Add block under the Information container to customize which product information is displayed.
The available blocks shown in the section include:
Vendor & rating: Display the product vendor and rating information.
Product title: Display the product title.
Icon with texts: Display additional product highlights or selling points with icons and text.
Price: Display the product price.
Separator: Add visual spacing or a separator between information blocks.
Deal countdown: Display promotional content together with a countdown timer.
Variant picker: Allow customers to select product options such as color or size.
Buy buttons: Display purchasing actions such as quantity selection, Add to cart, and Buy it now.
Inventory status: Display current inventory or stock availability.
Pickup availability: Show pickup availability information for supported locations.
Contact & share: Provide product contact and sharing actions.
Description: Display the product description.
View detail: Add an option for customers to open the full product details.
Child blocks can be reordered by dragging and dropping them in the Theme Editor.
Note: These blocks must be added inside the Information container.
The section is mainly divided into two areas:
Media: Displays product images, videos, thumbnails, and optional stamp content.
Information: Displays product details, promotional content, variants, stock information, and purchase actions.
You can customize the order of the information blocks to create different product layouts depending on the type of product or campaign.