How to get sizes to appear on product cards

Store Design
, , ,
1

Hi! I’m trying to get the size of each product to show up in the product card so that it’s visible from outside the product page. The store I’m working on right now only has one size for everything so it’s important information (on the level of, e.g., price) that I would want the customer to know before clicking through.

Right now for the product pages I have the variant picker for size in order to display the size, and will use CSS to disable the button and style it as if its plain text. This isn’t an ideal solution so if anyone has any suggestions on how to get the size of the product to appear as text on the page without creating a metafield and manually inputting the size for each product, I’m all ears.

What I’m more interested in though, is finding a way to get the size/variant picker to appear on the collection page. According to product-variant-picker.liquid, this should make it possible to use it:

{% render 'product-variant-picker',
                  product: product,
                  block: block,
                  product_form_id: product_form_id,
                  update_url: false
                %}

But when I put that into card-product.liquid like so:

...
<div class="card-information">
               {% render 'product-variant-picker',
                  product: product,
                  block: block,
                  product_form_id: product_form_id,
                  update_url: false
                %}
              

            {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %} 
...

Nothing appears. If I change “product: product” to “product: card_product” (as seen in the price block), it produces empty drop-down menus like so:

Screenshot 2024-01-10 at 3.50.11 PM.png
Screenshot 2024-01-10 at 3.50.11 PM.png3120×430 10.8 KB

The fields do correspond to the product pages they came from, but why isn’t the information rendering? And how can I get it to appear as “Pills”? Or am I going about this the wrong way and there’s another way to get this to appear as plain text?

Thank you for your help! Happy to provide more info as needed.

2

Since nobody responded I thought I would post the answer I found here in case anyone in the future needs help. If you check the liquid documentation, the answer is actually quite straightforward. You just call the variant title object in your product card. Here’s my code:

Size {{ card_product.variants.first.title }}

NOTE: This is only if each product has a unique size. If you have more than one size, it is another process entirely. You should find plenty of tutorials for that online, though.

3

If there are multiple sizes available there is a really easy solution too. I will use t-shirts for my example using the Dawn template.

  1. On the product in Shopify add a category to your product of type t-shirt.
  2. Scroll down to the categories meta field and input all of your sizes into the sizes input field.
  3. Save
  4. Go to the your template and click the three dots then select edit code.
  5. Find the card-product.liquid file
  6. locate where you want to put your sizes and insert the code below (alter it as needed for you use case).

 Sizes:         
  {% for shirtSize in card_product.metafields.shopify.size.value %}
   {%- if forloop.length > 0 -%} 
     {{ shirtSize.label }}{% unless forloop.last %},{% endunless -%}
   {%- endif -%}
  {% endfor %}

 ​

Save your liquid file and test.