Layout where all product images are stacked vertically on the left, no thumbnails

Store Design
, , , ,
1

Dawn Theme

We are trying to achieve a layout where all product images are stacked vertically on the left (instead of displaying as small thumbnails) and clicking on any of them shows a larger version as usual.

Here is an example:

https://modemischiefstudios.com/products/cherry-tee

2

Hey @maltesefalcon ,

Understood! Here’s a step-by-step guide on how to achieve that:

  1. Locate the Product Media Gallery Section
    Navigate to Sections → product-media-gallery.liquid in your theme.

  2. Replace or Modify the Gallery Code
    Update the existing code with the following snippet:

    <style>
  .product__media-gallery {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .product__media-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .product__media-item {
    width: 100%;
    cursor: pointer;
  }

  .product__media-main {
    position: sticky;
    top: 20px;
  }

  @media screen and (max-width: 749px) {
    .product__media-gallery {
      grid-template-columns: 1fr;
    }
  }
</style>

<div class="product__media-gallery">
  <div class="product__media-list">
    {%- for media in product.media -%}
      <div class="product__media-item" data-media-id="{{ media.id }}">
        <img
          srcset="{%- if media.preview_image.width >= 120 -%}{{ media.preview_image | image_url: width: 120 }} 120w,{%- endif -%}"
          src="{{ media.preview_image | image_url: width: 120 }}"
          alt="{{ media.alt | escape }}"
          loading="lazy"
          width="120"
          height="{{ 120 | divided_by: media.preview_image.aspect_ratio | round }}"
        >
      </div>
    {%- endfor -%}
  </div>

  <div class="product__media-main">
    {{ product.featured_media | image_url: width: 800 | image_tag }}
  </div>
</div>

<script>
  document.querySelectorAll('.product__media-item').forEach(item => {
    item.addEventListener('click', () => {
      const mediaId = item.dataset.mediaId;
      const media = {{ product.media | json }}.find(m => m.id === parseInt(mediaId));
      const mainImage = document.querySelector('.product__media-main img');
      mainImage.src=media.preview_image.src;
      mainImage.srcset = '';
    });
  });
</script>

  3. Key Features of This Implementation

    • Vertical Thumbnail List: Thumbnails are stacked vertically on the left.
    • Sticky Main Image: The main product image on the right remains sticky as you scroll.
    • Responsive Design: On mobile devices, the layout stacks into a single column.
    • Interactive Thumbnails: Clicking a thumbnail updates the main image.
    • Optimized for Performance: Maintains image quality and uses lazy loading.

  4. Customization Options

    • Thumbnail Width: Adjust the width (currently set to 120px) as needed.
    • Spacing: Modify the gaps between images.
    • Sticky Behavior: Change the sticky positioning if desired.
    • Additional Effects: Consider adding hover effects or active states for better interactivity.

This solution should provide a clean and responsive vertical layout for your product images. If you have any questions or need further adjustments (like tweaking spacing, image sizes, or adding zoom functionality), feel free to ask!

Hope this helps, and happy customizing!

Shubham | Untechnickle

P.S Please create a copy of live theme and then make these changes. Once you’re satisfied, publish the theme.