Need Help: Implementing Size Variants and Cart Functionality Issue on Shopify Theme

Store Design
,
1

I’ve been trying to implement size variants in my Shopify theme, but I’m encountering issues. Currently, when clicking on a size variant, it opens the product page instead of selecting the size. What I actually need is for clicking on a size variant to select it, and then allow customers to add the item to their cart by pressing a button, which should also open the quick cart. If anyone has a solution to this problem, please help me out.

{% 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 %} {%- if request.page_type != 'password' -%}
{%- render 'buy-buttons', product: product, form_id: product_form_id, show_payment_button: block.settings.show_payment_button, atc_button_background: block.settings.atc_button_background, atc_button_text_color: block.settings.atc_button_text_color, payment_button_background: block.settings.payment_button_background, payment_button_text_color: block.settings.payment_button_text_color -%}
{%- endif -%}
2

So you want to be able to add a product to the cart without visiting the product page? In the collection grid I am assuming you can select product sizes and then have quick add button that goes directly to the cart? If that’s the case, I don’t suggest this especially if it’s a product that has sizes because you might want to include size guides that are only accessible in the product page.

3

I understand your concern, but I do want this functionality. I don’t need a size chart; I just want users to be able to select the size and add the product to the cart directly from the collection page.

4

Can you please share you store’s URL?

5

https://nykclothing.com/

6

Even when I select the size and then click the “Add to Cart” button, it adds the default size product instead of the selected size.

7

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

{% endif %} {% endif %}

{% endunless %}
{% endfor %}

{% if values.size >= 6 %}

...
{% endif %}

{% endif %}

{% endfor %}

{% endif %}

{%- if request.page_type != ‘password’ -%}

{%- render 'buy-buttons', product: product, form_id: product_form_id, show_payment_button: block.settings.show_payment_button, atc_button_background: block.settings.atc_button_background, atc_button_text_color: block.settings.atc_button_text_color, payment_button_background: block.settings.payment_button_background, payment_button_text_color: block.settings.payment_button_text_color -%}
{%- endif -%}

this is the latest code i am using for this

8

So in the code you provided you changed the anchor tag from this:

to this

{{ value }}

Can you explain to me why you did that?

Also is the theme you are using a custom theme or is it a shopify theme?