Move price to below product name on theme Flow

neumini
New Member
5 0 0

Hi,

 

I would like to move the price on my product pages to be directly below the product name, I am using theme Flow. Are you able to let me know how to do this?

 

Many thanks in advance.

 

Lana

0 Likes
Pallavi
Shopify Expert
1323 177 216

Hello There,

Please share your store URL and screenshot.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
neumini
New Member
5 0 0
Hiya,

Thanks for your quick reply.

My store is www.neu-mini.com and I’ve attached a screen shot of where I
would like the price to display which is directly below the product name
but above the product variants and add to cart.

Thanks in advance for your help


0 Likes
Pallavi
Shopify Expert
1323 177 216

Hello There,

1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste bellow code in the bottom of the file

.product-details--form-wrapper---below {
margin-top: 42px!important;
}

span#ProductPrice {
top: 9%!important;
position: absolute!important;
}
.product-details-wrapper {
position: relative;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
neumini
New Member
5 0 0
Hi Pallavi,

Thanks so much that has worked for desktop but for mobile it has overlapped
with the product description (screen shot attached). Is this something that
can be corrected?. Can I also be super annoying and ask if it's possible
to have it display in two locations as per the screen shot?

Many thanks,
Lana


0 Likes
Pallavi
Shopify Expert
1323 177 216
Hello There,
1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste bellow code in the bottom of the file
 
@media only screen and (max-width: 767px) {
span#ProductPrice {
top: 8% !important;
}
}

@media only screen and (max-width: 399px) {
span#ProductPrice {
top: 6% !important;
}
}
@media only screen and (max-width: 399px) {
span#ProductPrice {
top: 7% !important;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
neumini
New Member
5 0 0
Hiya Pallavi,

Thanks for coming back to me so quickly.

That hasn't worked for mobile and also go the same for desktop - screen
shot attached. Any suggestions?

Many thanks,
Lana

[image: Screen Shot 2021-04-15 at 8.54.15 am.png]


0 Likes
Pallavi
Shopify Expert
1323 177 216

please add this css working is fine!

.product-details--form-wrapper---below {
    margin-top: 42px!important;
}

span#ProductPrice {
    top: 8%!important;
    position: absolute!important;
}
.product-details-wrapper {
    position: relative;
}
@media only screen and (max-width: 767px) {
span#ProductPrice {
	top: 8% !important;
}
}

@media only screen and (max-width: 399px) {
span#ProductPrice {
	top: 6% !important;
}
}
@media only screen and (max-width: 399px) {
span#ProductPrice {
	top: 7% !important;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
neumini
New Member
5 0 0
Hiya,

It still isn’t working for me on mobile. The text overlaps.


0 Likes