Creating a Photo Grid Section in Shopify inspired by Nike

One of the ways I get ideas for great features in e-commerce stores is browsing some of the most successful and popular brands. I found a photo grid on Nike’s website that I really liked and decided to build.

In this blog post, we will explore how to create a stunning photo grid in Shopify using Liquid, HTML, and CSS. By following the steps outlined in the code snippet provided, you can easily display your products in a dynamic and responsive grid format that enhances the overall shopping experience.

Code: https://github.com/ndrishinski/blogs/commit/548482abb8e405f4e4fc9d495fb5a3f530f418b3

Prefer video?

Enjoy, otherwise read on!

Create a new section file

The first step is to create a new file. You can name it whatever you would like, but I’ll call it ‘photo-grid.liquid’.

Adding styles

The first thing we’ll add in this file is the styles.

<style>
  #nike-product-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: 100vh;
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
}

#nike-product-grid-container .product-item {
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: white;
    max-height: 520px;
  }
  
  #nike-product-grid-container .product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

#nike-product-grid-container .product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
}

#nike-product-grid-container .product-info {
    position: absolute;
    bottom: 4rem;
    left: 4rem;
    z-index: 10;
}

#nike-product-grid-container .product-title {
    font-size: 24px;
    font-weight: bold;
    /* margin-bottom: 0.5rem; */
    color: white!important;
}

#nike-product-grid-container .shop-now-btn {
    background-color: transparent;
    border: 1px solid white;
    color: white;
    padding: 0.5rem 1rem;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    height: 35px;
    border-radius: 8px;
    /* width: 70px; */
}

#nike-product-grid-container .product-item:hover .product-image {
    transform: scale(1.1);
}

#nike-product-grid-container .product-item:hover .product-overlay {
    opacity: 1;
}

#nike-product-grid-container .product-item:hover .shop-now-btn {
    background-color: white;
    color: black;
}

@media (max-width: 768px) {
  #nike-product-grid-container {
        display: flex;
        flex-direction: column;
    }
    #nike-product-grid-container .product-item {
        width: 100%;
    }
}
</style>

I won’t go into much detail about the styles but the main thing to notice is that we have a responsive design which will break the grid into a stacked column on mobile devices. The main thing I want to point out is the line for ‘object-position’. You can use this to focus you image to the right place. The first number is the distance from the left, and the second is the distance from the top. This will vary depending on the size of your image.

Add our HTML

With our styles in place, we can now add our HTML/Liquid code. We’ll paste this in right below the styles:

<div class="product-grid" id="nike-product-grid-container">
  {% for block in section.blocks %}
    <a href="/collections/{{ block.settings.collection-link }}" class="product-item">
      <img src="{{ block.settings.product-image | image_url }}" alt="Summer Collection" class="product-image first-image" style="object-position: {{ block.settings.object-pos-left }}% {{ block.settings.object-pos-top }}%" >
      <div class="product-overlay"></div>
      <div class="product-info">
          <h3 class="product-title">{{ block.settings.product-title }}</h3>
          <button class="shop-now-btn">Shop</button>
      </div>
  </a>
  {% endfor %}
</div>

In this code we set up our container element and then loop through our section blocks. We will define this block in our schema tags in a moment. But you can see that each block will have a setting for a link to a collection page, an image, and a title. These classes and id’s will match our existing styles above.

We also have some inline styles where we are setting the object-position property based on the settings we choose in the theme editor.

Add our JavaScript

Next we can add our JavaScript below our HTML. We’ll add a <script> tag for simplicity like so:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const buttons = document.querySelectorAll('.shop-now-btn');
    
    buttons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            const productLink = this.closest('.product-item').getAttribute('href');
            window.location.href = productLink;
        });
    });
});
</script>

This is a pretty simple script where we listen for a click on the button to navigate to the collection page. We set up a click event listener after the page has loaded.

Add our section schema

Now our last step is making sure we add our schema so the merchant can add it via the theme editor and customize the text, link and images. Below our script we can add:

{%  schema  %}
{
  "name": "Photo Grid",
  "blocks": [
    {
      "type": "Image",
      "name": "Block Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "product-image",
          "label": "Image Selection"
        },
        {
          "type": "text",
          "id": "product-title",
          "label": "Text"
        },
        {
          "type": "collection",
          "id": "collection-link",
          "label": "Collection to link"
        },
        {
          "type": "number",
          "id": "object-pos-left",
          "label": "Move image from left (%)"
        },
        {
          "type": "number",
          "id": "object-pos-top",
          "label": "Move image from top (%)"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Photo Grid"
    }
  ]
}
{% endschema %}

Here we have a block setting for the image, text, and link. We have also added a preset value so we can add it via the theme editor. If we save our file we should be able to try it out!

Conclusion

In conclusion, implementing a photo grid in your Shopify store not only enhances the aesthetic appeal but also improves user experience by making product navigation seamless. The code we discussed allows for customization, ensuring that your grid reflects your brand’s unique style. By utilizing the power of Liquid and CSS, you can create an interactive and visually striking display that encourages customers to explore your offerings. Start integrating this photo grid into your Shopify store today and watch as it transforms the way your products are showcased!

Shopify Development