I want to remove the border on quick add button - Dawn theme

Store Design
, , ,

Topic summary

A user seeks to remove the border line from the quick add button on their Shopify store using the Dawn theme.

Problem:

  • Visible border appears on the quick add button (shown in screenshot)
  • Store is in preview mode with password protection

Solutions Provided:

Two community members offered CSS-based fixes:

  1. First solution targets the button’s pseudo-element:

    • Add code to base.css: button.quick-add__submit:after { box-shadow: none !important; }

  2. Second solution targets the button directly:

    • Add to base.css or component-button.css: .quick-add__submit { border: none !important; box-shadow: none !important; }

Implementation:

  • Navigate to Online Store > Themes > Actions > Edit Code
  • Locate the appropriate CSS file in Assets folder
  • Paste the provided code at the bottom

Both solutions use !important flags to override existing styles. The discussion remains open pending confirmation from the original poster.

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

Screenshot 2025-08-01 121953
Screenshot 2025-08-01 1219531897×946 127 KB

I want to remove the button border line on quick add button in my store

website link: https://mxc71fbmuklt43xr-93050175853.shopifypreview.com
password: amber

2 Likes
2

Hello @Sivadarshan ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
button.quick-add__submit:after {
    box-shadow: none !important;
}

image
image1899×755 112 KB

Let me know if you need further assistance!

3

Hi,

Hope this will help

  • At CSS file like Assets > base.css or Assets > component-button.css, Add Custom CSS

CSS example

.quick-add__submit {
  border: none !important;
  box-shadow: none !important;
}