add arrows to swipe between product images (next, previous) on the product page (Dawn 11.0.0 theme)

[DRAWandCARE]

Hello everybody!

I’m currently using Dawn 11.0.0 theme for my website and I’m wondering how to add arrows to swipe between product images (next, previous) on the product page.

Website link: https://www.drawandcare.com/

Will be grateful for any help!

[David_SHT]

Hi @DRAWandCARE ,

This is David at SalesHunterThemes.

In this case you need to check the theme settings, maybe it supports for the function as you want.

If your theme does not support for that, you should contact with theme supporter or you need to hire an expert, they will support you build that function for your theme.

[laddisahsi]

Hi @DRAWandCARE

Please check theme settings for this,

If there isn’t any setting then have to create custom slider here.

[DRAWandCARE]

Unfortunately, in the theme settings, I can only enable arrows for thumbnails, but I need them next to the large main photo (for the thumbnails desktop layout).

So I think I need a custom css for this.

[DRAWandCARE]

Unfortunately, in the theme settings, I can only enable arrows for thumbnails, but I need them next to the large main photo (for the thumbnails desktop layout).

So I think I need a custom css for this.

[laddisahsi]

@DRAWandCARE

Yes choose this slider, and then using css can set the arrows.

[DRAWandCARE]

Yes, and I actually came here to get a css that would help me do this. Any suggestions?

[laddisahsi]

@DRAWandCARE

First please add thumbnail slider

[DRAWandCARE]

Okay, done for this product page: Mini Custom Watercolor Cat Portrait – DRAWandCARE

What should I do now?

[laddisahsi]

Hi @DRAWandCARE

Feature image doesn’t have slider code.

So Have to create a custom slider for this.

[DRAWandCARE]

I understand, but I don’t know how to do it. Can you help me?

[AryavK]

@DRAWandCARE it seems like you solved the problem. Can you give me the code pls.

Thanks

[DRAWandCARE]

Hello! Apologies for the delayed response; I just noticed your message.

To solve the ‘problem’, I followed this video guide, but unfortunately, the link is no longer available. Perhaps the issue is because the tutorial was created for the 11th version of the theme, while the current version is 12 (but it still works perfectly for my Dawn 12.0.0 theme): https://www.youtube.com/watch?v=Za8QYFJ9njc

But! The video author has added the necessary codes to this page: https://jabwebsolution.com/how-to-create-product-slider-in-shopify-dawn-theme/. I also found a new video on the same topic on the author’s channel: https://www.youtube.com/watch?v=ouhYdxGSfhc&t=548s. Please check it out; here, the author might also explain where to add the codes for them to work.

However, I noticed that the arrows in the new video look slightly different… So, if the “updated” guides don’t assist you, please feel free to reach out again, and I’ll try to provide you with the codes I used for my own site earlier

Hope this will be helpful for you!

[AryavK]

hello @DRAWandCARE , i did not figure where to put it. can you pls tell me where? THANKS!

[AryavK]

ps. It did not work for me, can you pls show me the code you used, THANKS! so MUCH

[Andy106]

Hello!
Can you please share the code, because the new version is not very aesthetic as the one you have in your design:)
Thnks in advance!

[DRAWandCARE]

Hi, I’d be happy if this works for you!
Here are all the necessary codes from my site files. I’ll try to explain where you need to add them all

First of all, make sure that the ‘Desktop layout’ in the product information section on the product page is ‘Thumbnail Carousel’ (see on the screenshot below; this is in the customization mode of your theme: Admin account menu - Online Store - Themes - Customize) :

Next, go back to Admin account menu - Online Store - Themes - Edit Code.

So, the first code:

{% if section.settings.gallery_layout == 'thumbnail_slider' %} enable_desktop_slider slider--tablet-up {% endif %}

You need to add it to a specific place in the product-media-gallery.liquid file to enable arrows for slider. Here are the screenshots of where I have this code:

Now you need to add a CSS code for your arrows.

Take a look at the screenshots below to see exactly where you need to add it (still in the product-media-gallery.liquid file):

Here’s my code for the arrows on both desktop and mobile:

{% comment %} style start {% endcomment %}
    
    {% comment %} style end {% endcomment %}

In this code, you can also manually change the style settings for the arrow and the circle around it, its border, etc. (I usually just try changing the numbers, watching how it works on the site, and adjust the layout accordingly )

And finally, I have this code, which also seems to have something to do with these arrows (check first if everything works with the first two, you may not need this one!):

    {% if section.settings.gallery_layout == 'thumbnail_slider' %}
      
        
        
      

    {% endif %}
    

I have it right here:

And now I think that’s it! (as far as I remember, I only added these codes)
Please let me know if this works for you! Good luck!

[DRAWandCARE]

Hello again! Please check out my reply below; hope it will help you!

[Andy106]

Thanks so much! I havent tried it yet, but I wanted to thank you for taking time to explain this! Good people still exist! Thanks again:))

[Andy106]

Works to perfection (even for spotlight theme)! Huge thanks :))