> 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/products/product-page.md).
# Product Page
### 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: 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/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.
***
### Product templates
The Volume theme includes three 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 dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://staylime.com/docs/volume-themes/products/product-page.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.