> 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/faq/products-and-variants/product-gallery-layout-ratios-and-zoom.md). # Product gallery: layout, ratios and zoom Gallery layouts, image ratios and zoom behaviour on the Volume product page, and what to do about blurry or cropped photos. All of it lives in the settings of the **Product overview** section itself, not in a block. Open the product template, click the section name, and scroll to the **Media** header. ### Layout **Style** offers five arrangements: **Stack**, **Grid** (the default), **Alternative grid 1**, **Alternative grid 2** and **Gallery**. They control the desktop layout; on mobile the media is always a swipeable row. **Gallery** is the only style that behaves like a classic one-image-at-a-time slideshow, so it is the only one with **Arrows style** and **Arrows size** next to it. The other four lay all the media out on the page at once. **Size** sets how much of the 12-column row the gallery takes — from 4/12 to 9/12, default 6/12. The content column gets whatever is left, so widening the gallery narrows the price and buy buttons. **Position** puts the gallery on the **Left** or the **Right**. **Grid gap** is the space between the media items. ### Ratios and cropping **Desktop media ratio** and **Mobile media ratio** are separate settings and both offer **Original** alongside the fixed ratios (1/1, 4/5, 2/3, 4/3, 3/2, 16/9). Default is 1/1 on both. On **Original** the image keeps its own proportions and nothing is cropped — but products shot at different ratios will then make the page height jump as the customer moves through the catalogue. A fixed ratio keeps the layout stable at the cost of cropping, and **Focal point** decides which part of the photo survives the crop. If you would rather not crop at all but still want a fixed frame, tick **Fit media inside container**. The image is then letterboxed inside the ratio instead of filled into it. Two settings come into play once it is on: **Container inner spacing**, the padding between the image and the edge of its frame, and **Media gallery color scheme**, which fills the empty space around the image. ### Zoom The **Image zoom** header holds a **Style** setting with four options, not three: * **Disable** — the default. Clicking an image does nothing. * **Open lightbox** — the image opens over the page. * **On hover** — the cursor magnifies the image in place, no overlay. * **Slideshow** — the overlay opens as a slider through all the media. Magnification is hard-coded at **2×** in the theme — there is no setting for the factor. That applies both to **On hover** and to the click-to-zoom inside the overlay. Once **Style** is anything but **Disable**, five more settings appear: **Desktop image width** (30–100%), **Mobile image width** (70–100%), a **Media ratio** and **Focal point** for the overlay that are independent of the gallery's own, **Show arrows in mobile slideshow**, and **Enable slideshow zoom on click**. {% hint style="warning" %} If zoomed images look soft, the source file is the limit. Upload product photos at least 2048px on the long edge — the theme cannot magnify detail that is not in the file, and 2× zoom on an 800px image will always look blurred. {% endhint %} {% hint style="warning" %} Very large files hurt more than they help. Keep uploads under roughly 500KB per image; Shopify serves resized versions automatically, but the largest one still has to download. {% endhint %} ### Thumbnails Desktop and mobile thumbnails are two separate groups of settings. Under **Desktop thumbnails**, **Show** offers **Disable** (the default), **Left**, **Below gallery** and **On top**. **Below gallery** does not apply to the **Grid** style — pick **Left** or **On top** there. **Enable sticky thumbnails** keeps the strip in view while the page scrolls, but it does not work with the **Gallery** style. **Width** (24–160px, default 80) and **Gap** size the strip, and it has its own media ratio, focal point and corner radius. Under **Mobile thumbnails**, **Show** is a simple checkbox, off by default, with the same width, gap, ratio and focal point settings beneath it. {% hint style="success" icon="lightbulb" %} See [Product page](/docs/volume-themes/products/product-page.md) for the rest of the section's settings. {% endhint %} --- # 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/faq/products-and-variants/product-gallery-layout-ratios-and-zoom.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.