Does anyone know about the Dawn slide component availability?

Topic summary

The Dawn theme’s slider component exists but is limited to mobile-only use in certain sections, with CSS and JavaScript files available in the assets folder. Desktop implementation requires custom CSS modifications.

Community Solutions:

  • shadowsfall118 provided a detailed 4-file implementation using Slick Slider for product page images, maintaining click-to-enlarge functionality and mobile compatibility

  • made4Uo developed a comprehensive solution preserving Dawn’s native slider-component code while adding:

    • Product slider with zoom feature
    • Variant buttons connected to images
    • Thumbnail resizing
    • Automatic hiding of slider buttons when fewer than 4 images exist
    • Free code available on their blog
  • marcoswata created a simpler desktop slideshow version with code on GitHub, requiring modifications to main-product.liquid, component-slider.css, and product-thumbnail snippets

  • JohnFromJotting offered an alternative using Flickity library for more intuitive slide functionality

Technical Notes:

Some reversed/encoded text in posts suggests formatting issues. Multiple users confirmed working implementations on Dawn 9.0. Solutions range from basic CSS tweaks to full Debut-theme-style product page conversions, all available without requiring paid apps.

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

@made4Uo

I also have the same problem, i have even tried deleting and copying the entire css text that is on the website, as this is probably a direct copy from your dev site - i thought it was me. The css file in the video and the one on the site are different, but only because with the cut and paste one you include all the code that has been commented out i think.

I have gone step by step by with the video and also by just following the steps on the page, it is a fresh “Dawn” install so no other customisations have taken place as yet.

I think there is a problem with the css style sheet or the script as it doesnt appear to be calling or linking up with the large image in any way, certainly the large image isnt displayed and the slider does not move.

When you do the first step you are left with giant product images on the product page, which is fine, then you implement the css file and the images shrink to what you would expect the ones along the bottom of the carousel (but with no large image showing). This at least does seem have a slide component that works, but when you change the global.js file to “3” and “4” the slider stops moving and you are left with 4 (or however many images you have on your product page) thumbnail images that just run along the bottom…

I have included a screenshot to show you what i mean, if you could take a look at your code or even try it on a fresh dawn install that would be great as others have shown how to do a slider on the main product images, which is great, but i need a carousel for a design i am working on.

Thanks