DIY Shopify

DIY Shopify Customization: Display Product Sizes in Stylish Boxes in the Dawn Theme

/ E-commerce, Web Design & Development / By

Shopify Dawn Theme v15.2.0 – Tested on 2/18/2025

In this tutorial, I’ll share how I displayed available product sizes on the product grid of a new Dawn theme for Shopify using custom Liquid and CSS code.

It looks like this…

… and it will look like this everywhere on your site displaying products. If you have a different goal you’ll need to find what file the code goes in.

If you found your solution, let’s continue…

Special shout-out to Woods & Waters Gear Exchange in Brunswick, ME for the inspiration. May everyone everywhere benefit.

And full transparency, this was a collaboration between man and machine. ChatGPTs o3-mini-high was key with general troubleshooting and code writing, and I guided the process by knowing Shopify Themes and developing websites for 30 years.

Why Display Product Sizes More Prominently?

Showing product sizes right on your collection pages can:

  • Enhance User Experience: Customers see available sizes immediately.
  • Boost Conversions: Clear product details help shoppers decide faster.
  • Improve Aesthetics: Custom styling sets your store apart.

Displaying your sizes is not always appropriate, or necessary in many cases, but when you want to try this solution was visually clean and easy to implement.

Ok, let’s do it…

Step 1: Adding the Liquid Code

To edit your Dawn Theme, go to Online Store>Themes and click on the three dots. Choose “Edit Code”.

When you get to the code area, search for and edit card-product.liquid snippet and paste the following code where you want the size boxes to appear. For this example, I placed it before the price block. My code went on line 207 with a fresh unchanged Dawn theme.

<!-- BEGIN SIZES DISPLAY EVERYWHERE BUT PRODUCT PAGE -->

{% assign size_index = false %}
{% for option in card_product.options %}
  {% assign normalized_option = option | strip | downcase %}
  {% if normalized_option == "size" %}
    {% assign size_index = forloop.index0 %}
    {% break %}
  {% endif %}
{% endfor %}

{% if size_index != false %}
  {% assign sizes_str = "" %}
  {% for variant in card_product.variants %}
    {% assign size_val = variant.options[size_index] %}
    {% if sizes_str == "" %}
      {% assign sizes_str = size_val %}
    {% elsif sizes_str contains size_val %}
      {% comment %} already added {% endcomment %}
    {% else %}
      {% assign sizes_str = sizes_str | append: "|" | append: size_val %}
    {% endif %}
  {% endfor %}
  {% assign sizes_array = sizes_str | split: "|" %}
  <div class="card-product__sizes">
    {% for size in sizes_array %}
      <span class="card-product__size-box">{{ size }}</span>
    {% endfor %}
  </div>
{% endif %}

<!-- END SIZES DISPLAY EVERYWHERE BUT PRODUCT PAGE -->

What Does This Code Do?

  • Identifies the “Size” Option:
    It loops through your product’s options (normalizing them to lowercase) to find the index for “size.”
  • Builds a Unique List of Sizes:
    It loops over all variants, collecting unique size values and concatenating them into a string using a delimiter.
  • Outputs the Size Boxes:
    The code splits the string into an array and outputs each unique size inside its own <span> element.
  • Places these Size options everywhere
    This code technique places the available Size options everywhere but the product page.

Step 2: Adding the CSS

To style the size boxes with a white background and black border, add the following CSS to base.css in your Assets folder, or if you are customizing this to another theme find whatever your main CSS file is. I put it at the bottom.

<!-- SIZES DISPLAY EVERYWHERE BUT PRODUCT PAGE -->
.card-product__sizes {
  margin-top: 8px;
}

.card-product__size-box {
  display: inline-block;
  font-size: 14px;
  color: #333;
  background-color: #fff;
  padding: 4px 8px;
  margin-right: 4px;
  margin-bottom: 4px;
  border: 1px solid #000;
  border-radius: 4px;
}

CSS Explained

  • .card-product__sizes:
    Adds a top margin to separate the size boxes from other product details.
  • .card-product__size-box:
    Styles each box with a white background, black border, padding, and a bit of margin. The border-radius gives a subtle rounded corner look.

Final Thoughts

By following these steps, you now have a customized product grid that displays all available sizes in stylish boxes.

Feel free to adjust the CSS to match your brand’s style. And don’t forget to document your change so if you have to reinstall your theme or something goes wrong during an upgrade you can easily put it back in.

Keywords: Shopify customization, DIY Shopify, Shopify Dawn Theme, display product sizes, product grid customization, Shopify Liquid tutorial

Happy Customizing!

If you need help with things like this, let’s talk!

Related Posts