Collection Page Product Image Clickable

[ArnauP]

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

https://jaccomcollection.com/collections/all

Thanks!

[Geist]

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=..."

<div class="card card--card"></div>

[niraj_patel · Accepted solution]

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 (<a>) 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

  <img src="{{ product.featured_image | img_url: 'large' }}" alt="{{ product.title }}">

• Wrap the image in an <a> tag that links to the product page:

  liquid

  Copy code

  <a href="{{ product.url }}"> <img src="{{ product.featured_image | img_url: 'large' }}" alt="{{ product.title }}"> </a>

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 %} <div class="product-item"> <a href="{{ product.url }}"> <img src="{{ product.featured_image | img_url: 'large' }}" alt="{{ product.title }}"> </a> <h2>{{ product.title }}</h2> <p>{{ product.price | money }}</p> </div> {% 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.