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

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

DRAWandCARE
Pathfinder
128 0 18

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!

 

we.png

 

Replies 29 (29)

David_SHT
Globetrotter
605 125 125

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.

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

DRAWandCARE
Pathfinder
128 0 18

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.

 

weа.png

 

laddisahsi
Shopify Partner
385 38 40

Hi @DRAWandCARE 

Please check theme settings for this,

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

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!
DRAWandCARE
Pathfinder
128 0 18

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.

 

weа.png

 

laddisahsi
Shopify Partner
385 38 40

@DRAWandCARE 

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

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!
DRAWandCARE
Pathfinder
128 0 18

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

laddisahsi
Shopify Partner
385 38 40

@DRAWandCARE 

First please add thumbnail slider

 

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!
DRAWandCARE
Pathfinder
128 0 18

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

What should I do now?

laddisahsi
Shopify Partner
385 38 40

Hi @DRAWandCARE 

Feature image doesn't have slider code.

So Have to create  a custom slider for this.

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!
DRAWandCARE
Pathfinder
128 0 18

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

AryavK
Trailblazer
224 9 32

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

Thanks

faith&you
DRAWandCARE
Pathfinder
128 0 18

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
Trailblazer
224 9 32

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

faith&you
AryavK
Trailblazer
224 9 32

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

faith&you
DRAWandCARE
Pathfinder
128 0 18

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

Andy106
Pathfinder
111 7 29

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
Pathfinder
128 0 18

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

1scr.png

 

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:

2scr.png

3scr.png

 

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

4scr.png

5scr.png

 

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:

6scr.png

 

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
Pathfinder
111 7 29

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
Pathfinder
111 7 29

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

DRAWandCARE
Pathfinder
128 0 18

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

nakulrawal
Tourist
7 0 1

nakulrawal_0-1703254739829.png

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.

banned
Andy106
Pathfinder
111 7 29

Those are not 2 solutions. Its 1 solution with steps

nakulrawal
Tourist
7 0 1

thank you its working fine now .

banned
nakulrawal
Tourist
7 0 1

nakulrawal_0-1703860117546.jpeg

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.

banned
nakulrawal
Tourist
7 0 1

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

banned
DippingMyToe
Tourist
4 0 2

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

DRAWandCARE
Pathfinder
128 0 18

Was happy to help! 🤗💚

AryavK
Trailblazer
224 9 32

THANK YOU SO MUCH @DRAWandCARE. works to PERFECTION

faith&you
AryavK
Trailblazer
224 9 32

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:

Screenshot 2024-03-07 at 9.26.41 PM.png

faith&you