> 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/product-pages/product-template.md).

# Product page

Template

**Product templates** control the content, layout, and style of your product pages. In the theme editor, you can customize the product media, product overview, and overall page design.

> To modify how products appear in collections and sections, go to the [product listing options](/eclipse/products/product-listings.md) in your theme settings.

{% hint style="success" %}
Products are created and managed in your Shopify admin. To learn more, refer to [Shopify's Products manual](https://help.shopify.com/en/manual/products).
{% endhint %}

## Customize page style

***

Click the **Product overview** section to edit the page colors, spacing, and layout.

<table data-view="cards"><thead><tr><th></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><strong>Color scheme</strong></td><td><a href="/eclipse/sections/overview/section-styles.md#color-scheme">Using sections</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2F3XSH2rw2Xl7gRoMb34up%2Fsection-colors.jpg?alt=media&amp;token=ccb376a8-d35b-4822-9bb0-5de9a0eb5ae6">section-colors.jpg</a></td></tr><tr><td><strong>Section width</strong></td><td><a href="/eclipse/sections/overview/section-styles.md#section-width">Using sections</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FDCCYMn4K3pSbVR42zVAF%2Fsection-width.jpg?alt=media&amp;token=68dd352f-bb69-4220-87a0-6a1c733d909c">section-width.jpg</a></td></tr><tr><td><strong>Section padding</strong></td><td><a href="/eclipse/sections/overview/section-styles.md#section-padding">Using sections</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FoZCVax7FX1rLehRaYU5Y%2Fsection-padding.jpg?alt=media&amp;token=3dbb23bd-4ab6-4874-8834-941a671e5cec">section-padding.jpg</a></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 Product overview 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>

## Sticky add to cart

***

The **Sticky 'Add to cart'** allows customers to add a product directly to their cart anywhere on the product page. When the product form's add-to-cart button is not visible, the sticky bar appears at the bottom of the page with an add-to-cart button.

The sticky bar displays the product title, price, image, and variant. Next to the variant, visitors can click the 'Change' link to jump to the variant selectors in the product form.

Click the **Product overview** section to toggle the Sticky add to cart for Desktop and Mobile.

## Product overview blocks

***

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

### Default blocks

***

The **Product overview** includes blocks for 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">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#shop-pay-instalments-banner">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/products/swatches.md">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 for your product page.

<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>

## Product recommendations

***

Add a full [product recommendations section](/eclipse/product-pages/product-recommendations.md) to your product pages.