In Flex theme, i want to be able to see thumbnails on scrolling.

Store Design
, ,
1

Hi,

i have the Flex theme and my product pages in the scrolling template. I know that you can’t see thumbnails in a scrolling template but wonder if this is possible at all.

I’m looking to have thumbnails on the left of the main photo https://www.milloobags.com/collections/the-artemis-backpack/products/artemis-backpack-black-leather-1?variant=42606746063 .

Thank you in advance

Konstantinos

2

Hi Konstantinos

You’re absolutely right — by default, the Scrolling product template in the Flex theme doesn’t display image thumbnails. However, it is possible to customize the layout and show thumbnails (e.g., on the left side of the main image), though it requires a bit of code editing.

Here’s what you can consider:1. Duplicate your theme (Online Store > Themes > Actions > Duplicate) — always a good practice before editing.

  1. In your theme code:

    • Go to Online Store > Themes > Actions > Edit code

    • Locate the file that controls product image layout. In Flex, this might be something like:

      sections/product__main.liquid

      or

      snippets/product-media-gallery.liquid

  2. You would need to:

    • Create a vertical thumbnail list (left side) using a flexbox or grid layout.

    • Make sure thumbnails are clickable and update the main image when clicked.

    • Apply proper CSS to handle responsive design.

Alternative (Easier) Options:- Switch to the “Classic” or “Sections” template in Flex if you prefer having thumbnails without custom coding.

  • Reach out to Out of the Sandbox support, as they’re the official developers of the Flex theme and may already have a solution or an add-on for this.

If you have any other questions please let me know!

3

Hi, @Konstantinoc

If you want to keep the Scrolling template and add left-side thumbnails, here’s what you can do:

  1. Edit sections/product-scroll.liquid
    Find the section that renders the product media, something like:
{% section 'product__media-gallery' %}

or:

{% render 'media-gallery', product: product %}
  1. Wrap it with a Flexbox container

{% for media in product.media %}

{% endfor %}

{% render 'media-gallery', product: product %}

Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!
If you will unable to implement the same then I’m happy to do this for you, let me know.

4

Hi @Konstantinoc

You can try going to your store admin > Sales channels > Online Store > Themes > Customize > click the Homepage dropdown menu at the top > Products > Default product, and check if it has an option to change your product media as requested.