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

Store Design
1

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

anastaitoko_0-1629688294967.png
anastaitoko_0-1629688294967.png268×241 15.1 KB

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

Password: Taitoko_09

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

2

@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;}
}
3

@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?

4

@anastaitoko

This is code customization work .

Thanks!

5

@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?

6

@anastaitoko

what do you want please share screenshot!

Thanks!

7

@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

anastaitoko_0-1629697489780.png
anastaitoko_0-1629697489780.png260×494 27.8 KB

Hope that makes sense!

8

@anastaitoko

This is code customization work not simple solution .

Thanks!

9

@dmwwebartisan Okay no worries

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

10

Hey did you get an answer on this? :relieved_face: