Dawn theme - how can i align price and product title on same line on product page?

Store Design
,

Topic summary

Align the product title and price on one line in a Shopify product page (Dawn theme), and tighten spacing around the Add to cart and description.

  • Access: Store URL was shared and password removed so helpers could review.
  • Proposed fixes: CSS snippets were provided. One used absolute positioning for price elements; another (desktop-only) absolutely positioned the product title, set the info wrapper to relative, reduced default margins, and adjusted the Add to cart button placement to close gaps. (CSS = style rules; absolute positioning fixes an element at set coordinates and typically needs a relatively positioned container.)
  • Implementation: The requester added the CSS (placed in section-main-product.css instead of base.css) and confirmed the layout looked correct.
  • Outcome: Resolved for the Dawn theme. Screenshots were shared for reference.

Most recent update:

  • A new participant asked how to align the title and price on one line in the Spotlight theme, with a screenshot.
  • No solution has been provided yet for Spotlight; the discussion remains open for that request.
Summarized with AI on January 13. AI used: gpt-5.
1

Screenshot 2023-05-14 230702.png
Screenshot 2023-05-14 230702.png1413×673 75.6 KB

i would like “$2.00” and “mini label stickers” to be on the same line and fix the spacing between “add to cart” and the description. thank you!

1 Like
2

Hello There,

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

3

Hello @planandstick

Could you please provide your store URL and, if it is password protected, please share the password so I can review it and provide a solution?

4

www.planandstick.co - thank you :blush:

5

www.planandstick.co - i just removed the password. thank you!

6

Hello @planandstick

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.price--sold-out .price__availability, .price__regular {
    position: absolute;
    top: 4%;
    left: 44%;
}
1 Like
7

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset → base.css and paste this at the bottom of the file:
@media (min-width: 768px) {
.product__title {
    position: absolute;
    left: 22%;
    bottom: 93%;
}
.product__info-wrapper.grid__item {
    position: relative;
}
.price-item.price-item--regular {
    margin-top: -4px;
}
.product__info-container>div:not([class]) {margin: 0;}
.product__info-container>div:not([class]) product-form.product-form {
    margin: 0;
}
.product__info-container>div:not([class]) product-form.product-form form[data-type="add-to-cart-form"] {
}
.product__info-container>div:not([class]) product-form.product-form form[data-type="add-to-cart-form"] .product-form__buttons {
    max-width: 100%;
}
.product__info-container>div:not([class]) product-form.product-form form[data-type="add-to-cart-form"] button {
    margin: 0;
    left: 230px !important;
    top: 0 !important;
    margin-top: -48px;
}
}

ZestardTech_0-1684137029926.png
ZestardTech_0-1684137029926.png1726×672 116 KB

1 Like
8

i put the code in the section-main-product.css, but it looks perfect. thank you so much!

1 Like
9

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.

10

hey @ZestardTech @oscprofessional

thanks for your solutions… is there a possibility to align product title and price in one line

Bildschirmfoto 2023-11-13 um 15.09.06.png
Bildschirmfoto 2023-11-13 um 15.09.06.png434×176 6.61 KB

using spotlight theme.

many thanks in advance