How to display product variants on collection if card_product.variants.size is more than 1?

Shopify Discussion
1

Hello,

I want to show variants on collection if card_product.variants.size > 1 how can i show it?? below is my card-product code, Please help!!!

Show More 
{% if template == 'collection' %}
### {{ card_product.title | escape }} 
{% endif %}
{%- if card_product.featured_media -%}

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %} {% comment %}theme-check-enable ImgLazyLoading{% endcomment %} {%- if card_product.media[1] != null 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 template == 'collection' %}{{ card_product.description }}
Go to pricing
{% else %}{%- 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: '', show_compare_at_price: true %} {%- if card_product.quantity_price_breaks_configured? -%}{{ 'products.product.volume_pricing.note' | t }}
{%- endif -%}
{% endif %}
{%- if show_quick_add -%}{%- liquid assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id assign qty_rules = false if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1 assign qty_rules = true endif -%} {%- if card_product.variants.size > 1 or qty_rules -%} {%- else -%} {%- endif -%}
{%- 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 -%}

{%- else -%} {%- liquid assign ratio = 1 if media_aspect_ratio == 'portrait' assign ratio = 0.8 endif -%}

{%- if placeholder_image -%} {{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }} {%- else -%} {{ 'product-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }} {% endif %}

### {{ 'onboarding.product_title' | t }} {%- if show_vendor -%} {{ 'accessibility.vendor' | t }}
{{ 'products.product.vendor' | t }}
{%- endif -%} {% render 'price', show_compare_at_price: true %}

{%- endif -%} ```
2

Try This Code Replace Your Code

Show More 
{% if template == 'collection' %}
### {{ card_product.title | escape }} 
{% endif %}
{%- if card_product.featured_media -%}

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %} {% comment %}theme-check-enable ImgLazyLoading{% endcomment %} {%- if card_product.media[1] != null 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 template == 'collection' %}{{ card_product.description }}
Go to pricing
{% else %}{%- if show_vendor -%} {{ 'accessibility.vendor' | t }}
{{ card_product.vendor }}
{%- endif -%} {% if card_product.variants.size > 1 %}{% for variant in card_product.variants %}
{{ variant.title }} - {{ variant.price | money }}
{% endfor %}
{% 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: '', show_compare_at_price: true %} {%- if card_product.quantity_price_breaks_configured? -%}{{ 'products.product.volume_pricing.note' | t }}
{%- endif -%}
{% endif %}
{%- if show_quick_add -%}{%- liquid assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id assign qty_rules = false if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1 assign qty_rules = true endif -%} {%- if card_product.variants.size > 1 or qty_rules -%} {%- else -%} {%- endif -%}
{%- 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 -%}

{%- else -%} {%- liquid assign ratio = 1 if media_aspect_ratio == 'portrait' assign ratio = 0.8 endif -%}

{%- if placeholder_image -%} {{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }} {%- else -%} {{ 'product-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }} {% endif %}

### {{ 'onboarding.product_title' | t }} {%- if show_vendor -%} {{ 'accessibility.vendor' | t }}
{{ 'products.product.vendor' | t }}
{%- endif -%} {% render 'price', show_compare_at_price: true %}

{%- endif -%} ```
1 Like