> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/global-sections/products/featured-product.md). # Featured product Puts one product forward anywhere on your store — a homepage hero product, a landing page, or a page dedicated to a single item. It renders the same media gallery and purchase interface as the product page, so shoppers can pick a variant and add to cart without leaving the page. {% hint style="info" %} Until you pick a product, the section renders a placeholder with sample media, title, price, and description — so you can style the layout before choosing what to feature. {% endhint %} *** ## Structure ``` ┌──────────────────────────────────────────────────┐ │ [ Product media ] │ [ Details ] │ │ │ Badges │ │ │ Title │ │ │ Price │ │ │ Description │ │ │ Variant picker │ │ │ Buy buttons │ │ │ View details │ └──────────────────────────────────────────────────┘ ``` [**Product media**](#product-media) — Product images and videos, with their own desktop and mobile layouts. [**Details**](#details) — The purchase area, assembled from the blocks you add. *** ## Settings | Setting | Description | | --------------------- | ---------------------------------------------------------------------------- | | Product | The product to feature. | | Enable sticky content | Keeps the details panel in view while the shopper scrolls through the media. | ### Layout | Setting | Description | | ----------- | ------------------------------------------------- | | Width | Container width of the section. | | Media width | How much of the section the media panel takes up. | ### Gap | Setting | Description | | ---------------- | ------------------------------------------- | | Desktop / Mobile | Space between the media and details panels. | ### Color | Setting | Description | | ------------ | ----------------------- | | Color scheme | Colors for the section. | ### Padding | Setting | Description | | ----------------- | ---------------------------------------------- | | Top / Bottom | Space above and below the section. | | Custom for mobile | Set separate top and bottom padding on mobile. | *** ## Product media The product's images and videos. Desktop and mobile each get their own layout, so a side-by-side gallery on desktop can become a swipeable slider on a phone. {% hint style="info" %} You can limit the gallery to the images of the selected variant only. Turn this on in [**Theme settings → Variant pickers**](/helix/theme-settings/variant-pickers.md). {% endhint %} | Setting | Description | | ---------------- | -------------------------------------------------------- | | Desktop position | Whether the media sits above the details or beside them. | | Desktop width | How much of the section the media panel takes up. | | Desktop layout | How multiple images are arranged on desktop. | ### Mobile layout | Setting | Description | | ----------------------- | ------------------------------------------------------------------------------------------------------------ | | Layout style | How multiple images are arranged on mobile. | | Full width media | Lets the media run edge to edge, ignoring the page padding. | | Show part of next slide | Reveals a sliver of the next image so shoppers know they can swipe. Available when Layout style is a slider. | | Show pagination | Adds dots below the media. Available when Layout style is a slider. | ### Media settings | Setting | Description | | -------------- | ------------------------------------------------------- | | Video autoplay | Plays product videos automatically. Videos start muted. | | Loop video | Replays product videos continuously. | | Zoom | How shoppers enlarge an image to see detail. | ### Gap | Setting | Description | | ---------------- | ---------------------------------------- | | Desktop / Mobile | Space between images in the media panel. | *** ## Details The purchase area. Add blocks in any order to build the layout the product needs. | Setting | Description | | ------------------ | --------------------------------------------------------------------------------------------------------- | | Alignment | Aligns the text and blocks inside the details panel. | | Limit width | Caps the panel to a maximum width. | | Max width | The widest the panel can be. Available when Limit width is on. | | Container position | Where the panel sits in its column once it is narrower than the column. Available when Limit width is on. | {% hint style="info" %} **Alignment** and **Container position** do different jobs: Container position moves the whole panel, Alignment moves the content inside it. Set them together for a centered panel with left-aligned text. {% endhint %} ### Gap | Setting | Description | | ---------------- | ----------------------------------------------- | | Desktop / Mobile | Vertical space between the blocks in the panel. | ### Appearance | Setting | Description | | -------------------- | ---------------------------------------------------------------- | | Border thickness | Width of the panel border. | | Corner radius | Corner rounding of the panel. | | Custom corner radius | A specific radius value. Available when Corner radius is Custom. | | Shadow | Drop shadow depth of the panel. | ### Color | Setting | Description | | ------------ | --------------------------------------------------------------------- | | Type | Whether the panel inherits the section colors or uses its own scheme. | | Color scheme | Colors for the panel. Available when Type is set to a color scheme. | ### Padding | Setting | Description | | --------------------------- | -------------------------------------- | | Top / Bottom / Left / Right | Inner spacing of the panel. | | Custom for mobile | Set separate padding values on mobile. | ### Available blocks | Block | Purpose | | ---------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | | [Group](/helix/theme-blocks/layout/group.md) | Groups blocks such as the title, price, and badges into one unit. | | [Title](/helix/product-page-sections/product-information/product-details.md#product-title) | Product title. | | [Price](/helix/product-page-sections/product-information/product-details.md#product-price) | Product price. | | [Variant picker](/helix/product-page-sections/product-information/product-details.md#variant-picker) | Lets shoppers choose options such as size or color. | | [Buy buttons](/helix/product-page-sections/product-information/product-details.md#buy-buttons) | Add to cart and optional express checkout buttons. | | View details | Link to the full product page. | | [Product inventory](/helix/product-page-sections/product-information/product-details.md#inventory) | Stock level and availability messaging. | | [Description](/helix/product-page-sections/product-information/product-details.md#product-description) | Product description. | | [Badges](/helix/product-page-sections/product-information/product-details.md#product-badges) | Sale, new, and custom badges. | | [Vendor](/helix/product-page-sections/product-information/product-details.md#product-vendor) | Product brand or vendor name. | | [SKU](/helix/product-page-sections/product-information/product-details.md#product-sku) | Variant SKU. | | [Product fit](/helix/product-page-sections/product-information/product-details.md) | Size or fit guidance for apparel. | | [Product siblings](/helix/product-page-sections/product-information/product-details.md#product-siblings) | Links to related products, such as other colors. | | [Pickup availability](/helix/product-page-sections/product-information/product-details.md#pickup-availability) | In-store pickup by location. | | [Payment installments](/helix/product-page-sections/product-information/product-details.md#payment-installments) | Installment options such as Shop Pay. | | [Colors](/helix/theme-blocks/basic/colors.md) | A row of color swatches. | | [Payment icons](/helix/theme-blocks/footer/payment-icons.md) | The payment methods your store accepts. | | [Accordion](/helix/theme-blocks/layout/accordion.md) | Collapsible panels for specs, care, or returns. | | [Page](/helix/theme-blocks/basic/page.md) | Shows the content of a store page. | | [Popup](/helix/theme-blocks/links/popup.md) | A trigger that opens supporting content in a popup. | | [Collapsible text](/helix/theme-blocks/basic/collapsible-text.md) | A single expandable text block. | | [Countdown timer](/helix/theme-blocks/basic/countdown-timer.md) | Timer for time-limited offers. | | [Coupon code](/helix/theme-blocks/basic/coupon-code.md) | Shows a promo code. | | [Heading](/helix/theme-blocks/basic/heading.md) | A standalone heading line. | | [Subheading](/helix/theme-blocks/basic/subheading.md) | A small label above or below a heading. | | [Text](/helix/theme-blocks/basic/text.md) | A rich-text paragraph. | | [Image](/helix/theme-blocks/basic/image.md) | An inline image. | | [Button](/helix/theme-blocks/basic/button.md) | A standalone call-to-action button. | | [Icon](/helix/theme-blocks/basic/icon.md) | An inline SVG icon from the theme library. | | [Divider](/helix/theme-blocks/layout/divider.md) | A horizontal rule separating sections. | | [Spacer](/helix/theme-blocks/layout/spacer.md) | Empty vertical space. | | [Video](/helix/theme-blocks/basic/video.md) | An inline Shopify-hosted or external video. | | [Custom Liquid](/helix/theme-blocks/custom/custom-liquid.md) | Your own Liquid, HTML, or app snippet. | | App blocks | Blocks from apps you have installed. |