Solved

product page, mobile view, how to move products pictures & thumbnail pictures to top section

pearlle
Tourist
6 0 4

Hi,

 

Please help, 

Currently in product page, mobile view, the product picture and thumbnails pictures are below the product name, price, size variants, color swatches and add to cart section, I would like to know how and where move it to the upper section (above the product name, price, size variants, color swatches and add to cart section).

1.png
2a.png
3.png

Thanks in advance.

Mike.

Accepted Solutions (2)

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@pearlle 


Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you 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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@pearlle 

thanks for the details can you please try this code 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

@media screen and (max-width: 767px) {
.product-page--main-content.reverse {
    flex-direction: column-reverse;
    display: flex;
    flex-wrap: wrap;
}
}

 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 5 (5)

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@pearlle 


Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you 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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
pearlle
Tourist
6 0 4
Www.pearlle.com
Pearllellc.myshopify.com
KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@pearlle 

thanks for the details can you please try this code 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

@media screen and (max-width: 767px) {
.product-page--main-content.reverse {
    flex-direction: column-reverse;
    display: flex;
    flex-wrap: wrap;
}
}

 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
pearlle
Tourist
6 0 4

@KetanKumar 

Thank you very much!

work great! exactly as how we wanted!

Thank you,

Pearlle

KetanKumar
Shopify Partner
36839 3635 11972

@pearlle 

it's my pleasure to help us

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing