# Media gallery

{% hint style="info" %}
**Update |** Gallery styles and the sticky sidebar were added in v2.11.0 on Nov 10, 2022. See our [changelog](https://help.fluorescent.co/spark/readme/changelog) and [theme update guide](https://help.fluorescent.co/spark/general/theme-updates) to learn more.
{% endhint %}

Customize the size and layout of your product media by changing the product **Media** settings. You can also make the product details **Sticky**, so they remain fixed in-place when scrolling down.

![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-6542e7f417037bb6a4869455ec159d6b2a364400%2Fproduct-layout-grid.jpeg?alt=media)

![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-9f91641c3389a1175dfe2ab24d85c6f12add413d%2Fproduct-layout-thumbnail.jpeg?alt=media)

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click on the **Product overview** section to open the settings.
2. (*Optional*.) For long product forms, uncheck the **Enable sticky sidebar** checkbox so customers can easily access product details and buy buttons when they scroll down.

   > The default "sticky" sidebar keeps the product form in view when scrolling.
3. Select a **Gallery style** to change the layout of your product media.

   > **Grid** displays product images in two columns. See [Minimal demo](https://spark-theme-chic.myshopify.com/products/aude-trousers-light_fawn) example.

   > **List** displays product images in on column. See [Clean demo](https://spark-theme-clean.myshopify.com/products/moisture-riser-cream) example.

   > **Thumbnails** displays all product images as small clickable images next to the main product image. See [Chic demo](https://spark-theme-chic.myshopify.com/products/aude-trousers-light_fawn) example.
4. Select the **Gallery size** of your product media. Either **Small**, **Medium**, or **Large**.

   > The width of the product details will increase or decrease according the gallery size.

   > Set the **Mobile gallery style**. Either **Thumbnails** or **Carousel**.
5. To make all product media a uniform shape, set the **Image aspect ratio** to crop your images to **Square**, **Landscape**, or **Portrait**.

   > The default **Natural** setting displays the original orientation of your product media.

   ![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-18e593ad0edf007db92b2db4471c455059562ccf%2Faspect-ratio.jpeg?alt=media)
6. Uncheck the **Enable video looping** checkbox to make product videos play a single time after customers click play.

   > See Shopify's [Product media](https://help.shopify.com/en/manual/products/product-media) guide to learn more.
7. Uncheck the **Product lightbox** option if you don't want your product images to appear in a full-size "lightbox" when clicked.
8. Click **Save**.

</details>

### Settings reference

Click the **Product overview** section to find the following settings.

| Setting              | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Gallery style        | <p><strong>Grid</strong> displays product images in two columns. See <a href="https://spark-theme-chic.myshopify.com/products/aude-trousers-light_fawn">demo example</a>.<br><br><strong>List</strong> displays product images in on column. See <a href="https://spark-theme-clean.myshopify.com/products/moisture-riser-cream">demo example</a>.<br><br><strong>Thumbnails</strong> displays all product images as small clickable images next to the main product image. See <a href="https://spark-theme-chic.myshopify.com/products/aude-trousers-light_fawn">demo example</a>.</p> |
| Gallery size         | Change the size of the thumbnail product images. Select Small, Medium, or Large. The width of the product details will increase or decrease according the gallery size.                                                                                                                                                                                                                                                                                                                                                                                                                  |
| Mobile gallery size  | For mobile devices, display product media as Thumbnails or in a Carousel.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| Enable video looping | After a video starts playing, choose to loop the video continuously.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| Product lightbox     | Allow visitors to view product images in a full-size popup view.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| Image aspect ratio   | <p>Choose to crop all product images to be a single uniform shape. Select Portrait (2:3), Portrait (4:5), Square (1:1), Landscape (5:4), or Landscape (3:2).<br><br>Select Natural to display images in their original shape (without cropping). Learn more about aspect ratios in our <a href="../../general/image-guide/theme-image-settings">Image settings guide</a>.</p>                                                                                                                                                                                                            |

| Setting                | Description                                                                                                                                                                                      |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Enable full-width      | Display your product page content across the entire webpage without side margins.                                                                                                                |
| Show image thumbnails  | Show additional product images as thumbnails that visitors can click to view. Toggle off this option to show product media in a single column.                                                   |
| Thumbnail position     | Display product images thumbnails either Below the product image or Beside the product image.                                                                                                    |
| Thumbnail size         | Choose to display the product image thumbnails as Small, Medium, or Large.                                                                                                                       |
| Thumbnail aspect ratio | <p>Make product media thumbnails a uniform shape by cropping them all as Square, Landscape, or Portrait.<br><br>Select Natural to display product media with the original shape as uploaded.</p> |
| Enable video looping   | For your products that have product videos added as media, make videos loop continuously after customers click to play them.                                                                     |
| <p><br></p>            |                                                                                                                                                                                                  |

***

> **Related links**
>
> [Breadcrumbs](https://help.fluorescent.co/spark/product-pages/layout-and-style/breadcrumbs)\
> [Navigation buttons](https://help.fluorescent.co/spark/product-pages/layout-and-style/navigation-buttons)


---

# 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/spark/product-pages/layout-and-style/media-gallery.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.
