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.
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
- In the theme editor, open the template where you want the section.
- In the left sidebar, click Add section > Gallery shoppable. The section comes with 5 image items.
- Click an Image item block and select an Image.
- 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.
- Optional: under General, enter a Section heading, a Section subheading, and a Section description.
- 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
- In the left sidebar, click an Image item or Video item block.
- Under Shop the look, click Products and select the products shown in that image or video.
- Repeat for each item you want to make shoppable.
- 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.
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
In other themes: Normcore Shop The Look
Updated on: 22/10/2026
Thank you!