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 
Topic summary
A user wants to replace the “Choose Options” modal popup on product collection pages with a direct link to the product page.
Solution provided:
- Locate the file
snippets/card-product.liquid - Remove the
modal-openerandquick-add-modaltags - Replace the modal trigger with a simple anchor tag:
<a href="{{ card_product.url }}">...</a>
Follow-up issue:
After implementing this change, some users encountered underlined link text.
Proposed fix:
Add CSS styling after the </a> tag to remove underlines:
a {
text-decoration: none !important;
}
a:hover {
text-decoration: none !important;
}
Note: Using !important will override previous styling but may affect all links site-wide, not just product cards.
Hello @gsb ,
It’s simple but you have to find the template. Once found change it with anchor tag with href {{ product.url }}
Thanks
Thank you. I am not sure where to look in the theme files… My javascript is below basic
Hey Gsb. I wanted to make this change as well. Find the file “snippets/card-product.liquid” and replace this code:
With this:
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 (…)
2 Likes
Hi, it works for me, but now, the text “choose option” is underlined. How can i fix it ?
Hello did you fix this problem ? i have the same
Hey! I added a style just after the :
a { text-decoration: none !important; } a:hover { text-decoration: none !important; }However! Bear in mind this is likely to remove underlines for all links since adding !important overrides any previous styling applied.