This article is only for Duplicate Variant method.
Why do we need to handle quick add buttons?
Many Shopify themes include a quick add button on product cards, allowing users to swiftly add products to their cart. When a product has multiple purchase options, this button often changes from "Add to Cart" to "Choose Options," triggering a popup modal.
When using the Duplicate Variant method, our app generates additional purchase options for a product. As a result, if the original quick add button displayed "Add to Cart," it will now show "Choose Options" and open a modal.
Related articles
Maintaining a consistent user experience
For optimal test results, we aim to keep the shopping experience unchanged. To address the above issue, we can modify the theme files to preserve the original quick add behavior.
Steps to follow
Go to Online Store > Themes in your Shopify admin.
Click on Edit code in the more options menu (three dots).
Locate the file responsible for rendering product cards
For example,
card-product.liquid.
Identify the section of code that determines whether the quick add button displays "Add to Cart" or "Choose Options"
Introduce a variable to check if the product originally had only one purchase option
Implement the following logic:
If the first purchase option contains "Default" in the option name, the product originally had only one purchase option.
In this case, prevent the "Choose Options" button from appearing and ensure the "Add to Cart" button remains as it was.
Example code snippet:
{% assign is_single_variant = false %}
{% if card_product.variants.first.title contains "Default" %}
{% assign is_single_variant = true %}
{% endif %}
{%- if is_single_variant == false and card_product.variants.size > 1 or qty_rules -%}
<!-- shows modal -->
This adjustment ensures that products originally having a single purchase option will retain their "Add to Cart" button, avoiding unintended modal popups.
Conclusion
TThe exact code implementation may vary by theme, but the core principle remains the same: if a product originally had only one purchase option, it should not display the "Choose Options" button. Instead, the "Add to Cart" button should remain, ensuring a seamless user experience during testing.