Re: display available size collection list and product grid Dawn

display available size collection list and product grid Dawn

rogerjet
Excursionist
38 0 3

Hi,

I would like to show the size variants below the product image on the collection view and product grid.

 

I have seen a few stores have it but not sure how it is done.

 

view my store swaace.com.au

 

something like the example below.

 

rogerjet_0-1716523021618.png

 

Replies 9 (9)

Liquid_xPert_SJ
Shopify Partner
1334 141 199

Hi @rogerjet

 

Are you only want to show these sizes names on the collection view or you want the functionality which works when you click on it? because most of the stores by clicking add that variant to the cart and some stores takes you to the product page.

 

 

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
- Need THEME UPDATES but have custom codes? No worries, for an affordable price.
rogerjet
Excursionist
38 0 3

I would like it to go the product page, but if not possible without an app, I would live with only showing the names.

Liquid_xPert_SJ
Shopify Partner
1334 141 199

@rogerjet 

 

you can add the below code into your theme files, card-product.liquid which is located in the snippet folder right after the price.

Online Store > Click on the 3 dots beside the Customize button > Edit Code > Snippet > card-product.

 

Thanks

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
- Need THEME UPDATES but have custom codes? No worries, for an affordable price.
rogerjet
Excursionist
38 0 3

Hey @Liquid_xPert_SJ you forgot to insert the code

Multi11
Shopify Partner
5 0 1

This worked for me in card-product.liquid:

 

{% for variant in card_product.variants %}
{%- assign first_option = variant.options.first -%}

{% if first_option != "" %}
{% if variant.available %}
{%- assign available_variants = available_variants | append: '<span class="option">' | append: first_option | append: '</span>' -%}
{% else %}
{%- assign unavailable_variants = unavailable_variants | append: '<span class="option unavailable">' | append: first_option | append: '</span>' -%}
{% endif %}
{% endif %}
{% endfor %}

{{ available_variants }}
{{ unavailable_variants }}
</div>

 

jbags
Shopify Partner
10 0 3

Hi there! I am also trying to get these little size boxes to appear under the product card listing, would you mind pasting the code here pretty please! I tried the code a user left below, but all it did was push everything to the left hand side of the screen.

KoryP
Shopify Partner
5 0 0

The code snippet in this thread is missing an opening <div> at the top, which is probably why the layout broke for you.

I would be happy to be your Shopify Solutions Specialist if you need further assistance. Please "send a message" via my profile page.
KoryP
Shopify Partner
5 0 0

The code snippet in this thread is missing an opening <div> at the top, which is probably why the layout broke for you.

Here's a condensed version that doesn't reorder the out-of-stock items to the end:

{% if card_product.variants.size > 1 %}
  <div class="product_card_variants">
    {%- for product_variant in card_product.variants -%}
      <span class="product_card_variant {% unless product_variant.available %}out-of-stock{% endunless %}">
        {{ product_variant.options.first }}
      </span>
    {%- endfor -%}
  </div>
{%- endif -%}
I would be happy to be your Shopify Solutions Specialist if you need further assistance. Please "send a message" via my profile page.
Liquid_xPert_SJ
Shopify Partner
1334 141 199

@jbags 

Hi this needs a custom code which displays boxes.

 

Thanks

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
- Need THEME UPDATES but have custom codes? No worries, for an affordable price.