Atelier Theme – Disable Product Card Image Carousel & Enable Full Card Click on Mobile (Collection P

[BKir]

Hi, I’m using the Atelier theme and need help with two things on the product cards on the collection page, both on desktop and mobile. First, I want to turn off the image carousel that shows extra product images when you hover (on desktop) or swipe (on mobile). I’d prefer each product card to just show one image, with no scrolling or sliding. Second, I want to make the whole product card clickable on mobile. Right now, only the product name can be tapped to open the product page, but I’d like the photo to be a link too to the product. Any help or code to do this would be really appreciated!

[Small_Task_Help]

Hi,

Hope this will help

- Disable carousel : Removed image loop and showed only featured_image
- Clickable product card : Wrapped the whole product card in an <a> tag
Code example

<a href="{{ product.url }}" class="product-card-link">
  <div class="product-card">
    <img src="{{ product.featured_image | img_url: '400x' }}" alt="{{ product.title }}">
    <h3>{{ product.title }}</h3>
    <p>{{ product.price | money }}</p>
  </div>
</a>