Make the Add to Cart button wider and remove the black border box

Store Design

Topic summary

A user working with Shopify’s Dawn theme wanted to:

  • Make the Add to Cart button wider
  • Remove the black border box around it

The solution involved adding custom CSS code to the theme files (base.css/theme.css/style.css/main.css/custom.css).

Key CSS changes:

  • Set .product--no-media .product-form>.form to max-width: 100% and width: 100%
  • Applied responsive styling for mobile devices (max-width: 768px)
  • Added border-radius: 25px to .product-form__submit .button:after

Resolution: The user confirmed the solution worked successfully. The issue is now resolved.

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

Hi,

I am using the Dawn theme, and I would like my Add to Cart button to be wider in general and to remove the black border box around it. Below, I am attaching a screenshot to show exactly what I mean.

Here is my link: https://shopapexaura.com/products/manual-apple-peeler-with-stainless-steel-blades

IMG_3391(2).jpg
IMG_3391(2).jpg1170×435 28.8 KB

2

HI @ApexAura ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

.product--no-media .product-form>.form {
    max-width: 100% !important;
    width: 100%;
}

@media (max-width: 768px){
.product--no-media .product-form>.form {
    max-width: 100% !important;
    width: 100%;
}

.product-form__submit .button:after{
  border-radius: 25px !important;
}
}

CodingFifty_0-1738420997005.png
CodingFifty_0-1738420997005.png414×513 19.5 KB

1 Like
3

Hey, Thank you for your help, it worked

4

You’re welcome! @ApexAura