# 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)
