Creating a Product Showcase with Changing Images: The Adidas Section

Visual appeal is crucial for attracting customers and driving sales. One effective way to enhance your online store's aesthetics is by incorporating dynamic product showcases. In this blog post, we will explore how to create a Shopify section that replicates the Adidas website's product card feature, complete with changing images. This section not only looks great but also engages users by showcasing multiple product images in a seamless manner.

Code: https://github.com/ndrishinski/blogs/blob/master/adidas-changing-image/sections/adidas-images.liquid

Prefer video?

Enjoy, otherwise read on!

 

Overview of the Adidas Section

The Adidas section we will create consists of a grid of product cards, each featuring an image that changes at a specified interval. This design allows customers to see different angles or variations of a product without needing to click through multiple images. The section is built using Liquid, Shopify's templating language, along with HTML and CSS for styling.

Key Features

• 
  
  Responsive Design: The product grid adapts to different screen sizes, ensuring a great user experience on both desktop and mobile devices.Dynamic --
• Image Switching: Each product card can display up to four images, which automatically rotate based on a defined interval.Customizable Settings:
• Store owners can easily modify the button text, image links, and other settings through the Shopify admin interface.

1. Setting Up the Section

To create the Adidas section, you will need to add a new Liquid file in your Shopify theme. This file will contain the HTML structure, CSS styles, and JavaScript functionality.

2. HTML Structure

The HTML structure consists of a container for the product grid and individual product cards. Each card includes an image container, title, subheading, and a call-to-action button. Here’s a simplified version of the HTML:

<div class="container" id="adidas-section">
  <div class="product-grid">
    {% for block in section.blocks %}
      <div class="product-card">
        <div class="product-image">
          <div class="image-container" style="background-image: url('{{ block.settings.card_image_1 | image_url: width: 450, crop: 'center' }}');"
            {% if block.settings.card_image_1 %}data-first="{{ block.settings.card_image_1 | image_url: width: 450, crop: 'center' }}"{% endif %}
            {% if block.settings.card_image_2 %}data-second="{{ block.settings.card_image_2 | image_url: width: 450, crop: 'center' }}"{% endif %}
            {% if block.settings.card_image_3 %}data-third="{{ block.settings.card_image_3 | image_url: width: 450, crop: 'center' }}"{% endif %}
            {% if block.settings.card_image_4 %}data-fourth="{{ block.settings.card_image_4 | image_url: width: 450, crop: 'center' }}"{% endif %}
            data-interval="{{ block.settings.interval }}"
          ></div>
        </div>
        <h2>{{ block.settings.card_title }}</h2>
        <p>{{ block.settings.card_subheading }}</p>
        <a href="collections/{{ block.settings.collection-link }}" class="shop-now">{{ section.settings.cta-button }}</a>
      </div>
    {% endfor %}
  </div>
</div>

3. CSS Styling

The CSS styles ensure that the section is visually appealing and responsive. The product grid uses CSS Grid to arrange the cards, and hover effects are added for interactivity. Here’s a snippet of the CSS:

#adidas-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
  font-family: Arial, sans-serif;
  background-color: #fff;
}

#adidas-section .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

#adidas-section .product-card {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

#adidas-section .product-card:hover {
  transform: translateY(-5px);
}

4. JavaScript Functionality

To enable the image rotation feature, we use JavaScript. The script listens for the DOM content to load and then initializes the image swapping for each product card based on the specified interval. Here’s the JavaScript code:

function initializeProductCards() {
  const productCards = document.querySelectorAll('.image-container');
  productCards.forEach((card) => {
    const imagesArray = [
      card.getAttribute('data-first'),
      card.getAttribute('data-second'),
      card.getAttribute('data-third'),
      card.getAttribute('data-fourth')
    ].filter(Boolean);

    let currentImageIndex = 0;
    const interval = card.getAttribute('data-interval');

    setInterval(() => {
      card.style.backgroundImage = `url(${imagesArray[currentImageIndex]})`;
      currentImageIndex = (currentImageIndex + 1) % imagesArray.length;
    }, interval);
  });
}

document.addEventListener("DOMContentLoaded", initializeProductCards);

5. Customization Options

In the Shopify admin, you can customize the section settings, including the button text and image links. This flexibility allows you to tailor the section to fit your brand's style and product offerings.

Conclusion

Creating a dynamic product showcase like the Adidas section can significantly enhance your Shopify store's visual appeal and user engagement. By following the steps outlined in this post, you can implement a similar feature in your own store, providing customers with an interactive and visually appealing shopping experience. Happy coding!