> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Shine Gallery Shoppable

**Theme:** Shine · **Section type:** All-template section

A Gallery shoppable section shows a row of images and videos that customers can scroll through. You can link products to each item, so customers can open a "Shop the look" drawer and go straight to the products they see.

> **Note:** You can add this section to any template and to the footer, but not to the header. The section comes with 5 image items.

![Gallery shoppable section with image items and shop buttons](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/gallery-1_tkx19.jpg)

**What you can do**
- Add the section and your gallery items
- Link products to a gallery item
- See what customers see
- Change the heading, button, and image settings
- Fix common problems

---

## Add the section and your gallery items
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Gallery shoppable**. The section comes with 5 image items.
3. Click an **Image item** block and select an **Image**.
4. To add a video, click **Add block** > **Video item**. Choose a **Video source**, then enter an **External video** link (YouTube or Vimeo) or select a **Shopify-hosted video**.
5. Optional: under **General**, enter a **Section heading**, a **Section subheading**, and a **Section description**.
6. Click **Save**.

> **Tip:** The theme editor recommends more than 5 gallery items for the best look. Use images with a similar style and crop, because every item uses the same **Image ratio**.

## Link products to a gallery item
1. In the left sidebar, click an **Image item** or **Video item** block.
2. Under **Shop the look**, click **Products** and select the products shown in that image or video.
3. Repeat for each item you want to make shoppable.
4. Click **Save**.

| Setting | What it does |
| ---- | ---- |
| Products | Lists the products that appear in the "Shop the look" drawer for this item. An item without products has no shop button. |

> **Tip:** Link only the products that customers can actually see in the image. A short, accurate list converts better than a long one.

## What customers see
- **Gallery:** the items appear side by side in a row that spans the full width of the page. Large screens show 4 items at a time, smaller screens show fewer, and phones show 1. Customers scroll with the arrow buttons or by swiping.
- **Images and videos:** images zoom in slightly when customers hover over them. Videos play automatically, muted and on a loop, without player controls.
- **Shop button:** items with linked products show a round button with an eye icon in the bottom-right corner.
- **Shop the look drawer:** when customers click the eye button, a drawer titled "Shop the look" opens from the side. It shows the item's image or video and the linked products, each with its image, vendor, title, and price. Clicking a product image or title opens the product page.
- **Closing the drawer:** customers click **×**, click outside the drawer, or press **Esc**.
![The Shop the look drawer with the item's image and linked product](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/gallery-2_13n7yb5.jpg)


## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color schemes | Sets the colors of the section. You edit color schemes in Theme settings > Colors. |
| Section subheading | Adds a short line of text above the heading. |
| Section heading | Adds a heading above the gallery. To highlight part of the heading, put it between [ and ]. You choose the highlight style in Theme settings > Typography. |
| Heading size | Sets the heading size: H2, H3, H4, or H5. |
| Section description | Adds text below the heading. |
| Section heading alignment | The first Section heading alignment setting aligns the heading text Left or Center on large screens. |
| Section heading alignment | The second Section heading alignment setting aligns the heading text Left or Center on mobile. |

### Button
| Setting | What it does |
| ---- | ---- |
| Label | Sets the text of the button in the section header. If you leave it empty, the button is hidden. |
| Link | Sets the page that the button opens. |
| Style | Shows the button as Filled, Outlined, or Text link. |

### Gallery item
| Setting | What it does |
| ---- | ---- |
| Image ratio | Sets the shape of every gallery item: Square, Portrait, or Landscape. Videos use the same shape. |

### Product card
| Setting | What it does |
| ---- | ---- |
| Image ratio | Sets the shape of the product images in the "Shop the look" drawer: Square, Portrait, Landscape, or Adapt to media. |
| Image background | Sets a background color behind product images. It shows only when a product image has a transparent background. |

### Image item settings
| Setting | What it does |
| ---- | ---- |
| Image | Sets the image for this gallery item. |
| Products | Sets the products for the "Shop the look" drawer. See "Link products to a gallery item" above. |

### Video item settings
| Setting | What it does |
| ---- | ---- |
| Video source | Chooses where the video comes from: External (YouTube or Vimeo) or Shopify-hosted. |
| External video | Sets the YouTube or Vimeo link. Used when Video source is External. |
| Shopify-hosted video | Sets a video uploaded to Shopify. Used when Video source is Shopify-hosted. |
| Products | Sets the products for the "Shop the look" drawer. See "Link products to a gallery item" above. |

## Troubleshooting
**There's no shop button on a gallery item.**
The eye button appears only on items that have products. Click the block and select **Products** under **Shop the look**.

**My Shopify-hosted video doesn't show.**
Check that **Video source** is set to **Shopify-hosted**. If it's set to **External**, the section uses the **External video** link instead.

**My images are cropped.**
Every item uses the section's **Image ratio** under **Gallery item**. Choose the ratio that matches most of your images, or crop your images to the same shape before you upload them.

**Customers can't pause or unmute a video.**
Gallery videos are designed as moving images: they play muted on a loop, without controls. Use a short clip that works without sound.

## Related articles
- [Shine Image Banner](https://doc.ecomx.co/en/article/shine-image-banner-12txcz9/)
- [Shine Text Hotspot](https://doc.ecomx.co/en/article/shine-text-hotspot-1uekzj0/)
- [Shine Collage: Media](https://doc.ecomx.co/en/article/shine-content-collage-1bqbejq/)
- [Shine Video Banner](https://doc.ecomx.co/en/article/shine-video-banner-4gepr1/)
- [Shine Theme Settings](https://doc.ecomx.co/en/article/shine-theme-settings-1876q8v/)

**In other themes:** [Normcore Shop The Look](https://doc.ecomx.co/en/article/normcore-shop-the-look-1cqguan/)