Change product image layout in debut theme

sailorweeb97
Tourist
7 0 3

 

 

Hello. I am currently looking to change the layout of the images on my product page. Here is the current layout: 

Picture1 (1).png

Below is the product image layout that I need to change my product page to:Picture2.png

How would I do this in debut theme? I have tried several things, but couldn't get it to work. What code should I use and where should I insert it? Thank you in advance. 

0 Likes

Hey @sailorweeb97,

Please Go to Online Store-> Theme->Edit code then go to assets/theme.css ->paste the below code at the bottom of the file.

@media only screen and (min-width: 750px) {
.product-single__media-wrapper {
    width: 80%;
    float: right;
}
.thumbnails-wrapper.thumbnails-slider--active {
    float: left;
    width: 100%;
}
.product-single__thumbnails-item {
    flex: 0 0 80% !important;
}
}

 

Please do let me know if it works for you.
Good Luck!

 

Zeian Shahzad | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Email: shopify.zeian@gmail.com
Cheers!!
sailorweeb97
Tourist
7 0 3

Hello @Zeian_Shahzad , 

 

         This does work! Thank you so much! I was also wondering how to move the main product image up slightly so that there is some space between the main product image and a video asset I have underneath it. Sorry for all the questions. You really helped me out. Thank you!

0 Likes

Please share your website URL so I can understand it better and send you a more specific code.

Thanks

Zeian Shahzad | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Email: shopify.zeian@gmail.com
Cheers!!
0 Likes