How to display product sizes on a collection page in Showcase Theme?

Store Design
, ,
1

How can enable and show product sizes on the collection-page for the Showcase Theme?
Link to the collection-page: https://nordq.dk/collections/name-it-baby

Thanks,

2

Hi Laursen,

If there is no option in your theme settings, you will have to add some custom code.

If “Size” is the only variant option for your products, it could be as simple as adding something like the following to each Product Item:


{% for variant in product.variants %}
  {{ variant.title }}
{% endfor %}

You would need to apply some CSS as well to style the elements. You could also add conditional styles such as a strikethrough if the variant is out of stock by checking the variant.available property.

The exact solution you need will really depend on the final result you are trying to achieve and how your products are set up.

3

Hi John,
Thanks for your quick reply. Check attached image. I need something exactly like this size swatch for each product on the collection-page. The store is already showing color swatches.

CleanShot 2023-07-11 at 10.42.28.png
CleanShot 2023-07-11 at 10.42.28.png792×845 129 KB

4

I think you are using a paid theme so I can’t check the actual code for you without access to your store.

In the code editor, you would need to find the file that has the code for the individual product grid items on the collection pages.

If you plan on doing any updates to the code yourself, I recommend duplicating your theme and making changes in a test theme first. Just in case something unexpected happens.

I would put the following code right inside the

element.

This should display all the available sizes:


  {% for variant in product.variants %}
    {% if variant.available %}
      {{ variant.title }}
    {% else %}
      {{ variant.title }}
    {% endif %
  {% endfor %}

Sizes that are sold out will be crossed out.

You would also need to add some custom CSS:

.product-item__sizes {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 5px 3px;
  margin-bottom: 5px;
}

.product-item__sizes span {
  border: 1px solid #000;
  padding: 2px;
  min-width: 35px;
  text-align: center;
  line-height: 1.5;
}

That should give you something like this:

sizes.png
sizes.png598×842 122 KB

I hope that helps to get you started!

One thing to note:
This would apply to every product in your store.
If you had products with variant options other than “size”, such as “colour”; they will show the full variant title. For example: “XS / Orange”

Your solution in that case would be more complicated.
If you are not comfortable with editing liquid code yourself I would look at hiring a developer to handle that.

5

Thanks! But i got this error:

“Liquid syntax error (line 374): ‘for’ tag was never closed”

6

That means you are missing

{% endfor %}

at the end.

The structure should look like:

{% for variant in product.variants %}
    // some code goes here...
{% endfor %}