"Add to Cart" and "Buy It Now" buttons are not aligned for the Empire Theme

Shopify Discussion

Topic summary

A user reports misalignment between “Add to Cart” and “Buy It Now” buttons in the Empire Theme on their Shopify store.

Issue Details:

  • Buttons appear visually misaligned on product pages
  • Screenshot provided showing the alignment problem

Resolution:

  • Another user requested the store link to diagnose the issue
  • A CSS fix was provided to add to the theme.css file:
    • Sets button width to 100%
    • Adjusts margin to 0px
    • Targets .product-form--action-button class

Status: Solution provided; implementation and confirmation pending from the original poster.

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

Hello all, I’m using the Empire Theme, as the screenshot below, the “Add to Cart” and “Buy It Now” buttons are not aligned, is there a way to fix this? Thank you

Screenshot 2022-11-01 221519.png
Screenshot 2022-11-01 221519.png749×161 3.12 KB

2

Can you share store link so we can help you with CSS to fix it?

3

helloo, here’s our store link: https://www.trekvue.com/

4

Add this CSS to theme.css file.

button.product-form--atc-button {
    width: 100%;
    margin: 0px;
}
1 Like