Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
I have the Taste theme and in all my collections sections through the site, I want the 'choose options' button to link and go directly to the product page instead of the pop up coming up.
I'd like to know what code to add/change to make this happen in the Taste theme.
Thanks!
Solved! Go to the solution
This is an accepted solution.
Hello @jkjcreative ,
Follow these steps:
1) Edit Snippet -> card-product.liquid
2) Search for code
<modal-opener data-modal="#QuickAdd-{{ card_product.id }}">
<button
id="{{ product_form_id }}-submit"
type="submit"
name="add"
class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add animate-arrow{% endif %}"
aria-haspopup="dialog"
aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
data-product-url="{{ card_product.url }}"
>
{{ 'products.product.choose_options' | t }}
{%- if horizontal_quick_add -%}
<span class="icon-wrap">{% render 'icon-arrow' %}</span>
{%- endif -%}
{%- render 'loading-spinner' -%}
</button>
</modal-opener>
Replace it with
<modal-opener {% comment %}data-modal="#QuickAdd-{{ card_product.id }}" {% endcomment %}>
<a href="{{ card_product.url }}" style=" text-decoration: none; ">
<button
id="{{ product_form_id }}-submit"
type="submit"
name="add"
class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add animate-arrow{% endif %}"
aria-haspopup="dialog"
aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
data-product-url="{{ card_product.url }}"
>
{{ 'products.product.choose_options' | t }}
{%- if horizontal_quick_add -%}
<span class="icon-wrap">{% render 'icon-arrow' %}</span>
{%- endif -%}
{%- render 'loading-spinner' -%}
</button>
</a>
</modal-opener>
Thanks
This is an accepted solution.
Hello @jkjcreative ,
Follow these steps:
1) Edit Snippet -> card-product.liquid
2) Search for code
<modal-opener data-modal="#QuickAdd-{{ card_product.id }}">
<button
id="{{ product_form_id }}-submit"
type="submit"
name="add"
class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add animate-arrow{% endif %}"
aria-haspopup="dialog"
aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
data-product-url="{{ card_product.url }}"
>
{{ 'products.product.choose_options' | t }}
{%- if horizontal_quick_add -%}
<span class="icon-wrap">{% render 'icon-arrow' %}</span>
{%- endif -%}
{%- render 'loading-spinner' -%}
</button>
</modal-opener>
Replace it with
<modal-opener {% comment %}data-modal="#QuickAdd-{{ card_product.id }}" {% endcomment %}>
<a href="{{ card_product.url }}" style=" text-decoration: none; ">
<button
id="{{ product_form_id }}-submit"
type="submit"
name="add"
class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add animate-arrow{% endif %}"
aria-haspopup="dialog"
aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
data-product-url="{{ card_product.url }}"
>
{{ 'products.product.choose_options' | t }}
{%- if horizontal_quick_add -%}
<span class="icon-wrap">{% render 'icon-arrow' %}</span>
{%- endif -%}
{%- render 'loading-spinner' -%}
</button>
</a>
</modal-opener>
Thanks
Hi Guleria, thank you for responding. I replaced the code, however this error pops up on the choose options button, but the button does go to the product page, just button doesn't say 'choose options' anymore - here's the test site I'm working in https://xca2y0g7wnbbdsij-64232325354.shopifypreview.com :
Here's where I replaced with the new code:
This was the orignal code:
The live site is Maxxherb.com
Hi Guleria, Fixed it! I just took out this line of the new code: {%- render 'loading-spinner' -%}
And it works now! Thank you so much!
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024