Product gallery image arrows (Debut theme)

Solved
Highlighted
Excursionist
25 0 4

Hey guys,

For some reason when I view my shop through a mobile device, the arrows for the gallery appear above and below the gallery icons (picture attached).

I'm assuming this isn't right as it's so messy. Is it something to do with the borders? I want the arrows to be to the left and right of the gallery icons, not above and below.

Please can someone help with a solution or workaround?

Thank you! :)

MattIMG_4749.jpeg

1 Like
Highlighted
Shopify Partner
6211 907 2109

Hello, @Matt_W89 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Shopify Partner
77 8 19

Hey Matt_W89,

 

It looks like it could be because of the borders, are they something you have added in?

I'd be happy to have a look at it and see if there's anything I can notice that might be an issue if I can grab your store URL from you? It will be easier to work out what's happening if I can see it properly on the page.

 

Josh

Joshua Sarros - Freelance Web Developer from Melbourne, Australia
joshuasarros@gmail.com
0 Likes
Highlighted
Excursionist
25 0 4

Hey Josh,

Of course :) my website is Bamboosmiths.com.

I haven’t added them in, I just uploaded the images via the product pages and the slideshow with arrows is the default presentation.

thank you!

Matt

1 Like
Highlighted
Shopify Partner
6211 907 2109

This is an accepted solution.

@Matt_W89 

Thanks for URL.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 748px) {
.thumbnails-wrapper {
position: relative;

.thumbnails-slider__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
}

.thumbnails-slider__prev {
    left: -30px;
}
.thumbnails-slider__next {
    right: -40px;
}
}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
25 0 4

Thank you so much @KetanKumar ,

You solved it for me and it's PERFECT.

Just one small correction to your code, you missed out a '.' on: 

thumbnails-slider__prev {
    left: -30px;

Just need to change it to:

.thumbnails-slider__prev {
    left: -30px;

 Just posting that correction for anybody that may see this who needs help - not in any way a criticism!

Once again @KetanKumar , you are an absolute diamond!

Best,

Matt

0 Likes
Highlighted
Shopify Partner
6211 907 2109

@Matt_W89 

Thanks for update.

yes we're update code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Excursionist
24 0 4

Hi there,

How can I add arrows on image to click for next pic? Could you please help me. Thanks

This is my web: jckacova.com

QA拷貝.jpg

1 Like
Highlighted
Shopify Partner
6211 907 2109

@jckacova 

It can be done by doing some code customization. Please take the help of a developer and hire Shopify Expert or me

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
New Member
1 0 0

This code didn't work for me? I put it at the very end of the theme.scss.liquid file .  Help ?

My site is https://plus-size-clothing.com check any product page.

0 Likes