Shopify themes, liquid, logos, and UX
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.
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.
I would like it to go the product page, but if not possible without an app, I would live with only showing the names.
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
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>
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.
The code snippet in this thread is missing an opening <div> at the top, which is probably why the layout broke for you.
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 -%}
Hi this needs a custom code which displays boxes.
Thanks
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025