> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/eclipse/sections/feature-product.md).

# Feature product

{% hint style="info" %}
The Featured product section was added in v1.2.0 — Learn how to [update your theme](/eclipse/changelog/update-your-theme.md) 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&amp;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](/eclipse/pages/templates/using-templates.md) for different page layouts, or [show dynamic page content](/eclipse/general/editing-themes/dynamic-content-with-metafields.md) 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="/eclipse/sections/overview/section-styles.md#color-scheme">Using sections</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section width</strong></mark></td><td><a href="/eclipse/sections/overview/section-styles.md#section-width">Using sections</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section padding</strong></mark></td><td><a href="/eclipse/sections/overview/section-styles.md#section-padding">Using sections</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="/eclipse/product-pages/media-gallery.md">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="/eclipse/product-pages/media-gallery/media-grouping.md">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="/eclipse/product-pages/product-content-blocks/description.md">Change text size</a><br><a href="/eclipse/product-pages/product-content-blocks/description.md#set-up-description-block">Show as collapsible row</a></td><td></td><td><a href="/eclipse/product-pages/product-content-blocks/description.md">Description</a></td></tr><tr><td><mark style="color:blue;"><strong>Price</strong></mark></td><td><p><a href="/eclipse/product-pages/product-content-blocks/price.md#show-discounts">Show discounts</a></p><p><a href="/eclipse/product-pages/product-content-blocks/price.md#show-sale-and-sold-out-badges">Sale and sold out badges</a><br><a href="/eclipse/product-pages/product-content-blocks/price.md#show-sale-and-sold-out-badges">Shop Pay Instalments</a></p></td><td></td><td><a href="/eclipse/product-pages/product-content-blocks/price.md">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="/eclipse/product-pages/variant-options.md#variant-selector-style">Choose selector style</a></p><p><a href="/eclipse/product-pages/variant-options.md#swatches">Show swatches</a></p><p><a href="/eclipse/product-pages/variant-options/info-popup.md">Add info popup</a> (product guide)</p></td><td><a href="/eclipse/product-pages/variant-options.md">Variant selector</a></td></tr><tr><td><mark style="color:blue;"><strong>Buy buttons</strong></mark></td><td><p><a href="/eclipse/product-pages/product-content-blocks/buy-buttons.md#change-button-style">Choose button style</a></p><p><a href="/eclipse/product-pages/product-content-blocks/buy-buttons.md#dynamic-checkout-button">Show dynamic checkout buttons</a></p><p><a href="/eclipse/product-pages/product-content-blocks/buy-buttons.md#local-pickup-banner">Show pickup availability</a></p></td><td><a href="/eclipse/product-pages/product-content-blocks/buy-buttons.md">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="/eclipse/product-pages/product-content-blocks/collapsible-row.md">Collapsible row</a></td></tr><tr><td><mark style="color:blue;"><strong>Complementary products</strong></mark></td><td></td><td><a href="/eclipse/product-pages/product-content-blocks/complementary-products.md">Complementary products</a></td></tr><tr><td><mark style="color:blue;"><strong>Custom options</strong></mark></td><td></td><td><a href="/eclipse/product-pages/product-content-blocks/custom-option.md">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="/eclipse/product-pages/product-content-blocks/featured-icon-with-text.md">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="/eclipse/product-pages/product-content-blocks/icon-with-text.md">Icon with text</a></td></tr><tr><td><mark style="color:blue;"><strong>Image</strong></mark></td><td>Description.</td><td><a href="/eclipse/product-pages/product-content-blocks/image-block.md">Image block</a></td></tr><tr><td><mark style="color:blue;"><strong>Inventory status</strong></mark></td><td></td><td><a href="/eclipse/product-pages/product-content-blocks/inventory-status.md">Inventory status</a></td></tr><tr><td><mark style="color:blue;"><strong>Popup</strong></mark></td><td></td><td><a href="/eclipse/product-pages/product-content-blocks/popup-block.md">Popup block</a></td></tr><tr><td><mark style="color:blue;"><strong>Product rating</strong></mark></td><td></td><td><a href="/eclipse/product-pages/product-content-blocks/product-rating.md">Product rating</a></td></tr><tr><td><mark style="color:blue;"><strong>Share icons</strong></mark></td><td></td><td><a href="/eclipse/product-pages/product-content-blocks/share-icons.md">Share icons</a></td></tr><tr><td><mark style="color:blue;"><strong>Text</strong></mark></td><td>Description.</td><td><a href="/eclipse/product-pages/product-content-blocks/text-block.md">Text block</a></td></tr><tr><td><mark style="color:blue;"><strong>Custom Liquid</strong></mark></td><td></td><td><a href="/eclipse/product-pages/product-content-blocks/custom-liquid-block.md">Custom Liquid</a></td></tr></tbody></table>