Where would I edit the code to show that products with multiple variants are available in different colors or sizes? I would like this to display under the products on the collection pages.
Thanks!
Hi @lisabach
Can you please share your store URL and password, if any?
I will check and provide you with a solution.
Thanks so much! Its kitchenanddiningdirect.com
Hi @lisabach
Please go to your Themes > Edit code > Sections > Open main-collection-product-grid.liquid and
add this line
Available In More Colors And Sizes
into this positon.
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any questions!
Inserting that code in that position makes it appear on the very bottom of every column on the collections page. It is not listed under every product. I would also only like it show on products that have more than one variant. Do you have a solution for this?
Hi @lisabach
Please go to Sections > Open main-collection-product-grid.liquid > Remove the previous code if you haven’t and add this code in this position
(the code must be above the element
{% if product.options_with_values.size > 1 %}
Available In More Colors/Sizes
{% endif %}
Like my screenshot
On my site, it works properly.
If it does not work on your site, please share with me a screenshot of your collection page after you add the code and send me a copy of your main-collection-product-grid.liquid.
Now it is not showing the text anywhere on the collection page, unfortunately.
Here is a screenshot of my main-collection-product-grid.liquid and where I inserted the code.
Hi @lisabach
Can you please share with me some of your products that have more than one variant?
Hi @lisabach
Please help me edit the code like this.
{% if product.options_with_values.size > 0 %}
Available In More Colors/Sizes
{% endif %}
The sentence will show on collection pages when your products have more than one option.
Please let me know if it works 
This is how it is showing up. It seems the problem is the spacing. Which is why it is not showing on some products. Would we be able to add “Available in more colors/sizes” directly under the product title, above the price?
Hi @lisabach
Please go to your Theme > Edit code > Snippets > Open product-card.liquid and add the below code above the line {% render ‘price’, product: product_card_product, price_class: ‘’ %}
{% if product_card_product.options_with_values.size > 0 %}
Available In More Colors/Sizes
{% endif %}
Like my screenshot:
Please let me know if it works!
Unfortunately, that still did not work. It did not display any “More colors/size available” text at all.
Hi @lisabach
Can you please copy the code of this file for me?
product-card.liquid
Sorry for the delayed replay. Would you still be able to help?
Here is the code:
{% comment %}
Renders a product card
Accepts:
- card_product: {Object} Product Liquid object (optional)
- media_aspect_ratio: {String} Size of the product image card. Values are “square” and “portrait”. Default is “square” (optional)
- show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
- show_vendor: {Boolean} Show the product vendor. Default: false
- show_rating: {Boolean} Show the product rating. Default: false
- extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
- lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
Usage:
{% render ‘card-product’, show_vendor: section.settings.show_vendor %}
{% endcomment %}
{{ ‘component-rating.css’ | asset_url | stylesheet_tag }}
{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == ‘portrait’
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == ‘adapt’
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == nil
assign ratio = 1
endif
-%}
{%- if card_product.featured_media -%}
![{{ card_product.featured_media.alt | escape }}]()
{%- endif -%}
{%- if card_product.media[1] != nil and show_secondary_image -%}
<img
srcset=“{%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | img_url: ‘165x’ }} 165w,{%- endif -%}
{%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | img_url: ‘360x’ }} 360w,{%- endif -%}
{%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | img_url: ‘533x’ }} 533w,{%- endif -%}
{%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | img_url: ‘720x’ }} 720w,{%- endif -%}
{%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | img_url: ‘940x’ }} 940w,{%- endif -%}
{%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | img_url: ‘1066x’ }} 1066w,{%- endif -%}
{{ card_product.media[1] | img_url: ‘master’ }} {{ card_product.media[1].width }}w”
src=“{{ card_product.media[1] | img_url: ‘533x’ }}”
sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)”
alt=“{{ card_product.media[1].alt | escape }}”
class=“motion-reduce”
loading=“lazy”
width=“{{ card_product.media[1].width }}”
height=“{{ card_product.media[1].height }}”
{%- endif -%}
{%- if card_product.available == false -%}
{{ 'products.product.sold_out' | t }}
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
{{ 'products.product.on_sale' | t }}
{%- endif -%}
{{ card_product.title | escape }}
{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}
{{ card_product.vendor }}
{%- endif -%}
{{ block.settings.description | escape }}
{%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}
{{ card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max }}
({{ card_product.metafields.reviews.rating_count }}) {{ card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}
{%- endif -%}{% render ‘price’, product: card_product, price_class: ‘’ %}
{%- if card_product.available == false -%}
{{ 'products.product.sold_out' | t }}
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
{{ 'products.product.on_sale' | t }}
{%- endif -%}
{{ 'onboarding.product_title' | t }}
{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}
{{ 'products.product.vendor' | t }}
{%- endif -%}
{% render 'price' %}
Hi @lisabach
I’m sorry for missing your message.
Please help me replace the content of the file that you sent with the following code.
You should back up your theme. You can make a copy of your theme, then try on it first.
{% comment %}
Renders a product card
Accepts:
- card_product: {Object} Product Liquid object (optional)
- media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
- show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
- show_vendor: {Boolean} Show the product vendor. Default: false
- show_rating: {Boolean} Show the product rating. Default: false
- extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
- lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
Usage:
{% render 'card-product', show_vendor: section.settings.show_vendor %}
{% endcomment %}
{{ 'component-rating.css' | asset_url | stylesheet_tag }}
{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == 'portrait'
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == 'adapt'
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == nil
assign ratio = 1
endif
-%}
{%- if card_product.featured_media -%}
{%- if card_product.media[1] != nil and show_secondary_image -%}
{%- endif -%}
{%- endif -%}
###
{{ card_product.title | escape }}
{%- if card_product.available == false -%}
{{ 'products.product.sold_out' | t }}
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
{{ 'products.product.on_sale' | t }}
{%- endif -%}
###
{{ card_product.title | escape }}
{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}
{{ card_product.vendor }}
{%- endif -%}
{{ block.settings.description | escape }}
{%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}
{{ card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max }}
({{ card_product.metafields.reviews.rating_count }})
{{ card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}
{%- endif -%}
{% if card_product.options_with_values.size > 0 %}
Available In More Colors/Sizes
{% endif %}
{% render 'price', product: card_product, price_class: '' %}
{%- if card_product.available == false -%}
{{ 'products.product.sold_out' | t }}
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
{{ 'products.product.on_sale' | t }}
{%- endif -%}
{%- else -%}
###
{{ 'onboarding.product_title' | t }}
###
{{ 'onboarding.product_title' | t }}
{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}
{{ 'products.product.vendor' | t }}
{%- endif -%}
{% render 'price' %}
{%- endif -%}
Let me know if it works!
I replaced with the code above and it did not display any text.
Hi AvadaCommerce, I am also looking to add a ‘more colors’ tag under certain products on my collection product grid. I am using the Minimal theme - would you be able to help me?
Thanks!
Best,
Jo