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.

[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]

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.

[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

[DRAWandCARE]

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

[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 %}
    <style>
      .product--thumbnail .product__media-item:not(.is-active),
      .product--thumbnail_slider .product__media-item:not(.is-active) {
        display: block !important;
      }
      .arrow_desktop_slider--prev, .arrow_desktop_slider--next {
        position: absolute;
        transform: translateY(-50%);
        top: 50%;
        border: 1px solid #fff;
        background: #fff !important;
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
      .arrow_desktop_slider--prev{
        left:1.1rem;
      }
      .arrow_desktop_slider--next{
        right:1.1rem;
      }
      .enable_desktop_slider li{
        width:calc(100% - 0rem)!important;
      }
      {% comment %} disable modal {% endcomment %}
      .product__modal-opener--image .product__media-toggle {
        pointer-events: none;
      }
      {% comment %} style for mobile {% endcomment %}
      @media screen and (max-width: 749px) {
        .product-single__photo {
          width: 100%;
        }
        .arrow_desktop_slider--prev, .arrow_desktop_slider--next {
          width: 35px;
          height: 35px;
        }
        
        .arrow_desktop_slider--prev{
          left: 1.5rem;
        }

        .arrow_desktop_slider--next{
          right: 1.5rem;
        }
      }
    </style>
    {% 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!):

    <!--  custom arrow    -->
    {% if section.settings.gallery_layout == 'thumbnail_slider' %}
      <div class="arrow_desktop_slider">
        <button type="button" class="arrow_desktop_slider--prev slider-button slider-button--prev" name="previous">{% render 'icon-caret' %}</button>
        <button type="button" class="arrow_desktop_slider--next slider-button slider-button--next" name="next">{% render 'icon-caret' %}</button>
      </div>
    {% endif %}
    <!--  end custom arrow    -->

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! 💚

[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 :))

[DRAWandCARE]

Thrilled to hear that! Thank you so much for your kind words; I truly appreciate it! 😊

[nakulrawal]

i tried both of your solution first solution not working and second solution arrows are not appearing at the right place you can see in the attached image . can you please tell me what should be done for this.

[Andy106]

Those are not 2 solutions. Its 1 solution with steps

[nakulrawal]

thank you its working fine now .

[nakulrawal]

as you can see sliding arrows are not at center how can we fix this? it is also showing slice of previous image as you can see.

[nakulrawal]

its working fine on desktop but arrows are not working proper on mobile view

[DippingMyToe]

It all worked! You are a champion mate. Thank you so much.

[DRAWandCARE]

Was happy to help! 🤗💚

[AryavK]

THANK YOU SO MUCH @DRAWandCARE. works to PERFECTION

[zingnz]

Hi 

The arrows on the top image are working. But how do we disable those numbers with arrows just under the picture? the number is always wrong (always 1 more than they have) and the arrows are not working.

[AryavK]

Wait, why are these numbers coming after I add this code

    <!--  custom arrow    -->
    {% if section.settings.gallery_layout == 'thumbnail_slider' %}
      <div class="arrow_desktop_slider">
        <button type="button" class="arrow_desktop_slider--prev slider-button slider-button--prev" name="previous">{% render 'icon-caret' %}</button>
        <button type="button" class="arrow_desktop_slider--next slider-button slider-button--next" name="next">{% render 'icon-caret' %}</button>
      </div>
    {% endif %}
    <!--  end custom arrow    -->

Result: