How to show size variants on collection page in Brooklyn theme

Store Design
1

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

1 Like
2

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:

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!

3

@nadandnady

sorry for that issue

can you please update product-grid-item below code


{% 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.' -%}

  

    

      
        {% if featured_image.src== blank %}
          
        {% 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 %}
          

            

              
            

          

          
        {% endif %}
      
      {% if sold_out %}
        

          

{{ 'products.product.sold_out_html' | t }}

    

      {% elsif on_sale %}
        
          {% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}
          

{{ 'products.general.save_html' | t: saved_amount: saved_amount }}

        

      {% endif %}
    

    
    
    

    
      {{ product.title }}
      
       {% comment %} —{% endcomment %}
        
          {% if on_sale %}
            {{ 'products.general.sale_price' | t }}
          {% else %}
             {{ 'products.general.regular_price' | t }}
          {% endif %}
          
          
          
          
          {% if product.price_varies %}
            {{ product.price_min | money_without_trailing_zeros }}
            
              
              +
            
          {% else %}
            {{ product.price | money_without_trailing_zeros }}
          {% endif %}
        

        {%- if product.price_varies == false and variant.unit_price_measurement -%}
          {%- capture unit_price_separator -%}
            / {{ 'general.accessibility.unit_price_separator' | t }} 
          {%- endcapture -%}

          {%- capture unit_price_base_unit -%}
            
              {%- if variant.unit_price_measurement.reference_value != 1 -%}
                {{- variant.unit_price_measurement.reference_value -}}
              {%- endif -%}
              {{ variant.unit_price_measurement.reference_unit }}
            
          {%- endcapture -%}
          
            {{ 'products.general.unit_price' | t }}
            {{ variant.unit_price | money }}{{- unit_price_separator -}}{{- unit_price_base_unit -}}
          
        {%- endif -%}
      
      {% if section.settings.product_vendor_enable %}
        

{{ product.vendor }}

      {% endif %}
    
    
    
    {% assign variantCount = product.variants | size %}
{% if product.available and variantCount > 0 %}

{% 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 %}

{{ value }}

{% assign option_count = option_count | plus : 1 %}

{% endif %}
{% endif %}

{% endunless %}
{% endfor %}

{% if values.size >= 6 %}

...

{% endif %}

{% endif %}

{% endfor %}

{% endif %}
1 Like
4

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