A user is experiencing a clickability issue on their collection page where a custom button placed under product images cannot be clicked because the entire product card (image and product info) is already wrapped in a link to the product page.
Proposed Solution:
main-collection-product-grid.liquidCurrent Status:
Hello, who can help me.
On the collection page I have placed a button with a link under the image.
However, it is now not clickable because it now links to the product page.
Is there a way to make sure that my button is clickable and that the image and product information refer to the product page.
I have added an image
This is a common issue on collection pages — when you add a custom button under the image, but the whole product card (including the image and title) is already wrapped in a link to the product page. That often causes your custom button to become unclickable.
To fix this, you’ll likely need to adjust the HTML structure or modify the z-index and positioning using CSS so the button is above the product card link and doesn’t conflict with it. You might also consider placing your button outside the product link wrapper in the theme code.
If you’re using a Shopify 2.0 theme, you can find this in main-collection-product-grid.liquid or similar, and make slight adjustments there.
Hope this helps! Let me know if you need a bit more guidance on where to look in your theme files. Happy to point you in the right direction
Hey @Freddie10 could you please share your store URL and Password [if applicable] so that I take a look and provide you solution code.
Thanks
Hallo,
The url of the store is https://www.excitante.nl
