How to show size variants on collection page in Brooklyn theme

[nadandnady]

Can someone please help me to display size variants on the collection page in Brooklyn theme.

[Hilary]

Hi, @nadandnady! 

Welcome to the Shopify Community. While any coding solutions are outside of my scope of support, I'd be happy to recommend some app options to display variants on your collection page in case you haven't already seen them. Here are a couple: 

• Variable Products & Variants
• Variants on Collection Page

There is also a previous topic in the Community that has some coding solutions for different themes that you could test out if you're comfortable with editing the theme code yourself. Otherwise, hopefully another Community user can assist you with the coding required to achieve this! Lastly, you can always hire a Shopify Expert if you prefer this option over an app. 

Let us know how this goes!

[KetanKumar]

@nadandnady 

sorry for that issue 

can you please update product-grid-item below code

<!-- /snippets/product-grid-item.liquid -->
{% comment %}

  This snippet is used to showcase each product during the loop,
  'for product in collection.products' in collection.liquid.

  A liquid variable (grid_item_width) is set just before the this
  snippet is included to change the size of the container.
  Once the variable is set on a page, all future instances of this
  snippet will use that width. Overwrite the variable to adjust this.

  Example
    - assign grid_item_width = 'large--one-quarter medium--one-half'

{% endcomment %}

{% unless grid_item_width %}
  {% assign grid_item_width = 'large--one-third medium--one-half' %}
{% endunless %}

{% unless width %}
  {%- assign width = 310 -%}
{% endunless %}
{% unless height %}
  {%- assign height = 415 -%}
{% endunless %}

{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
  {% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% if product.available %}
  {% assign sold_out = false %}
{% endif %}

{%- assign variant = product.selected_or_first_available_variant -%}

{% capture img_id_class %}ProductImage-{{ product.featured_media.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_media.id }}{% endcapture %}
{%- assign featured_image = product.featured_media.preview_image %}
{%- assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

<div class="grid__item grid-product {{ grid_item_width }}{% if sold_out %} is-sold-out{% endif %}">
  <div class="grid-product__wrapper">
    <div class="grid-product__image-wrapper">
      <a class="grid-product__image-link{% unless featured_image.src== blank %} grid-product__image-link--loading{% endunless %}" href="{{ product.url }}" data-image-link>
        {% if featured_image.src== blank %}
          <img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
        {% else %}
          {% include 'image-style' with image: featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %}
          <div id="{{ img_wrapper_id }}" class="product--wrapper">
            <div style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100 }}%;">
              <img class="product--image lazyload {{ img_id_class }}"
                   data-src="{{ img_url }}"
                   data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ featured_image.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ featured_image.alt | escape }}"
                   data-image>
            </div>
          </div>
          <noscript>
            <img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
          </noscript>
        {% endif %}
      </a>
      {% if sold_out %}
        <div class="grid-product__sold-out">
          <p>{{ 'products.product.sold_out_html' | t }}</p>
    </div>
      {% elsif on_sale %}
        <div class="grid-product__on-sale">
          {% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}
          <p>{{ 'products.general.save_html' | t: saved_amount: saved_amount }}</p>
        </div>
      {% endif %}
    </div>
    
    
    <form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  
  <input type="submit" value="IN DEN WARENKORB" class="btn" />
</form>

    <a href="{{ product.url }}" class="grid-product__meta">
      <span class="grid-product__title">{{ product.title }}</span>
      <span class="grid-product__price-wrap">
       {% comment %} <span class="long-dash">—</span>{% endcomment %}
        <span class="grid-product__price">
          {% if on_sale %}
            <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
          {% else %}
             <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
          {% endif %}
          
          
          
          
          {% if product.price_varies %}
            {{ product.price_min | money_without_trailing_zeros }}
            <span class="icon-fallback-text">
              <span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
              <span class="fallback-text">+</span>
            </span>
          {% else %}
            {{ product.price | money_without_trailing_zeros }}
          {% endif %}
        </span>

        {%- if product.price_varies == false and variant.unit_price_measurement -%}
          {%- capture unit_price_separator -%}
            <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
          {%- endcapture -%}

          {%- capture unit_price_base_unit -%}
            <span>
              {%- if variant.unit_price_measurement.reference_value != 1 -%}
                {{- variant.unit_price_measurement.reference_value -}}
              {%- endif -%}
              {{ variant.unit_price_measurement.reference_unit }}
            </span>
          {%- endcapture -%}
          <span class="product-unit-price">
            <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
            <span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
          </span>
        {%- endif -%}
      </span>
      {% if section.settings.product_vendor_enable %}
        <p class="grid-product__vendor">{{ product.vendor }}</p>
      {% endif %}
    </a>
    
    
    {% assign variantCount = product.variants | size %}
{% if product.available and variantCount > 0 %}
<div class="product-grid-options-size">
{% for option in product.options %}
{% assign is_size = false %}
{% assign downcased_option = option | downcase %}

{% if downcased_option contains 'size' %}
{% assign option_index = forloop.index0 %}
{% assign option_count = 0 %}
{% assign values = '' %}

{% for variant in product.variants %}
{% assign value = variant.options[option_index] %}
{% unless values contains value %}

{% if option_count > 0 %}
{% assign values = values | join: '|' | append: '|' %}
{% endif %}
{% assign values = values | append: value %}
{% assign values = values | split: '|' | sort %}
{% assign option_count = values | size %}

{% if variant.available %}
{% if option_count <= 6 %}
<div class="altli {% unless variant.available %}soldout{% endunless %}">
<a title="{{value}}" href="{{ product.url}}?variant={{ variant.id }}">
{{ value }}
</a>
{% assign option_count = option_count | plus : 1 %}
</div>
{% endif %}
{% endif %}

{% endunless %}
{% endfor %}

{% if values.size >= 6 %}
<div class="altli">
<a title="More" href="{{ product.url}}">...</a>
</div>
{% endif %}

{% endif %}


{% endfor %}
</div>
{% endif %}
    
</div>
</div>

[Mark118]

Hi KetanKumar, would code work to display the sizes on the Impulse theme? Many thanks