How to modify product carousel code to remove links when hovering over product headline and image

Store Design

Topic summary

Issue: A store owner wants to modify a product carousel (GRID view, 3 products side-by-side) so that the product image and headline are not clickable, preventing navigation to a product collection page. They prefer that only the “Buy Now” buttons be actionable.

Requested changes:

  • Identify which part of the carousel code to edit to remove the links from the image and headline (including hover behavior).
  • Add a static PNG (credit card image) beneath each of the three “Buy Now” buttons.

Context: The carousel is used as a banner showcasing three different products with direct purchase buttons.

Responses: Two community members offered help and requested the store URL (and password if the store is protected) to inspect and provide a tailored solution.

Status: No code or step-by-step fix provided yet; awaiting the store details. Discussion remains open.

Summarized with AI on February 21. AI used: gpt-5.
1

Hi, on my product page I have a product carousel to offer three different products in a banner carousel. I have Buy Now buttons right on it, however users can click the image and product headline as well, which takes them to a product collection page.

How can I remove that? Which part of the product carousel code needs to be edited? I am using the GRID view for the carousel, 3 products, they list side by side.

Also it it possible to add a static image under each of the three Buy Now buttons? I wanted to put a credit card image there, I have the PNG for it.

Thanks!

1 Like
2

@atyagi6

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Welcome to shopify community.

Please share your store URL and if your store is password protected then please provide password too.

Thank you.