How can I center my variant and buy button on Dawn theme?

Store Design
, , , , ,

Topic summary

A user’s product variant selector and buy button shifted left on desktop in their Dawn theme Shopify store.

Solution Provided:

  • Add custom CSS to base.css, style.css, or theme.css in the Assets folder
  • The CSS code centers the product form container and buy button using flexbox display and auto margins

Current Status:

  • The provided CSS successfully centered the buy button
  • However, the variant options remain uncentered
  • User is requesting additional CSS code to center the variant selector as well

The discussion remains open with a partial solution implemented.

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

Hi, not sure what I did but on my desktop, I need help centering my variant + buy button as it shifted left.

Site: https://07f83a.myshopify.com/products/the-peignoir-top

pass: koredoko

1 Like
2

Hi @skymochi

Check this one.

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:

.product-form__input {
     max-width: 100% !important;
}
.product__info-container form {
    margin: auto !important;
    width: 44rem !important;
}
product-form.product-form {
    display: flex !important;
}

And Save.

Result:

Made4uoRibe_0-1702325001739.png
Made4uoRibe_0-1702325001739.png890Ă—550 65.4 KB

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

1 Like
3

Hi, this worked for the Buy Button, but not for the Variant Options.

Is there a code for that?