Shopify 2.O Product Grid Product image slider

• Activate the Shopify theme editor. Find or create the section file in the Sections folder where the product card and image slider should be added. You might have a “featured-products.liquid” file, for instance.

• To construct the product card, place the following Liquid code inside the section file:

{% for product in section.products %}
  <div class="product-card">
    <div class="product-image-slider">
      {% for image in product.images %}
        <div class="slide">
          <img src="{{ image.src | img_url: 'medium' }}" alt="{{ image.alt }}">
        </div>
      {% endfor %}
    </div>
    <h3 class="product-title">{{ product.title }}</h3>
    <span class="product-price">{{ product.price | money }}</span>
  </div>
{% endfor %}

This code displays a product card for each of the products you specify by iterating through the list of products. By looping over the photographs linked to each product, it creates a product image slider inside the card. Make the HTML and CSS classes specific to your design needs.

• The next step is to style and control the image slider by adding the relevant CSS and JavaScript code to the CSS and JavaScript files of your theme. Here is a simple illustration utilizing the well-liked Slick Slider library:

CSS:

.product-image-slider {
  /* Add styles for the slider container */
}

.slide {
  /* Add styles for each slide item */
}

JavaScript:

$(document).ready(function() {
  $('.product-image-slider').slick({
    // Add options for the slider (e.g., autoplay, navigation, etc.)
  });
});

To use the slider functionality, confirm that the jQuery and Slick Slider libraries are correctly included in your theme.

I’m done now! To see the product card with the picture slider in action, save your modifications and view your Shopify store in preview mode. Adapt the code and design to your unique requirements and theme architecture.