How can I change alignment of popup button and Buy buttons in Dawn theme?

Store Design

Topic summary

A user sought help repositioning the popup button and Buy buttons on their product page in the Dawn theme. They wanted the popup button aligned to the left with the Buy buttons positioned to its right, rather than stacked vertically.

Solution provided:

  • Navigate to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS
  • Insert custom CSS code that:
    • Adjusts padding and margin for the product form container
    • Sets absolute positioning for the popup button
    • Removes bottom margin from quantity input

Outcome:
The CSS solution successfully achieved the desired horizontal alignment. The user confirmed it worked and marked the response as helpful.

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

Hello,

In my product information page, I want to change alignment of popup button and Buy buttons.

Right now it is looking like this

pic 1
pic 1367×292 4.14 KB

I want to change alignment like this.

pic 2
pic 2337×175 5.54 KB

Could you please help?

1 Like
2

Hi @kb2528

Please, share your store URL. Thanks!

3

Hi @kb2528

Could you please share the store URL so we can check it further?

Looking forward to hearing from you soon. Thank you!

Best,
Daisy - Avada Support Team.

4

Hello, @kb2528
Please share “Store URL”
Thanks!

5

url :- https://pgf-dev.myshopify.com/

pass :- brucri

6

Hi @kb2528

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
modal-opener.product-popup-modal__opener.quick-add-hidden + div:has(product-form.product-form) {
    padding-left: 100px !important;
    margin-top: -40px !important;
}
modal-opener.product-popup-modal__opener.quick-add-hidden {
    position: relative !important;
}
modal-opener.product-popup-modal__opener.quick-add-hidden > button.product-popup-modal__button {
    position: absolute !important;
    top: 10px;
}
div.product-form__input.product-form__quantity {
    margin-bottom: 0 !important;
}

Here is the result:

image_720.png
image_720.png720×532 103 KB

I hope this helps

Best,

Daisy

7

I tried it and it worked!!

Thank you very much Daisy!

8

HI @kb2528

If it helps, I will really grateful if you can give it a Like or marking it as a Solution!

Best,

Daisy

1 Like