Product Slider

About this module

A Shopify product carousel that scrolls horizontally with arrow controls and scroll snap — great for 'You may also like' rows.

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-slider, 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-slider` under Sections and paste the source.

   {{ 'styles.css' | asset_url | stylesheet_tag }}
   <div class="mh-slider" data-slider>
     {% if section.settings.show_arrows %}
       <button class="mh-slider-arrow prev" data-prev aria-label="Previous">←</button>
       <button class="mh-slider-arrow next" data-next aria-label="Next">→</button>
     {% endif %}
     <div class="mh-slider-track" data-track>
       {% for block in section.blocks %}
         <div class="mh-slider-slide" style="--slide: {{ section.settings.slides_per_view }}">
           {%- assign product = block.settings.product -%}
           <a href="{{ product.url }}" class="mh-slider-card">
             <img src="{{ product.featured_image | image_url: width: 400 }}" alt="{{ product.featured_image.alt | escape }}" width="300" height="300" loading="lazy" />
             <span class="mh-slider-title">{{ product.title }}</span>
             <span class="mh-slider-price">{{ product.price | money }}</span>
           </a>
         </div>
       {% endfor %}
     </div>
   </div>
   
   <script>
   (function(){
     var track=document.querySelector('[data-track]');
     var prev=document.querySelector('[data-prev]'),next=document.querySelector('[data-next]');
     var scroll=function(dir){track.scrollBy({left:dir*track.clientWidth*.8,behavior:'smooth'})};
     if(prev)prev.onclick=function(){scroll(-1)};
     if(next)next.onclick=function(){scroll(1)};
   })();
   </script>
   
   {% schema %}
   {
     "name": "MH Product Slider",
     "tag": "div",
     "settings": [
       { "type": "range", "id": "slides_per_view", "label": "Slides per view", "min": 1, "max": 4, "step": 1, "default": 3 },
       { "type": "checkbox", "id": "autoplay", "label": "Autoplay", "default": false },
       { "type": "checkbox", "id": "show_arrows", "label": "Show arrows", "default": true }
     ],
     "blocks": [{ "type": "product", "name": "Product", "settings": [{ "type": "product", "id": "product", "label": "Product" }] }],
     "presets": [{ "name": "MH Product Slider", "category": "ModuleHarbor", "blocks": [{ "type": "product" }] }]
   }
   {% endschema %}

2. 2

   Configure in the customizer

   Adjust the settings that ship with the section schema.