how to move product title, product price and product review above the product Img in mobile view.

Solved
Kuroya
Explorer
46 3 3

Hi guys, I am trying to move product title, product price and product review above the product Img in mobile view, I am fine with the desktop view, please help me with the coding.

Screen Shot 2021-01-28 at 11.28.17 PM.png

0 Likes
suyash1
Shopify Partner
1933 194 293

@Kuroya - if we change coding then it will be affected on desktop too, can you please share your website link? we can put code for mobile only and desktop only using css help

 

needs little code work but will be fine 

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly
Kuroya
Explorer
46 3 3

@suyash1 

How do we do that?

www.formosan-beauty.com

0 Likes
suyash1
Shopify Partner
1933 194 293

This is an accepted solution.

@Kuroya - needs code changes,  as right now everthing is added in strict grid structure to make it reposnsive

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly
Kuroya
Explorer
46 3 3

@suyash1 - I created a new template for mobile and coded, but I don't know how to make the product page to show different template on mobile view and desktop view

0 Likes
suyash1
Shopify Partner
1933 194 293

@Kuroya - template will be one only, but can use css coding to show and hide particular content, if you created new template, then you need to add name price and review to product_single div class

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly
Kuroya
Explorer
46 3 3

@suyash1  please see the attached link for a new product template code https://paste.ubuntu.com/p/RNqqwJQQmt/

or maybe can we use '@media only screen' to hide product title, product price and product reviews, and use '@media only screen' again to show them up in order?

to be honest, I have tried that, but maybe I'm not experienced enough in coding, what do you think

0 Likes
suyash1
Shopify Partner
1933 194 293
yes we need to do that only hence add title review and price above image
too, so then using media query we can hide non required details

are you getting it? we need to have 2 sets of title, price and review
you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly
Kuroya
Explorer
46 3 3

This is an accepted solution.

Nvm, I think I got it fixed and I did not modify the code for price and reviews, but looked better with just the title now, btw still thank you for trying to help me @suyash1 

 

@Jasoliya is the BEST

here's the solution,

https://community.shopify.com/c/Shopify-Design/Moving-Product-Title-Above-Product-Image/td-p/619647/...

0 Likes
suyash1
Shopify Partner
1933 194 293

@Kuroya - happy that you solved it, thank you for the likes.

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly
0 Likes