Re: dawn 6.0.2. product name and price alignment

dawn 6.0.2. product name and price alignment

ALY02SA
Excursionist
36 1 4

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 

Replies 12 (12)

Moeed
Shopify Partner
6719 1814 2198

Hey @ALY02SA 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.product__info-container >* {
    margin-top: 0;
    margin-bottom: auto;
}
</style>

RESULT:

Moeed_0-1693050734724.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


ALY02SA
Excursionist
36 1 4

@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. 

Moeed
Shopify Partner
6719 1814 2198

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

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


Made4uo-Ribe
Shopify Partner
9848 2342 2937

Hi @ALY02SA 

Im not sure if this is what you like to achieve, check it out. 

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

@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%;
}
}

 

  • And Save. 
  • Result:
  • Ribe_Dagandara_0-1693057951666.png

 

I hope it help. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
ALY02SA
Excursionist
36 1 4

@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 

ALY02SA
Excursionist
36 1 4

@Made4uo-Ribe I have tried the code in base, theme and style and no results. 

ALY02SA
Excursionist
36 1 4

@Made4uo-Ribe It works in theme liquid, however it is not there yet; see the results 

Screenshot 2023-08-26 at 17.00.52.png

ALY02SA
Excursionist
36 1 4

@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

Screenshot 2023-08-26 at 17.13.17.png

ALY02SA
Excursionist
36 1 4

@Made4uo-Ribe also on mobile remains the same, title and price centred

Made4uo-Ribe
Shopify Partner
9848 2342 2937

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

Ribe_Dagandara_0-1693083286544.png

Ribe_Dagandara_1-1693083387303.png

Desktop:

Ribe_Dagandara_2-1693083416147.png

I hope it help.

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
ALY02SA
Excursionist
36 1 4

@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;

}

} 

Screenshot 2023-08-27 at 02.42.05.png

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. 

ALY02SA
Excursionist
36 1 4

@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

 

Screenshot 2023-08-27 at 03.18.17.png