How can I add variant selectors to my product grid on Accu theme?

Store Design
1

Hello,

I am using a theme called accu, and there is a product grid for example on the home page for quick buying.

The problem is these quick buy items in the grid don’t show a selector for the variant so its basically useless… Now I wanted to add it by just copying the code of the variant selector from the real product page to the grid, but if I select another variant it still uses the basic one when I click buy…

The code i copied from the product page was this one…

{% assign variant = product.selected_or_first_available_variant %}

{% form ‘product’, product, id: “AddToCartForm”, class: “product-form” %}
{% assign hide_default_title = false %}
{% if product.variants.size == 1 and product.variants.first.title contains ‘Default’ %}
{% assign hide_default_title = true %}
{% endif %}

{% if settings.enable_color_swatch %} {% for option in product.options %} {% include 'swatch' with option %} {% endfor %} {% endif %}

and the code for the add to cart button on the grid is this:

{% if settings.enable_add_cart %}

  • {% if product.available %} {{ 'products.product.add_to_cart' | t }}

    {% endif %}

    • {% endif %}

    Would really appreciate any help.

    2

    Hi @CreaWeb

    Please try replacing the default code snippet which you provided with the following:

    {% if settings.enable_add_cart %}
- {% if product.available %}

  {% endif %}

{% endif %}

    The above code will display variants in a drop down with their individual price.

    I hope this will solve your issue.

    Thanks,

    Suman Saurabh

    3

    Thanks very much SumanSaurabh,

    I used your code and it works perfect with a few adjustments.

    Is it possible to also change the image according to the selected variant?

    I think the code for the image is this one, I already tried to put the "product.selected_or_first_available_variant. " instead of only product. before the image.src but it doesnt work.

    
      {% if settings.secondary_image_use %}
      
      {% if product.images.size > 1 %}
       
              
          
        
        
      
 
      
      {% else %}
      
      
      {% endif %}
      
      {% else %}
            

      {% endif %}
    4

    Hi @CreaWeb ,

    This requires a custom solution that requires to add some javascript and edits of more than one places. The solution can be determined after visiting your website only.

    Thanks!