Skip to content

How do I put product thumbnails below the main image?

On current theme versions, this is a setting. You do not need custom CSS.

Edit theme → product template → Media layout = Thumbnails → Thumbnail position = Below.

  1. Open Edit theme and switch to a product template.
  2. Click the Product section (not a block).
  3. Set Media layout to Thumbnails.
  4. Set Thumbnail position to Below (Left and Right keep the strip beside the image).

This also exists on the Featured product section.

Version availability

Thumbnail position is available in:

  • Beyond - versions 7.3.0 and up
  • Blockshop - versions 13.3.0 and up
  • Maker - versions 12.3.0 and up
  • Emerge - versions 10.3.0 and up

Older versions

On versions below those, there is no Thumbnail position setting. Use Theme settings → Custom CSS:

.product-media--variants--root {
    flex-direction: column;
}

.product-media--thumbs {
    order: 2;
    width: 100%;
    height: var(--thumbnail-width, 80px);
}

.product-media--thumb > * {
    height: 100%;
    width: auto;
}

.product-media--thumbs-wrapper {
    flex-direction: row;
}

Edit theme → product template → Media layout = Thumbnails → Thumbnail position = Below. Test on a product with several images after you save. Custom CSS can need a refresh to take effect.