---
title: How do I put product thumbnails below the main image?
url: https://support.troopthemes.com/faqs/how-do-i-move-product-thumbnails-below-the-main-image/
---

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