# Product page

**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="/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme">/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme</a></td><td><a href="/files/OZ4h4v0qfTnncw43MKk6">/files/OZ4h4v0qfTnncw43MKk6</a></td></tr><tr><td><strong>Section width</strong></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-width">/pages/3wq6hFMr3k1BDOHIgjqZ#section-width</a></td><td><a href="/files/lMLsRWOpgxDLC0CvtnAt">/files/lMLsRWOpgxDLC0CvtnAt</a></td></tr><tr><td><strong>Section padding</strong></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding">/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding</a></td><td><a href="/files/3ddmAtuVNo9MtYTf38ov">/files/3ddmAtuVNo9MtYTf38ov</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="/pages/xHSCxA4JXppUU1PTbj98">/pages/xHSCxA4JXppUU1PTbj98</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="/pages/VH11cL5rsvxSCaLSYnbH">/pages/VH11cL5rsvxSCaLSYnbH</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="/pages/uxw9wBof0eQyNvDNNiEh">Show as collapsible row</a></td><td></td><td><a href="/pages/uxw9wBof0eQyNvDNNiEh">/pages/uxw9wBof0eQyNvDNNiEh</a></td></tr><tr><td><mark style="color:blue;"><strong>Price</strong></mark></td><td><p><a href="/pages/owNdA6drNyY8S3NShhdG#show-discounts">Show discounts</a></p><p><a href="/pages/owNdA6drNyY8S3NShhdG#show-sale-and-sold-out-badges">Sale and sold out badges</a><br><a href="/pages/owNdA6drNyY8S3NShhdG#shop-pay-instalments-banner">Shop Pay Instalments</a></p></td><td></td><td><a href="/pages/owNdA6drNyY8S3NShhdG">/pages/owNdA6drNyY8S3NShhdG</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="/pages/5TuK6lgxJb5c1H2WD2FA#variant-selector-style">Choose selector style</a></p><p><a href="/pages/XeP1NCniPgMwEdnnBXop">Show swatches</a></p><p><a href="/pages/4uBlRVxwxgMywTAHMM51">Add info popup</a> (product guide)</p></td><td><a href="/pages/5TuK6lgxJb5c1H2WD2FA">/pages/5TuK6lgxJb5c1H2WD2FA</a></td></tr><tr><td><mark style="color:blue;"><strong>Buy buttons</strong></mark></td><td><p><a href="/pages/1CS5FY9RBOnUjMR3qRzL#change-button-style">Choose button style</a></p><p><a href="/pages/1CS5FY9RBOnUjMR3qRzL#dynamic-checkout-button">Show dynamic checkout buttons</a></p><p><a href="/pages/1CS5FY9RBOnUjMR3qRzL#local-pickup-banner">Show pickup availability</a></p></td><td><a href="/pages/1CS5FY9RBOnUjMR3qRzL">/pages/1CS5FY9RBOnUjMR3qRzL</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="/pages/JXwSFrWS5WBrWKjkJiXK">/pages/JXwSFrWS5WBrWKjkJiXK</a></td></tr><tr><td><mark style="color:blue;"><strong>Complementary products</strong></mark></td><td></td><td><a href="/pages/wKfSEZOr3mnW5sKVCczG">/pages/wKfSEZOr3mnW5sKVCczG</a></td></tr><tr><td><mark style="color:blue;"><strong>Custom options</strong></mark></td><td></td><td><a href="/pages/6I0nlgPMeAiZGNJXUWxg">/pages/6I0nlgPMeAiZGNJXUWxg</a></td></tr><tr><td><mark style="color:blue;"><strong>Featured icon with text</strong></mark></td><td>Description.</td><td><a href="/pages/Ug0RI0DCr5i244UFarCz">/pages/Ug0RI0DCr5i244UFarCz</a></td></tr><tr><td><mark style="color:blue;"><strong>Icon with text</strong></mark></td><td>Description.</td><td><a href="/pages/ykErZ4eoIOQjwRT4yOhb">/pages/ykErZ4eoIOQjwRT4yOhb</a></td></tr><tr><td><mark style="color:blue;"><strong>Image</strong></mark></td><td>Description.</td><td><a href="/pages/g0rogOOuSRCdVEa7prHv">/pages/g0rogOOuSRCdVEa7prHv</a></td></tr><tr><td><mark style="color:blue;"><strong>Inventory status</strong></mark></td><td></td><td><a href="/pages/7TyZyf4lqbCZOs5nL5kg">/pages/7TyZyf4lqbCZOs5nL5kg</a></td></tr><tr><td><mark style="color:blue;"><strong>Popup</strong></mark></td><td></td><td><a href="/pages/O9dOcoiSiVJSYwEonE0f">/pages/O9dOcoiSiVJSYwEonE0f</a></td></tr><tr><td><mark style="color:blue;"><strong>Product rating</strong></mark></td><td></td><td><a href="/pages/BsPF0lvW6wZkEzLm7NW3">/pages/BsPF0lvW6wZkEzLm7NW3</a></td></tr><tr><td><mark style="color:blue;"><strong>Share icons</strong></mark></td><td></td><td><a href="/pages/ymEUveqYE6JoZvpbGYx6">/pages/ymEUveqYE6JoZvpbGYx6</a></td></tr><tr><td><mark style="color:blue;"><strong>Text</strong></mark></td><td>Description.</td><td><a href="/pages/ifHgmaXAmEhxBJVGq9If">/pages/ifHgmaXAmEhxBJVGq9If</a></td></tr><tr><td><mark style="color:blue;"><strong>Custom Liquid</strong></mark></td><td></td><td><a href="/pages/zbbxSdlA7oVIq8PjG1Gq">/pages/zbbxSdlA7oVIq8PjG1Gq</a></td></tr></tbody></table>

## Product recommendations

***

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


---

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