Featured product

Highlight a single product with customizable galleries, mobile-friendly layouts, interactive slideshows, and a wide variety of content blocks to boost engagement, drive conversions, and create an impactful visual presentation.

Last updated 4 months ago

Overview

The Featured product section is designed to display a single, highlighted product with a highly flexible layout. It brings together product images, purchase options, informational blocks, and interactive elements in an adaptive, mobile-friendly format. Use this section to draw attention to a flagship product, promote limited offers, or create compelling landing page layouts that encourage conversions.

📝 Note: The Featured product section is ideal for showcasing individual products on homepages, landing pages, or anywhere you want to create a strong visual and interactive focus for a specific item.

Product selection

Selecting the product determines exactly which item from your catalog is showcased in the Featured product section. This choice controls what images, variants, and purchase options will be available and visible to users.

Featured image

If no featured image is selected, the first image from the product media will be displayed automatically.

When set, the featured image overrides the first image from the product media. This is especially useful if the first image is, for example, a laydown product shot, but you prefer to highlight a lifestyle or context-based image instead.

Supported block types

The Featured product section offers a diverse set of content blocks that extend functionality beyond images and purchase options. These blocks enable storytelling, customer reassurance, and interactivity.

You can include and arrange the following block types in any order:

  1. Buy buttons

  2. Complementary products

  3. Custom liquid

  4. Description

  5. Price

  6. Quantity selector

  7. Title

  8. Variant selector

💡 Tip: Blocks are designed to interlock visually and functionally, letting you highlight unique selling points, gather feedback, and increase product interaction—all within the feature section.

Usage notes

⚠️ Important: To achieve the best results, always select a product with high-quality imagery and comprehensive information. Incomplete product data can create layout gaps or reduce conversion.

  1. Preview changes on both desktop and mobile to confirm all ratios and interactive elements remain visually consistent.

  2. Use custom liquid blocks sparingly and validate for accessibility where used.

  3. A focused, less-is-more approach to block arrangement results in faster load times and a more effective call to action.

🚧 Caution: Embedding large image or video files may slow your page speed and frustrate visitors, especially on mobile connections. Always optimize both assets and gallery settings for performance.