How to make product card images clickable to product page on Atelier theme?

[muna2]

I am using the Atelier theme and my product images go to the product page only when there is no photo or just one photo. As soon as I add more photos when I click it just goes to the next photo and never clicks onto the product page. How do I fix this, I tried asking the AI but its solutions are not working or it keeps going back. Why is this happening, is there a permanent fix? Thank you.

[TheScriptFlow_]

Hey,

In order to make the product image clickable and these images go to product page then you need to wrap the product media with Anchor Tag in html.

Share your store URL so that I can take a look.

[muna2]

Hi, thank you so much. I have tried that but I am having a little difficulty finding the correct code to edit. Here is my store url:

https://shop-munamuna.myshopify.com/

[ecomsniper]

Actually, the theme is built like that by default. When there are multiple photos, it treats the image like a slider instead of a link. But yeah, that sucks. Here’s how to fix it and make the image always clickable to the product page:

1. Go to your Shopify Admin
   ➝ Click Online Store
   ➝ Click Themes
   ➝ On your current theme (Atelier), click Actions > Edit Code

2. Find the product card file
   In the left sidebar, under Sections or Snippets, look for a file named something like:

   • product-card.liquid

   • OR card-product.liquid
     (It depends slightly on the version of your theme.)

3. Look for the image block
   Use Cmd+F or Ctrl+F to search for product.media or product.featured_image.

4. Wrap the image in a link
   You’ll see some HTML code showing the product image. Around that image code, add this:

   <a href="{{ product.url }}">
     <!-- IMAGE CODE HERE -->
   </a>

   Example before:

   {{ product.featured_image | image_url: width: 600 | image_tag }}

   After:

   <a href="{{ product.url }}">
     {{ product.featured_image | image_url: width: 600 | image_tag }}
   </a>

5. Disable the image slider (optional but recommended)
   Still in the same file, try searching for flickity, carousel, or slider. If you find a block of code initializing a slider or carousel on hover, comment it out by adding {% comment %} and {% endcomment %} around it.

6. Save your changes
   Click the Save button on the top right.

7. Preview your store
   Go to your home or collection page and click on a product image. it should now take you directly to the product page, even if you’ve added more than one photo.

Let me know if it worked

[muna2]

Hi, thank you so much for your response. I just tried it but I am having a little difficulty finding the correct code to edit. There isn’t any line similar to that in my snippets/product-card.liquid file.

[TheUntechnickle]

Hey @muna2.,

We'll need to encapsulate your product card code in an <a> (anchor tag) and that'll fix the issue. We'd like to do it for you, for free.

Just DM or email us your collaborator code and we'll make the changes in the copy of your live theme - once you'll have tested, we can make it live. 

Cheers!
Shubham | Untechnickle