Etsy and Target Inspired Circular Collection Image Links

While surveying two of the largest e-commerce companies in the world, Etsy and Target, I discovered a small but meaningful feature that they both share: a horizontally aligned section with rounded images linking to various collections. This design is not only simple but also elegantly utilizes space, occupying approximately 180 pixels in height while providing a satisfying horizontal scrolling experience. In this tutorial, I will guide you through the process of adding this visually appealing section to your Shopify store.

Code: https://github.com/ndrishinski/blogs/commit/dc454beba90e09606185a6eb83507398761e70e1

Crate our new section file

The first thing we need to do is create a file under the ‘sections’ directory. I am going to call mine ’round-image-collections.liquid’ but you can name it whatever you would like.

Add our CSS and HTML

Now that we have our file created, we can add some code! The first thing I’m going to add in is our styles.

<style>
  #round-image-collections {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }

  #round-image-collections h1 {
    text-align: center;
    font-size: 2rem;
    margin: 2rem 0;
  }

  #round-image-collections .circular-image-links {
    width: 100%;
    background-color: #f3f4f6;
    padding: 2rem 0;
  }

  #round-image-collections .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  #round-image-collections .image-container {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    padding-bottom: 1rem;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    justify-content: center;
    align-items: center;
  }

  #round-image-collections .image-container::-webkit-scrollbar {
    display: none;
    /* WebKit */
  }

  #round-image-collections .image-link {
    flex-shrink: 0;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #round-image-collections .image-wrapper {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
  }

  #round-image-collections .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #round-image-collections .image-link:hover .image-wrapper {
    transform: scale(1.10);
  }

  #round-image-collections .image-link p {
    margin-top: 0.5rem;
    font-size: 14px;
    font-weight: 500;
    color: #4b5563;
    text-align: center;
  }

  #round-image-collections .image-link:hover p {
    color: #111827;
  }

  @media (min-width: 768px) {
    #round-image-collections .image-wrapper {
      width: 160px;
      height: 160px;
    }
  }
</style>

There is nothing in particular I want to point out about this CSS except that I preface all of our CSS selectors with our container ID #round-image-collections. The reason I often do this is to ensure our styles are not affecting global CSS in our theme. We want these styles to stay local.

Now below our CSS we can add in our HTML:

<main id="round-image-collections">
  <h1>{{ section.settings.header}}</h1>
  <div class="circular-image-links">
    <div class="container">
      <div class="image-container">
         {% for block in section.blocks %}
          <a href="/collections/{{ block.settings.collection }}" class="image-link">
            <div class="image-wrapper">
              <img src="{{ block.settings.image | image_url  }}" />
            </div>
            <p>{{ block.settings.text }}</p>
          </a>
         {% endfor %}
      </div>
    </div>
  </div>
</main>

You’ll notice all of our class names match up with our styling above. Within our class “image-container” we have our liquid logic. This liquid is looping through our section blocks that we will create below. Each block will have a link to a collection, an image, and some text to display below!

Create our section schema

Now that our HTML/Liquid and CSS is in place, all we need to do is add some content. To do this we will add some schema settings and blocks in place so our end user can easily update this section via the theme editor.


{% schema %}
{
  "name": "Round Image Collections",
  "settings": [
    {
      "type": "text",
      "id": "header",
      "label": "Header Text",
      "default": "Popular Categories"
    }
  ],
  "blocks": [
    {
      "type": "round-image",
      "name": "Circle Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "text",
          "label": "Text"
        },
        {
          "type": "collection",
          "id": "collection",
          "label": "Collection Link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Round Image Collections"
    }
  ]
}
{% endschema %}

In the theme settings we have one element declared for a text box which will be our section heading.

In the blocks array we have one type of “round-image” where we declare our settings for the image picker, collection link and text to display below. We have no limit or further restrictions so the merchant may add as many of these blocks as they’d like.

We also have a preset defined for our section with a name so we can add it via the theme editor.

Adding data via the theme editor

After saving our section file we can open our theme editor and add some data.

Conclusion

In conclusion, incorporating a rounded image collection section into your Shopify store can significantly enhance the visual appeal and user experience of your site. By following the steps outlined in this tutorial, you can create a sleek and functional design that mirrors the successful strategies of leading e-commerce platforms. This feature not only showcases your products effectively but also encourages customers to explore more of what you have to offer. Happy coding, and may your store thrive with this new addition!

Shopify Development