Dawn Theme Sticky add to cart trubleshooting for custom code

Store Design
, , , , , , , ,

Topic summary

Issue: In the Shopify Dawn theme (latest), a custom sticky add-to-cart on the product page displays the button text on two lines. The goal is a single-line button that spans to the edge. A screenshot was provided to illustrate the overflow, and a storefront URL with password was shared for reference.

Proposed fix: Add a CSS rule at the end of theme.css or base.css to force the sticky ATC button to full width: set width: 100% !important on the selector button.product-form__submit.button.button–full-width.button–primary.sticky-atc-button.

Context: The image is central to understanding the layout issue (button width/text wrapping). No JavaScript changes were suggested; only a CSS adjustment.

Status: No confirmation from the original poster on whether the fix resolves the issue; discussion appears open/awaiting feedback.

Summarized with AI on December 13. AI used: gpt-5.
1

I’m using dawn theme latest version in that i have implemented Sticky add to cart via custom code in product page in that Add to cart button is comming in 2 lines, But I need is 1 line till the edge of website. For reference i’ll attach the image. The orange mark is for the button size and text in one line.

Website: https://mannavan.myshopify.com/

Password: offnorth

Screenshot 2024-12-03 182905.png
Screenshot 2024-12-03 182905.png1891×113 39.4 KB

Thanks in advance.

1 Like
2

Hi @Sivadarshan

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
button.product-form__submit.button.button--full-width.button--primary.sticky-atc-button {
    width: 100% !important;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

1 Like