Image slider on product page, collection page and all other pages on mobile and desktop

[anastaitoko]

Hi guys,

I need help to create a product image slider (left and right) for my product pages.

It's alot more seamless process to scroll through images on a product page as opposed to jumping into the actual product.

I'd like customers to see the different product images from the grid view on mobile and desktop as you can see below

PS: Also trying to move the add to cart button higher if possible

My URL: https://fieralabel.com.au/

Password: Taitoko_09

Please let me know if you can help - I really appreciate it 

[dmwwebartisan · Accepted solution]

@anastaitoko 

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

.product-single__form--no-variants {
    margin-top: 0px !important;
}

@media only screen and (max-width: 590px){
.grid-product__meta {height: auto !important;}
}

[anastaitoko]

@dmwwebartisan  Amazing thank you very much!

You wouldn't happen to know how to get the image slider to allow a left and right scroll on collection page?

[dmwwebartisan]

@anastaitoko 

This is code customization work .

Thanks!

[anastaitoko]

@dmwwebartisan Damn okay - so not as simple as the first one.

Would you be able to please point me into the right direction to get this implemented?

[dmwwebartisan]

@anastaitoko 

what do you want please share screenshot!

Thanks!

[anastaitoko]

@dmwwebartisan Thank you.

I'd like to be able to swipe left to view the next picture like a carousel of the product

Similar to below but without the arrows and you can swipe to see the next product picture 

Hope that makes sense!

[dmwwebartisan]

@anastaitoko 

This is code customization work not simple solution .

Thanks!

[anastaitoko]

@dmwwebartisan Okay no worries

Do you know an expert that could help me with this by any chance?

[Sarahrose1]

Hey did you get an answer on this? 😌