Product Page - Align title left, price right, on a single line (Dawn Theme)

Solved
bhristopher
Tourist
20 0 1

I'm having problems with how the title and the price are floating on the product page.

The goal is to have the title float left, and the price float on the right side.

Screen Shot 2021-11-22 at 12.03.42 AM.pngScreen Shot 2021-11-22 at 12.03.56 AM.png

 

Does anyone know how I can fix this for both desktop and mobile?

 

Url: https://flaud.world/

Password: 202135283

 

Thanks,

B

Accepted Solutions (6)

Accepted Solutions
dmwwebartisan
Shopify Partner
9770 2228 3065

This is an accepted solution.

@bhristopher 

1] Please add following code your assets /section-main-product.css bottom of the file .

.product .price {
    align-items: flex-start;
    float: right !important;
}

 

2] Please add following code your assets / component-accordion.css bottom of the file .

.accordion {padding-top: 30px !important;}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

diego_ezfy
Shopify Partner
2300 413 541

This is an accepted solution.

@bhristopher, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:

.product__title{
    margin-top: 0 !important;
}

[id*='price-template']{
    display: inline-block;
    margin: 0 0 0 auto !important;
    float: right;
}

.product__accordion{
    padding-top: 30px;
}



Kind regards,
Diego

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

ThomasBorowski
Shopify Expert
650 44 153

This is an accepted solution.

No need to use floats, try adding this to assets/section-main-product.css:

.product .price {
    justify-content: flex-end;
}

 

You might also want to add this to remove the top margin from the product title on mobile:

[id^="ProductInfo-template"] .product__title {
  margin-top: 0;
}
Did my solution work? Help other Community members easily find the correct solution and apply it to their own stores by marking it as the Accepted Solution and giving it a Thumbs Up
★ EU B2B customer registration with VAT ID validation: https://apps.shopify.com/b2b-customer-registration ★

View solution in original post

Puma1027
Tourist
42 3 2

This is an accepted solution.

@bhristopher 

Hello.

You have to add the code in "theme.scss.liquid".

.product__title {
    margin-top: 0 !important;
}
.product .price {
    justify-content: flex-end;
}

 

If helpful, please "Like" and Accept Solution.
I am a Shopify developer.
I want to achieve my success through a community with you.
It's my success and soon your success.
If you need help, please contact me!
Skype ID: live:.cid.4149c7e1ff44466c

View solution in original post

ThomasBorowski
Shopify Expert
650 44 153

This is an accepted solution.

Based on the current code, if you make .product__title CSS look like this it should work:

.product__title {
  word-break: break-word;
  margin-bottom: 0;
  float: left;
  margin-top: 0;
}

 

Did my solution work? Help other Community members easily find the correct solution and apply it to their own stores by marking it as the Accepted Solution and giving it a Thumbs Up
★ EU B2B customer registration with VAT ID validation: https://apps.shopify.com/b2b-customer-registration ★

View solution in original post

ThomasBorowski
Shopify Expert
650 44 153

This is an accepted solution.

Right now the CSS rule is inside a media query (@media only screen and (min-width: 992px). Just move the rule outside of that media query and it will always be applied.

 

Pro tip though: Don't fiddle with details like this too much, in the end they won't make much of a difference. Focus on getting your store up and running and making sales.

Did my solution work? Help other Community members easily find the correct solution and apply it to their own stores by marking it as the Accepted Solution and giving it a Thumbs Up
★ EU B2B customer registration with VAT ID validation: https://apps.shopify.com/b2b-customer-registration ★

View solution in original post

Replies 14 (14)
dmwwebartisan
Shopify Partner
9770 2228 3065

This is an accepted solution.

@bhristopher 

1] Please add following code your assets /section-main-product.css bottom of the file .

.product .price {
    align-items: flex-start;
    float: right !important;
}

 

2] Please add following code your assets / component-accordion.css bottom of the file .

.accordion {padding-top: 30px !important;}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

diego_ezfy
Shopify Partner
2300 413 541

This is an accepted solution.

@bhristopher, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:

.product__title{
    margin-top: 0 !important;
}

[id*='price-template']{
    display: inline-block;
    margin: 0 0 0 auto !important;
    float: right;
}

.product__accordion{
    padding-top: 30px;
}



Kind regards,
Diego

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

ThomasBorowski
Shopify Expert
650 44 153

This is an accepted solution.

No need to use floats, try adding this to assets/section-main-product.css:

.product .price {
    justify-content: flex-end;
}

 

You might also want to add this to remove the top margin from the product title on mobile:

[id^="ProductInfo-template"] .product__title {
  margin-top: 0;
}
Did my solution work? Help other Community members easily find the correct solution and apply it to their own stores by marking it as the Accepted Solution and giving it a Thumbs Up
★ EU B2B customer registration with VAT ID validation: https://apps.shopify.com/b2b-customer-registration ★

View solution in original post

Puma1027
Tourist
42 3 2

This is an accepted solution.

@bhristopher 

Hello.

You have to add the code in "theme.scss.liquid".

.product__title {
    margin-top: 0 !important;
}
.product .price {
    justify-content: flex-end;
}

 

If helpful, please "Like" and Accept Solution.
I am a Shopify developer.
I want to achieve my success through a community with you.
It's my success and soon your success.
If you need help, please contact me!
Skype ID: live:.cid.4149c7e1ff44466c

View solution in original post

Puma1027
Tourist
42 3 2

Please confirm this image.

Puma1027_0-1637679451629.png

Puma1027_1-1637679476845.png

 

 

If helpful, please "Like" and Accept Solution.
I am a Shopify developer.
I want to achieve my success through a community with you.
It's my success and soon your success.
If you need help, please contact me!
Skype ID: live:.cid.4149c7e1ff44466c
bhristopher
Tourist
20 0 1

@Puma1027 @ThomasBorowski @diego_ezfy @dmwwebartisan

 

@Puma1027 Those images you sent are how I want it.

 

I tried everything you all responded with and got the same result:

Screen Shot 2021-11-23 at 1.11.26 PM.pngScreen Shot 2021-11-23 at 1.17.08 PM.png

ThomasBorowski
Shopify Expert
650 44 153

This is an accepted solution.

Based on the current code, if you make .product__title CSS look like this it should work:

.product__title {
  word-break: break-word;
  margin-bottom: 0;
  float: left;
  margin-top: 0;
}

 

Did my solution work? Help other Community members easily find the correct solution and apply it to their own stores by marking it as the Accepted Solution and giving it a Thumbs Up
★ EU B2B customer registration with VAT ID validation: https://apps.shopify.com/b2b-customer-registration ★

View solution in original post

bhristopher
Tourist
20 0 1

It worked. Appreciate you!

 

@ThomasBorowski @Puma1027 @diego_ezfy @dmwwebartisan  While I have you guys here,

How do I get the space between the size dropdown and the "add to cart" button to look the same on mobile, as it does on desktop?

Screen Shot 2021-11-23 at 1.44.36 PM.pngScreen Shot 2021-11-23 at 1.44.49 PM.png

ThomasBorowski
Shopify Expert
650 44 153

The button on is being pulled up by 18 px in the desktop view, looks like a custom CSS change as it's not in the standard Dawn CSS. Look in base.css for a rule for .button--full-width that sets top: -18px !important;. Either delete or comment out that line and the gap between the dropdown and the button should be the same on desktop and mobile.

Did my solution work? Help other Community members easily find the correct solution and apply it to their own stores by marking it as the Accepted Solution and giving it a Thumbs Up
★ EU B2B customer registration with VAT ID validation: https://apps.shopify.com/b2b-customer-registration ★