Replace "Choose Options" Modal with Link to Product Page

gsb
Visitor
2 0 0

Hi,

I'm building a store and want to change the "Choose Options" modal / popup on the featured product collection to a simple link to the product page... Hoping someone can help 🙂

 

Screenshot 2022-09-20 at 13.02.17.png

Replies 5 (5)

Guleria
Shopify Partner
3104 609 868

Hello @gsb ,

  It's simple but you have to find the template. Once found change it with anchor tag with href {{ product.url }}  

Thanks

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
gsb
Visitor
2 0 0
Thank you. I am not sure where to look in the theme files… My javascript is below basic
kirby561
Visitor
1 0 1

Hey Gsb. I wanted to make this change as well. Find the file "snippets/card-product.liquid" and replace this 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"
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 }}
<div class="loading-overlay__spinner hidden">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</button>
</modal-opener>
<quick-add-modal id="QuickAdd-{{ card_product.id }}" class="quick-add-modal">
<div role="dialog" aria-label="{{ 'products.product.choose_product_options' | t: product_name: card_product.title | escape }}" aria-modal="true" class="quick-add-modal__content global-settings-popup" tabindex="-1">
<button id="ModalClose-{{ card_product.id }}" type="button" class="quick-add-modal__toggle" aria-label="{{ 'accessibility.close' | t }}">{% render 'icon-close' %}</button>
<div id="QuickAddInfo-{{ card_product.id }}" class="quick-add-modal__content-info">
</div>
</div>
</quick-add-modal>

 

With this:

<a href="{{ card_product.url }}">
<button
id="{{ product_form_id }}-submit"
type="submit"
name="add"
class="quick-add__submit button button--full-width button--secondary"
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 }}
<div class="loading-overlay__spinner hidden">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</button>
</a>

 

Your theme may be a little different but the important part was to remove the modal-opener and quick-add-modal tags and instead just have a link (<a href="{{ card_product.url }}">...</a>)

Crewnies
Visitor
3 0 0

Hi, it works for me, but now, the text "choose option" is underlined. How can i fix it ? 

camax
Visitor
3 0 0

Hello did you fix this problem ? i have the same