Collection Page Product Image Clickable

Store Design
, , ,

Topic summary

Issue: Product images on a collection page are not clickable; only the product title text currently links to the product page.

Solution: Wrap the product image HTML with an anchor (<a>) tag that links to the product page URL.

Implementation Steps:

  1. Locate the collection page template file (typically collection.liquid, collection-template.liquid, or collection-product-grid.liquid)
  2. Find the product loop that displays images
  3. Wrap the existing <img> tag with an anchor tag linking to product.url

Example Code:

<a href="{{ product.url }}">
  <img src="{{ product.featured_image | img_url: 'large' }}" alt="{{ product.title }}">
</a>
  1. Save changes and preview the collection page

Outcome: Each product image will now function as a clickable link to its respective product detail page, improving navigation and user experience.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

How can i make the product image in collection page clickable and send you to the product page.

ArnauP_0-1723906540317.png
ArnauP_0-1723906540317.png592×620 21.7 KB

https://jaccomcollection.com/collections/all

Thanks!

2

Look at the liquid code for the page and wrap the html shown below with the anchor tag. Right now only the product title text is wrapped with an “<a href=…”
3

Hello @ArnauP

To make the product images on a collection page clickable so that they direct users to the respective product pages, you need to wrap each product image with an anchor () tag that links to the product page.

Here’s how you can do it:

1. Locate the Collection Page Template- Find the template for the collection page. It’s usually named something like collection.liquid or within a section called collection-template.liquid or collection-product-grid.liquid.

2. Modify the Product Loop- Inside this template, there should be a loop that iterates through the products in the collection, displaying each product’s image, title, price, etc. You want to wrap the product image with a link to the product page.

3. Add the Anchor Tag- Locate the product image HTML code, which may look like this:

liquid
Copy code

{{ product.title }}

4. Final Code Example

Here’s an example of how the code might look inside the loop:

liquid
Copy code

{% for product in collection.products %}

{{ product.title }}

{{ product.title }}

{{ product.price | money }}

{% endfor %}

 

5. Save and Test- Save the changes and preview your collection page. The product images should now be clickable and redirect users to the respective product pages.

This approach ensures that each product image on the collection page acts as a link to its detailed product page, improving navigation and user experience.

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like