How can I enable variant selection on a product grid?

Shopify Discussion
1

I want to show the option to select a variant and add to cart button on the product grid item so that product can be added to cart without going to the product page, I have managed to add the quantity selector and add-to-cart button on the product grid item but I can’t get the variant picker functionality to work. Can someone help me with the code? Right now my variant picker on product grid item does nothing, no matter what variant I pick, the default variant price shows and gets added to cart

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

{% unless image_size %}
  {%- assign image_size = '600x600' -%}
{% endunless %}

{% unless current_collection %}
  {% assign current_collection = collection %}
{% 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 %}

  
    

      

        {% if sold_out %}
          
{{ 'products.product.sold_out' | t }}

        {% endif %}

        {% if product.featured_image %}
          {%- assign image = product.featured_image -%}
          {%- assign max_width = width | plus: 0 -%}
          {%- assign max_height = height | plus: 0 -%}

          {%- include 'image-logic' with width: max_width, height: max_height -%}

          {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
          
            

              {% endcomment %}>
            

          

          

        {% else %}
        {% capture current %}{% cycle 1, 2, 3, 4 %}{% endcapture %}
        
        {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        

      {% endif %}
      

    

    

{{ product.title }}

    
      
        {% if on_sale %}
          {{ "products.general.sale_price" | t }}
        {% else %}
          {{ "products.general.regular_price" | t }}
        {% endif %}
        {% include 'price' with product.price %}
        {% if on_sale and section.settings.product_show_compare_at_price %}
          <small>
            <s>
              {{ "products.general.regular_price" | t }}
              {% include 'price' with product.compare_at_price %}
            </s>
          </small>
        {% endif %}
      

      {%- if product.selected_or_first_available_variant.available and product.selected_or_first_available_variant.unit_price_measurement -%}
        {% include 'product-unit-price', variant: product.selected_or_first_available_variant %}
      {%- endif -%}
      
      
      
    

    {% if on_sale and section.settings.product_show_saved_amount %}
      
        {% assign compare_price = product.compare_at_price %}
        {% assign product_price = product.price %}
        {% include 'price-sale' %}
      

    {% endif %}

    {% if section.settings.product_reviews_enable %}
      
    {% endif %}
2

@Ashwini ,

Which theme are you using? You would need to update the select call back or equivalent function in your js file

3

I am using supply theme. Can you please explain your solution in detail

4

If you can check if in your theme.js following code is added under _updateCart function

if(variant){
for (var i=0,length=variant.options.length; i

If it doesnt solve, someone will need to login and debug to find the source of issue
5

@Propero Thank you for helping me over communication

6

Were you able to figure it out?

I have same issue