Hi everyone
I am having problems with editing the code for Dawn 6.0.2. Product page - product name and price alignment. I am trying to place the name of the product on all product pages and the price on the same line (product name right and price left). At the moment I have everything centred, this leaves a lot of space between the price, variant picker, etc, on the product page. My url; mysticmoods.co.uk. I hope someone can help with this. Thanks
Hey @ALY02SA
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hi @ALY02SA
Im not sure if this is what you like to achieve, check it out.
@media only screen and (min-width: 749px){
.price.price--large.price--show-badge {
text-align: left;
}
.product__title {
text-align: right !important;
}
.price.price--large.price--show-badge {
position: absolute;
top: 29%;
}
}
I hope it help.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
@Made4uo-Ribe Thank you very much for your reply, that is exactly what I want to achieve, only difference being that the price has to be on the right side of the page and the title on the left side of the page. Thank you very much
@Moeed thank you very much for your reply, your code has helped with reducing the padding, however, what i am after is placing the product name and price on the same line. Thank you very much.
@Made4uo-Ribe I have tried the code in base, theme and style and no results.
@Made4uo-Ribe It works in theme liquid, however it is not there yet; see the results
@Made4uo-Ribe i’ve managed to add product name left / price right; now do you happen to know how can i place them on the same line / level
@Made4uo-Ribe also on mobile remains the same, title and price centred
Hey @ALY02SA
Thank you for your reply. I’m glad to hear that the solution worked well for you. If you find this information useful, a Like would be greatly appreciated. Also, to get the product name and price on the same line is not possible via CSS code. It’s a code customization work. If you’re not familiar with coding then I highly suggest you to hire a Shopify developer.
Best Regards,
Moeed
Hi, I manage to change it on mobile the price stick on the area. But the mobile it keep dancing because of the screen size gets smaller. Try this one.
Same Instruction.
.product__title {
text-align: left !important;
}
.price.price--large {
text-align: right;
}
.price.price--large.price--show-badge {
position: absolute;
}
@media only screen and (min-width: 750px){
.price.price--large.price--show-badge {
right: 3%;
top: 28%;
}
}
@media only screen and (max-width: 749px){
.price.price--large.price--show-badge {
right: 6%;
top: 190%;
}
}
@media only screen and (max-width: 549px){
.price.price--large.price--show-badge {
right: 6%;
top: 150%;
}
}
And Save.
Result: Mobile
Desktop:
I hope it help.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
@Made4uo-Ribe thank you very much for your help; the webpage works great and everything aligned;
.product__title {
text-align: left !important;
}
.price.price–large {
text-align: right;
top: 11.5%;
right:21.5%
}
.price.price–large.price–show-badge {
position: absolute;
.product__title {
text-align:absolute;
}
}
Thank you very much for this!!
As per the mobile - I am coming to my wits end with the mobile ; product name left - price right. I have tried you’re attached + a few combinations but the codes seems to interfere.
@Made4uo-Ribe when I use the code as is the price bounces on the right of the page; see attached + on mobile is not visible
