How to center Dawn Theme product information only + fonts and resizing menu buttons

Store Design
, , ,

Topic summary

A Shopify store owner using the Dawn theme wants to center product information (title, price, variant selectors) on mobile product pages while keeping the description left-aligned. They also need help resizing menu buttons and changing the title font to match a reference design.

Progress made:

  • Two community members (@suyash1 and @Ujjaval) provided CSS code snippets to add to base.css or theme.liquid files
  • The centering partially worked, but the price tag remains left-aligned despite multiple attempts
  • The original poster successfully applied some code but continues troubleshooting the price alignment issue

Outstanding issues:

  • Price element still not centering on mobile view
  • Menu button customization (font, sizing) not yet addressed
  • Request to remove one of two menu buttons (keep “add to cart,” remove “go to checkout”)
  • Product quantity selector removal from product page (while keeping it in cart section)

The discussion remains ongoing with back-and-forth troubleshooting between the store owner and helpers, focusing primarily on CSS modifications for mobile responsiveness.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I want to change the alignment of the product information on my Shopify product page. The product description should stay the same.
Please view pictures, the first picture (with the blue) is my store and the second picture is how I want it to be displayed. Also, how do I change the Title font to make it look like that and how do I resize the menu buttons to make them big las seen on the second picture ? And does the text within the Menu buttons automatically resize to match the buttons ? I am very new to this. Kind regards.

A775E40C-563D-4F0D-9951-6FD0509C1D46.png
A775E40C-563D-4F0D-9951-6FD0509C1D46.png828×1792 137 KB

6BDE5958-FF7E-4B9A-899F-FA297AAF261F.jpeg
6BDE5958-FF7E-4B9A-899F-FA297AAF261F.jpeg828×1331 52.3 KB

2

@JustInCase-de - can you please share this product page link?

3

this is the link

https://justincase-de.com/products/the-north-face-handyhulle-iphone-11-puffer-case-fur-iphone-11-6-1-down-jacket-phone-case-mit-weichem-tpu-khaki

4

@JustInCase-de - add this css to the very end of your base.css file

@media screen and (max-width:749px){
.product__text {text-align: center;}
.price {text-align: center;}
.product__tax{text-align: center;}
.variant-radios, variant-selects{text-align: center;}
.product-form__input .select {margin: 0 auto;}
}

suyash1_0-1672230108521.png
suyash1_0-1672230108521.png1366×768 125 KB

5

@JustInCase-de
put below css into theme.liquid file before closing tag

Ujjaval_0-1672230335512.png
Ujjaval_0-1672230335512.png1433×755 134 KB

Ujjaval_1-1672230361472.png
Ujjaval_1-1672230361472.png1401×681 29.9 KB

6

Thank you, that worked!

Its only the price tag that is still on the left ( https://justincase-de.com/products/the-north-face-handyhulle-iphone-11-puffer-case-fur-iphone-11-6-1-down-jacket-phone-case-mit-weichem-tpu-khaki ), how do i change that ?

Also, now that we have managed the centering, how do i change the menu buttons ?

Currently there are two menu buttons, add to cart (up) and go to checkout (below). How do I change it to only show one menu button, add to cart, and remove the other ? Also, I want to remove the product amount selection, only from the product page, but keep it within the cart section.

7

@JustInCase-de - did you add the given code? I do not see it in css file

8

yes, i copied and pastet at

9

Sorry, i have only changed it in my copy. this is the link. I copy and pasted as you recommended.

https://qrm7gamkovc0upis-64572260616.shopifypreview.com

10

@JustInCase-de - you can try my given code

11

Hi, thank you.

I tried it with your code, unfortunatly the price tag is still on the left. this is the preview link https://qrm7gamkovc0upis-64572260616.shopifypreview.com