Images and gallery

A main media area that renders images, video, external video, or 3D models, and a thumbnail strip that clones itself once per media item and switches the main media on click.

<storesynk-product handle="example-product">
  <div class="gallery">
    <show-media main sizes="(max-width: 700px) 100vw, 480px" class="main-image">
      <img alt="" />
    </show-media>

    <div class="thumbnails">
      <show-thumbnail class="thumb"><img alt="" /></show-thumbnail>
    </div>
  </div>

  <show-image index="2" sizes="200px" widths="200,400" class="detail-shot">
    <img alt="" />
  </show-image>
</storesynk-product>

• show-media main follows the product’s active media index and renders whatever type that media is. Use show-image when you only ever want an image, or with index to pin a fixed position that ignores the gallery selection.
• show-thumbnail is self-cloning: write exactly one, with no index. The engine clones it per media item, fills the <img>, and marks the current one. Clicking a thumbnail updates the active index, and every main element follows it.
• Nest an <img>. The engine writes alt for you, falling back to the product title on the hero.

Options

Tag	Attribute	Default	What it does
show-image / show-media	main	false	Follow the product’s active media index.
show-image / show-media	index	0	Fixed media index, used when main is absent.
show-image / show-media	sizes	""	Passed through to the generated <img>. Match it to the rendered width.
show-image / show-media	widths	"400,800,1200,1600"	Comma-separated widths for the responsive srcset.
show-thumbnail	index	(engine-set on clones)	Never author it.

Styling

The current thumbnail gets ss-active (plus aria-current).

.main-image img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.thumbnails { display: flex; gap: 8px; overflow-x: auto; }
.thumb { width: 72px; height: 72px; flex-shrink: 0; cursor: pointer; border: 2px solid transparent; border-radius: 8px; }
.thumb[ss-active] { border-color: #1a1a1a; }

Gotchas

• Authoring index on the thumbnail template breaks the cloning (validator rule SSK-303). See media.
• A missing thumbnail strip on a one-image product is expected: it hides itself at one or zero media items.
• If the browser loads an unexpected image size, tune sizes to match the rendered width.

Related

• Media reference
• Display product info
• Variant options