> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/volume-themes/collections-and-products/product-page.md). # Product Page Configure Volume product page layout: choose media display (grid, stack, gallery, slideshow), set media width, and pick from four pre-built product templates. ### Layout Configuration The Volume theme offers flexible product layout customization. Below, you'll find an overview of the key customization options. ### Media In addition to positioning product media on the left or right, the theme provides two styles: {% columns %} {% column %} 1. **Grids** Stack, Grid, Alternative grid 1, Alternative grid 2

**Show thumbnails** setting is enabled: **On top**.

{% endcolumn %} {% column %} 2\. **Images slideshow** Gallery

**Show thumbnails** setting is enabled: **Below gallery**.

{% endcolumn %} {% endcolumns %} ### Media size The **Size** setting allows you to define the preferred width of the media. The minimum width is **4/12**, while the maximum width is **9/12**. ### **Fit Media Inside Container** By enabling the **Fit media inside container** checkbox and adjusting **Container inner spacing**, you can fit images within their original aspect ratio, creating additional whitespace around them.

This is useful when product media have different aspect ratios. Additionally, you can modify the **Media gallery color scheme** under the **Section layout** heading to change the background color of the media display. ### Thumbnails Under the **Thumbnails** heading, you will find extensive customization options, including placement, size, and shape. You can also enable sticky thumbnails on desktop (Incompatible with ['Gallery' media style](/docs/volume-themes/collections-and-products/product-page.md#media)). ### Overlap If your product images have a uniform background color and there are no other sections before the **Product Overview** section in the **Template** group, you can enable **Overlap** in the section's settings. This makes the header transparent. {% hint style="success" icon="lightbulb" %} To prevent the header from overlapping with section content, adjust the **Offset** setting in the **Product Overview** section.

{% endhint %} ### Layout By modifying the **Container paddings** setting, you can increase or decrease the side paddings of the content.

Under the **Content** heading in the **Product Overview** section settings, you will find the **Layout** selector. When adding a **Second container**, all blocks below it are grouped and arranged according to the selected **Layout** option. ### Buy buttons The **Add to cart** button and the **Buy it now** dynamic checkout button both come from the **Buy buttons** block in **Product overview**. The bar that follows the shopper down the page is a different thing — the **Sticky 'Add to Cart'** group in the section's own settings, where **Enable** switches it on and the settings beneath it control what the bar shows. If any of them is missing on the storefront, or you are trying to turn **Buy it now** on or off, see [The Add to cart button is missing](/docs/volume-themes/faq/cart-and-checkout/the-add-to-cart-button-is-missing.md). ### Barcode The **Product overview** section has a **Barcode (ISBN, UPC, etc.)** block, limited to one. It prints the selected variant's barcode from the Shopify admin after the block heading, which is **Barcode:** out of the box. The block is hidden when the selected variant has no barcode, and the number updates as the shopper switches variant. The same block is available in **Featured product** and **Quick view**. ### Related collections **Product overview** has a **Related collections** block, and **Featured product** has the same block. [Related collections](/docs/volume-themes/collections-and-products/collection-page/related-collections.md) explains which collection it uses. ### Volume pricing **Product overview** and **Featured product** can include a **Volume pricing** block. [Volume pricing](/docs/volume-themes/collections-and-products/product-page/volume-pricing.md) explains why the block is often invisible. ### Quick order list A product template can also carry a **Quick order list** section, which puts every variant of the product into one table — see [Quick order list](/docs/volume-themes/collections-and-products/product-page/quick-order-list.md). ### Back in stock alert **Product overview** and **Featured product** can include a **Back in stock alert** block. The form emails the store, not the shopper. See [Back in stock alert](/docs/volume-themes/collections-and-products/product-page/back-in-stock-alert.md). ### Collapse long text **Description** and **Text** on **Product overview** can shorten their copy with **Collapse long text**. [Collapse long text](/docs/volume-themes/theme-sections/text/collapse-long-text.md) covers the lines and the buttons. **Collapsible description** is a different block. *** ### Product templates The Volume theme includes four pre-configured product templates with different content display settings: 1. **Only first container** A classic layout where all section blocks are stacked vertically without separation into two containers.

2. **First and second stretched vertically** Recommended for minimal content.

This layout also allows padding adjustments: * **First container padding:** Adds padding at the top. * **Second container padding:** Adds padding at the bottom. 3. **Containers in two columns** Each container has alignment and padding options.

When using this layout, media width on smaller screens may be reduced from the **Size** setting under the **Media** section because a minimum content width is set for columns. {% hint style="success" icon="lightbulb" %} If **Overlap** is enabled, ensure you add an **Offset** approximately equal to the header height to prevent it from covering the content. {% endhint %} 4. **Place the second container below media** Keep only essential content on the first screen while moving the detailed product description below the media.

--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://staylime.com/docs/volume-themes/collections-and-products/product-page.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.