How to position the product page paginations slider onto the product image Dawn theme.

Shopify Discussion
1

Hi,

I would like to reposition the product page paginations slider onto the product image itself rather than having it under the product image. I have shared two photos below, 1 photo is my product image with two red arrows pointing where the paginations is currently positioned and the other red arrow is pointing where it should be. The 2nd photo is a different product page from another website that has implemented this feature which i would like to apply to my site.

image_6487327-2.JPG
image_6487327-2.JPG1241×2352 212 KB

image_6487327.JPG
image_6487327.JPG1242×2271 184 KB

Thank you in advance.

Regards,

Creps City

2

Hi @crepscity

You can do that by adding this code to your Online Store > Themes > Customize > Custom CSS

@media (max-width: 749px) {
.product .product__media-wrapper { position: relative; }
.product .product__media-wrapper .slider-buttons {
    position: absolute;
    bottom: 40px;
    right: 20px;
    z-index: 9999999999;
}
}
}
3

Hi Dan i’ve added this to my css however, nothing happened?

4

Hi there, is there any solutions out there as this has not yet been resolved.

Thank You in advance.

1 Like
5

Hi, please update code to this and check again

@media (max-width: 749px) {
.product .product__media-wrapper { position: relative; }
.product .product__media-wrapper .slider-buttons {
    position: absolute !important;
    bottom: 40px;
    right: 20px;
    z-index: 9999999999;
}
}