I was wondering if anyone had any solutions or suggestions for an issue I’ve encountered with the checkout process on our Shopify store. Currently, when users select quantities and variants for products using our custom collection product grid template and add them to the cart, the checkout process is not reflecting the selected variants and quantities accurately.
To provide context, I’ve implemented a custom design with a button labeled “Add,” which opens a popup for users to select product variants and add quantities. Additionally, I’ve included the Shopify default “Add to Cart” button to allow users to add products to their cart.
However, despite users selecting specific variants and quantities using the custom interface, the checkout process defaults to displaying only one quantity and the default variants, rather than accurately reflecting the user’s selections.
I believe this issue requires further investigation and resolution to ensure a seamless checkout experience for our customers. Any suggestions or solutions would be greatly appreciated.
{% comment %} Custom Product List {% endcomment %}
<li class="grid__item custom-chai-cap-grid">
<h2>{{ product.title }}</h2>
<div class="product-details_chai_cap {% unless section.settings.show_rating %} no-rating{% endunless %}">
{% render 'card-product', card_product: product, show_rating: section.settings.show_rating %}
<p>{{ product.metafields.custom.custom_product_tagline }}</p>
</div>
<div class="product-images-slider">
{% for image in product.images %}
<div class="product-image-slide">
<img
src="{{ image.src | img_url: 'medium' }}"
alt="{{ image.alt | escape }}"
width=""
height=""
>
</div>
{% endfor %}
</div>
<div class="chai-cap-product-description">
<p>{{ product.description }}</p>
</div>
<div class="Product_details_with_chime_price">
<p>{{ product.price | money }}</p>
<button
class="quick-add-btn trigger"
data-modal-id="modal-{{ product.id }}"
data-product-id="{{ product.id }}"
>
Add
</button>
<div class="modal" id="modal-{{ product.id }}">
<div class="custom_modal_wrapper_chime">
<div class="modal-content">
<div class="popup_modal_btn close-button">
<svg
width="10"
height="11"
viewBox="0 0 10 11"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M9.49001 9.75124L1 1" stroke="#414042" stroke-width="0.75" stroke-miterlimit="10" />
<path d="M1 9.75124L9.49001 1" stroke="#414042" stroke-width="0.75" stroke-miterlimit="10" />
</svg>
</div>
<div class="Modal_header_content">
<h1>{{ product.title }}</h1>
<p>Symphony</p>
</div>
<div class="modal_main_content">
{%- unless product.has_only_default_variant -%}
<variant-radios>
{%- assign cap_size_present = false -%}
{%- assign pack_size_present = false -%}
{%- assign delivery_frequency_present = false -%}
{%- for option in product.options_with_values -%}
{%- if option.name == 'Cap Size' -%}
{%- assign cap_size_present = true -%}
{%- elsif option.name == 'Pack Size' -%}
{%- assign pack_size_present = true -%}
{%- elsif option.name == 'Choose your delivery frequency' -%}
{%- assign delivery_frequency_present = true -%}
{%- endif -%}
{%- endfor -%}
{%- if cap_size_present and pack_size_present -%}
<div class="wrapper_radio_selection">
<legend class="form__label">Choose your ‘Cap size’ and ‘Pack size’</legend>
<div class="inner_wrapper_content cst_wrap_blck">
{%- endif -%}
{%- for option in product.options_with_values -%}
{%- if option.name == 'Cap Size' or option.name == 'Pack Size' -%}
<fieldset class="js product-form__input chai_cap_popup_cnts">
<div class="cst_form_lable">
<legend class="form__label">{{ option.name }}</legend>
</div>
<div class="chai_caps_variant_options">
{%- for value in option.values -%}
<input
type="radio"
id="option_{{ option.name | handleize }}_{{ value | handleize }}"
name="option_{{ option.name | handleize }}"
value="{{ value }}"
>
<label for="option_{{ option.name | handleize }}_{{ value | handleize }}">
{{- value -}}
</label>
{%- endfor -%}
</div>
</fieldset>
{%- endif -%}
{%- endfor -%}
{%- if cap_size_present and pack_size_present -%}
</div>
</div>
{%- endif -%}
{%- if delivery_frequency_present -%}
<div class="wrapper_radio_selection">
<div class="inner_wrapper_content lst_div">
{%- endif -%}
{%- for option in product.options_with_values -%}
{%- if option.name == 'Choose your delivery frequency' -%}
<fieldset class="js product-form__input">
<div class="cst_form_lable">
<legend class="form__label">{{ option.name }}</legend>
</div>
<div class="chai_caps_variant_options">
{%- for value in option.values -%}
<input
type="radio"
id="option_{{ option.name | handleize }}_{{ value | handleize }}"
name="option_{{ option.name | handleize }}"
value="{{ value }}"
>
<label for="option_{{ option.name | handleize }}_{{ value | handleize }}">
{{- value -}}
</label>
{%- endfor -%}
</div>
</fieldset>
{%- endif -%}
{%- endfor -%}
{%- if delivery_frequency_present -%}
</div>
</div>
{%- endif -%}
<script script id="variants" type="application/json">
{{ product.variants | json }}
</script>
<script>
var variantsArray = JSON.parse(document.getElementById('variants').text);
console.log(variantsArray);
</script>
</variant-radios>
{%- endunless -%}
<div class="Model_bottom_cnt">
<div
id="Quantity-Form-{{ section.id }}"
class="product-form__input product-form__quantity{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} product-form__quantity-top{% endif %}"
{{ block.shopify_attributes }}
>
{% # theme-check-disable %}
{%- assign cart_qty = cart
| item_count_for_variant: product.selected_or_first_available_variant.id
-%}
{% # theme-check-enable %}
<quantity-input class="quantity">
<button class="quantity__button no-js-hidden" name="minus" type="button">
<span class="visually-hidden">
{{- 'products.product.quantity.decrease' | t: product: product.title | escape -}}
</span>
{% render 'icon-minus' %}
</button>
<input
class="quantity__input"
type="number"
name="quantity"
id="Quantity-{{ section.id }}"
data-cart-quantity="{{ cart_qty }}"
data-min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
{% if product.selected_or_first_available_variant.quantity_rule.max != null %}
data-max="{{ product.selected_or_first_available_variant.quantity_rule.max }}"
max="{{ product.selected_or_first_available_variant.quantity_rule.max }}"
{% endif %}
step="{{ product.selected_or_first_available_variant.quantity_rule.increment }}"
value="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
form="{{ product_form_id }}"
>
<button class="quantity__button no-js-hidden" name="plus" type="button">
<span class="visually-hidden">
{{- 'products.product.quantity.increase' | t: product: product.title | escape -}}
</span>
{% render 'icon-plus' %}
</button>
</quantity-input>
<div class="quantity__rules caption no-js-hidden">
{%- if product.selected_or_first_available_variant.quantity_rule.increment > 1 -%}
<span class="divider">
{{-
'products.product.quantity.multiples_of'
| t:
quantity: product.selected_or_first_available_variant.quantity_rule.increment
-}}
</span>
{%- endif -%}
{%- if product.selected_or_first_available_variant.quantity_rule.min > 1 -%}
<span class="divider">
{{-
'products.product.quantity.minimum_of'
| t: quantity: product.selected_or_first_available_variant.quantity_rule.min
-}}
</span>
{%- endif -%}
{%- if product.selected_or_first_available_variant.quantity_rule.max != null -%}
<span class="divider">
{{-
'products.product.quantity.maximum_of'
| t: quantity: product.selected_or_first_available_variant.quantity_rule.max
-}}
</span>
{%- endif -%}
</div>
</div>
<p>{{ product.price | money }}</p>
{%- assign product_form_id = 'product-form-' | append: section.id -%}
<div {{ block.shopify_attributes }}>
{%- assign product_form_installment_id = 'product-form-installment-'
| append: section.id
-%}
{%- form 'product',
product,
id: product_form_installment_id,
class: 'installment caption-large',
data-loop-product-id: product.id
-%}
{% assign template_exists = false %}
{% capture template_content %}
{% render 'loop-subscriptions', type: 'product-widget', product: product %}
{% endcapture %}
{% if template_content contains 'Rendering loop-subscriptions' %}
{% assign template_exists = true %}
{% endif %}
{% if template_exists %}
{% render 'loop-subscriptions', type: 'product-widget', product: product %}
{% endif %}
<input
type="hidden"
name="id"
value="{{ product.selected_or_first_available_variant.id }}"
>
{{ form | payment_terms }}
{%- render 'buy-buttons',
block: block,
product: product,
product_form_id: product_form_id,
section_id: section.id,
show_pickup_availability: true
-%}
{%- endform -%}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
{% comment %} Custom Product List {% endcomment %}
Thanks in advance,
Mentos