# Feature product

{% hint style="info" %}
The Featured product section was added in v1.2.0 — Learn how to [update your theme](https://help.fluorescent.co/eclipse/changelog/update-your-theme) to access the latest features.
{% endhint %}

Add a **Featured product** section to any page to allow customers to view and add an item directly to their cart.

Customize the layout with options for the media gallery and product detail blocks, and add custom content blocks.

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FeCp3wtOdtfXgSvqf2do6%2Ffeatured-product.png?alt=media&#x26;token=36410d65-dcb4-4aed-8a13-35d6732b5744" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](https://help.fluorescent.co/eclipse/pages/templates/using-templates) for different page layouts, or [show dynamic page content](https://help.fluorescent.co/eclipse/general/editing-themes/dynamic-content-with-metafields) in the same template.
{% endhint %}

## Set up section

***

In the editor side panel, click **(+) Add section** and select **Featured product**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

### Select product

***

Click the section to open the settings. Click **Select product** for the Featured product option.

{% hint style="success" %}
Products are created and edited in your Shopify admin. Learn more about managing products in [Shopify's Products manual](https://help.shopify.com/en/manual/products).
{% endhint %}

### Section styles

***

Click the section to edit general **section styles** for colors and spacing, available in all sections:

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="../overview/section-styles#color-scheme">#color-scheme</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section width</strong></mark></td><td><a href="../overview/section-styles#section-width">#section-width</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section padding</strong></mark></td><td><a href="../overview/section-styles#section-padding">#section-padding</a></td><td></td></tr></tbody></table>

### Sticky effect

***

The **Sticky effect** makes either the gallery or product details remain at the top of the screen when scrolling down. You may want to enable this option to keep the add-to-cart button visible or keep the product images visible.

* **Sticky gallery** only applies to thumbnail gallery layouts.
* **Sticky product details** applies when the gallery is longer than the product details.
* Select **No sticky effect** to disable this option.

## Media gallery

***

Click the Featured product section to customize the layout of your product media.

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Gallery layout</strong></mark></td><td>Change the layout, <strong>size</strong>, <strong>position</strong>, and <strong>shape</strong> of your images</td><td></td><td><a href="../product-pages/media-gallery">media-gallery</a></td></tr><tr><td><mark style="color:blue;"><strong>Media grouping</strong></mark></td><td>Reveal images for the selected variant only.</td><td></td><td><a href="../product-pages/media-gallery/media-grouping">media-grouping</a></td></tr></tbody></table>

## Featured product blocks

***

The **Featured product** section contains all the blocks that make up your product form, including product information, variant selectors, buy buttons, and additional feature blocks.

In the editor side panel, click **(+) Add block** to insert into the **Featured product**. Click and hold the drag handles **`⋮⋮`** to re-order blocks, and **hide** or **delete** blocks using the icons.

### Default blocks

***

The **default blocks** show essential product information and purchasing options. Click a block to find its settings.

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Title</strong></td><td></td><td></td></tr><tr><td><strong>Vendor</strong></td><td></td><td></td></tr><tr><td><strong>SKU</strong></td><td></td><td></td></tr></tbody></table>

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Description</strong></mark></td><td><a href="../product-pages/product-content-blocks/description">Change text size</a><br><a href="../../product-pages/product-content-blocks/description#set-up-description-block">Show as collapsible row</a></td><td></td><td><a href="../product-pages/product-content-blocks/description">description</a></td></tr><tr><td><mark style="color:blue;"><strong>Price</strong></mark></td><td><p><a href="../../product-pages/product-content-blocks/price#show-discounts">Show discounts</a></p><p><a href="../../product-pages/product-content-blocks/price#show-sale-and-sold-out-badges">Sale and sold out badges</a><br><a href="../../product-pages/product-content-blocks/price#show-sale-and-sold-out-badges">Shop Pay Instalments</a></p></td><td></td><td><a href="../product-pages/product-content-blocks/price">price</a></td></tr><tr><td><strong>Quantity selector</strong></td><td>Show or hide quantity label</td><td></td><td></td></tr></tbody></table>

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Variant selector</strong></mark></td><td><p><a href="../../product-pages/variant-options#variant-selector-style">Choose selector style</a></p><p><a href="../../product-pages/variant-options#swatches">Show swatches</a></p><p><a href="../product-pages/variant-options/info-popup">Add info popup</a> (product guide)</p></td><td><a href="../product-pages/variant-options">variant-options</a></td></tr><tr><td><mark style="color:blue;"><strong>Buy buttons</strong></mark></td><td><p><a href="../../product-pages/product-content-blocks/buy-buttons#change-button-style">Choose button style</a></p><p><a href="../../product-pages/product-content-blocks/buy-buttons#dynamic-checkout-button">Show dynamic checkout buttons</a></p><p><a href="../../product-pages/product-content-blocks/buy-buttons#local-pickup-banner">Show pickup availability</a></p></td><td><a href="../product-pages/product-content-blocks/buy-buttons">buy-buttons</a></td></tr></tbody></table>

### Content blocks

***

Add more blocks with custom content and features to the featured product section.

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Collapsible row</strong></mark></td><td>Description.</td><td><a href="../product-pages/product-content-blocks/collapsible-row">collapsible-row</a></td></tr><tr><td><mark style="color:blue;"><strong>Complementary products</strong></mark></td><td></td><td><a href="../product-pages/product-content-blocks/complementary-products">complementary-products</a></td></tr><tr><td><mark style="color:blue;"><strong>Custom options</strong></mark></td><td></td><td><a href="../product-pages/product-content-blocks/custom-option">custom-option</a></td></tr><tr><td><mark style="color:blue;"><strong>Featured icon with text</strong></mark></td><td>Description.</td><td><a href="../product-pages/product-content-blocks/featured-icon-with-text">featured-icon-with-text</a></td></tr><tr><td><mark style="color:blue;"><strong>Icon with text</strong></mark></td><td>Description.</td><td><a href="../product-pages/product-content-blocks/icon-with-text">icon-with-text</a></td></tr><tr><td><mark style="color:blue;"><strong>Image</strong></mark></td><td>Description.</td><td><a href="../product-pages/product-content-blocks/image-block">image-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Inventory status</strong></mark></td><td></td><td><a href="../product-pages/product-content-blocks/inventory-status">inventory-status</a></td></tr><tr><td><mark style="color:blue;"><strong>Popup</strong></mark></td><td></td><td><a href="../product-pages/product-content-blocks/popup-block">popup-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Product rating</strong></mark></td><td></td><td><a href="../product-pages/product-content-blocks/product-rating">product-rating</a></td></tr><tr><td><mark style="color:blue;"><strong>Share icons</strong></mark></td><td></td><td><a href="../product-pages/product-content-blocks/share-icons">share-icons</a></td></tr><tr><td><mark style="color:blue;"><strong>Text</strong></mark></td><td>Description.</td><td><a href="../product-pages/product-content-blocks/text-block">text-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Custom Liquid</strong></mark></td><td></td><td><a href="../product-pages/product-content-blocks/custom-liquid-block">custom-liquid-block</a></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/eclipse/sections/feature-product.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.