Redesign Shopify Collection Product Cards

A collection page is a staple of every e-commerce store. In this guide, we are going to try and spruce things up a bit from the vanilla, default product card that makes up the collection page. I am working from the Dawn theme, but you should be able to apply this code to any theme given you use the same sections and snippets that may have different file names.

Code: https://github.com/ndrishinski/blogs/commit/7b0a430d65a3621e2bb78a620cae65fe08f42ca6

Inspiration: https://codepen.io/kristen17/pen/pomgrKp

Prefer Video?

Enjoy, otherwise read on!

Import Dependencies

First, we are going to import the Material Icons library so that our button can have the arrow. To do this, simply open theme.liquid and paste the following link inbetween the opening and closing <head> tags:

<head>
  ...
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
  ...
</head>

Add Icon to HTML

Now we are going to open the product card snippet that is rendering every product for a given collection. In the Dawn theme, we are looking for ‘card__media’ class because this is where the image is rendered. Immediately following the image and the closing div, we want to paste the following code:

              <img
              ...
           {%- endif -%}
            </div>
            <!-- Add this div below -->
            <div class="icon">
              <a href="" class="iconBox"><span class="material-symbols-outlined">arrow_outward</span></a>
            </div>
            <!-- Add this div above -->
          </div>

The important thing to note are the class names here, icon and iconBox. We will be targeting these in our CSS shortly. We also need to add one more class name to this file. Up above in this file we have a div with the class name ‘card-wrapper’. We are going to add a unique class to this div so that in our CSS we can specify that we only want to target elements within this container, so that we don’t conflict with any global style settings. Once you find the parent div, we will change the tag like so:

Before:
<div class="card-wrapper product-card-wrapper underline-links-hover">
After:
<div class="card-wrapper product-card-wrapper underline-links-hover unique-container-class">

Add CSS

Now we have almost everything in place. We can now open up our global styles, which in Dawn is called base.css. At the very bottom we can paste the following code:

.custom-section-selector {
  background: #F1EAFF;
}

.card__media {
  background: #F1EAFF;
}

.card__media img {
  border-radius: 7px;
}

.unique-container-class .icon {
  position: absolute;
  bottom: -0.375rem;
  right: -0.375rem;
  width: 6rem;
  height: 6rem;
  background: var(--clr);
  border-top-left-radius: 50%;
  background: #F1EAFF;
}

.unique-container-class .icon:hover .iconBox:hover {
  transform: scale(1.1) !important;
}

.unique-container-class .icon::before {
  position: absolute;
  content: "";
  bottom: 0.375rem;
  left: -1.25rem;
  background: transparent;
  width: 1.25rem;
  height: 1.25rem;
  border-bottom-right-radius: 1.25rem;
  box-shadow: 0.313rem 0.313rem 0 0.313rem #F1EAFF;
  text-decoration: none;
}

.unique-container-class .icon::after {
  position: absolute;
  content: "";
  top: -1.25rem;
  right: 0.375rem;
  background: transparent;
  width: 1.25rem;
  height: 1.25rem;
  border-bottom-right-radius: 1.25rem;
  box-shadow: 0.313rem 0.313rem 0 0.313rem #F1EAFF;
  text-decoration: none;
}

.unique-container-class .icon .iconBox {
  position: absolute;
  inset: 0.625rem;
  background: #D0A2F7;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
  text-decoration: none !important;
  text-decoration-color: #282828 !important;
}

.unique-container-class .icon .iconBox span {
  color: #fff;
  font-size: 1.5rem;
}

If you save and refresh you should see an almost finished looking product card. Now you can change the colors in the above CSS to achieve the look that matches your color palette but you may also want to change the background of the section entirely. In my case, Dawn’s background is white and the product photos are white so you really can’t see nice curved button like I’d like to. So if we open main-collection-product-grid.liquid we can make one small change to help us. Scroll down the the {% schema %} and underneath “name” add “class”: “custom-section-selector” like so:

{% schema %}
{
  "name": "t:sections.main-collection-product-grid.name",
  "class": "custom-section-selector",
  "settings": [

This line adds a class name of ‘custom-section-selector’ to the section container, so in our CSS we have already defined a style to change the background.

Conclusion

Now if we save our files and refresh our preview, we should have a beautiful and appealing product card that makes our collection page pop a bit more. You can also optimize the button to grow and shrink on hover or change the hyperlink to add the product to card. I hope you’ve enjoyed this tutorial and stay tuned for more Shopify related content.