How do I make the image carousel scrollable on mobile after clicking into a product - DawnTheme

Store Design

Topic summary

A user seeks to enable image carousel scrolling on mobile product pages in Dawn theme. Currently, clicking a product image on mobile displays only a zoomed static view without carousel navigation between images.

Proposed Solution:

  • Another user provides custom JavaScript code to add next/previous navigation buttons
  • Code should be inserted in theme.liquid before the closing </body> tag
  • Uses conditional logic {% if template == "product" %} (or {% if template.name contains 'product' %})

Current Status:

  • Original poster unable to implement successfully, likely due to incorrect code placement
  • Shared screen recording demonstrates the solution working with next/back buttons
  • Additional request to customize button colors to match site’s green theme

Note: The solution adds navigation buttons rather than creating a true swipeable carousel. The discussion remains open with implementation issues unresolved.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi guys,

Is there a way to make the image carousel scrollable AFTER clicking into a product on mobile?

I’m using https://www.mobileviewer.io/ to test responsiveness.

After I click into the product it looks like this, which is just the zoomed image, however I want this to also be a carousel. As in, I don’t want to have to X out after clicking into a product to be able to scroll through the other images.

environmentalPa_0-1743171767693.png
environmentalPa_0-1743171767693.png438×1013 82.6 KB

Looking for some help on this. Here is my store link: https://environmentalpartners.com.au/products/earth-friendly-cleaning-kit

Thanks in advance and regards,

Jimmy

1 Like
2

this is stupid solution, but this will work. put this code in the theme.liquid bottom most before body tag close. (means before )

{% if template == "product" %}

{% endif %}
3

environmentalPa_0-1743273976145.png
environmentalPa_0-1743273976145.png754×874 71.1 KB

Don’t think it worked but maybe I’m pasting it wrong?

Regards,

Jimmy

1 Like
4

you can try replace if part with

{% if template.name contains ‘product’ %}

my code is not exactly a carousel it just showing the next image and previous image when click on next and back

screen recording

https://drive.google.com/file/d/1TgddxijOQap5B1Z18onVZiCBAsQ3tO5I/view?usp=drive_link

1 Like
5

Appreciate you taking the time to help.

Still not sure how you made it work, I must be pasting it wrong.

Also is there a way to make the colors match the other greens?

Regards,

Jimmy