Product Page — Gallery

About this module

A Shopify product page gallery with a large main image and clickable thumbnails, ideal for the top of product templates.

Installation

1. 1

   Open Shopify Admin

   Go to Online Store → Themes.

2. 2

   Edit code

   Click the ellipsis (⋯) next to your theme and choose Edit Code.

3. 3

   Create the section

   In the Sections folder, click Add a new section, name it mh-product-gallery, and replace the contents with the Liquid source below.

4. 4

   Save

   Save the file. The section now appears in the Theme Customizer.

5. 5

   Add it to the page

   Open the Theme Customizer, click Add section, search for it and add it where you like.

Usage

1. 1

   Paste the section

   Create `mh-product-gallery` under Sections and paste the source.

   {{ 'styles.css' | asset_url | stylesheet_tag }}
   <div class="mh-gallery">
     <div class="mh-gallery-main">
       {% if product.featured_image %}
         <img id="mh-main-img" src="{{ product.featured_image | image_url: width: 1000 }}" alt="{{ product.featured_image.alt | escape }}" width="1000" height="1000" />
       {% endif %}
     </div>
     {% if section.settings.show_thumbnails %}
       <div class="mh-gallery-thumbs">
         {% for image in product.images limit: 5 %}
           <button class="mh-gallery-thumb" data-src="{{ image | image_url: width: 1000 }}" aria-label="View image {{ forloop.index }}">
             <img src="{{ image | image_url: width: 120 }}" alt="{{ image.alt | escape }}" width="60" height="60" loading="lazy" />
           </button>
         {% endfor %}
       </div>
     {% endif %}
   </div>
   
   <script>
   document.querySelectorAll('.mh-gallery-thumb').forEach(function(t){
     t.addEventListener('click',function(){
       document.getElementById('mh-main-img').src=t.dataset.src;
       document.querySelectorAll('.mh-gallery-thumb').forEach(function(x){x.classList.remove('active')});
       t.classList.add('active');
     });
   });
   </script>
   
   {% schema %}
   {
     "name": "MH Product Gallery",
     "tag": "div",
     "settings": [
       { "type": "checkbox", "id": "show_thumbnails", "label": "Show thumbnails", "default": true },
       { "type": "select", "id": "image_ratio", "label": "Image ratio", "options": [{ "value": "square", "label": "Square" }, { "value": "portrait", "label": "Portrait" }], "default": "square" }
     ],
     "presets": [{ "name": "MH Product Gallery", "category": "ModuleHarbor" }]
   }
   {% endschema %}

2. 2

   Configure in the customizer

   Adjust the settings that ship with the section schema.