Dawn theme Quick Add button border remove

Store Design
, , , , , , , ,

Topic summary

A user needs to remove the border from the Quick Add button on product cards in the Dawn theme’s latest version.

Two CSS solutions were provided:

  1. Target the button directly - Add to theme.css or base.css:

    .quick-add__submit {
    --border-offset: 0 !important;  
}

  2. Hide the pseudo-element - Add to base.css:

    .card-wrapper button:after {
    display: none;
}

Implementation steps:

  • Navigate to Online Store → Themes → Actions → Edit Code
  • Locate the appropriate CSS file (theme.css or base.css)
  • Paste the chosen code at the bottom of the file

Both solutions target the border styling but use different approaches - one modifies the border offset variable, the other removes the after pseudo-element creating the border effect. The discussion remains open with no confirmation of which solution was implemented.

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

I’m using dawn theme’s latest version in that I need to remove the border only in quick look button.

Website : https://vle50pn28muxgpf9-73415852291.shopifypreview.com

Password: 2512

Screenshot 2025-01-09 170013.png
Screenshot 2025-01-09 170013.png675×180 42.1 KB

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.
.quick-add__submit {
    --border-offset: 0 !important;  
}

Result:

websensepro_0-1736762937350.png
websensepro_0-1736762937350.png1363×532 413 KB

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

3

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:
.card-wrapper button:after {
    display: none;
}

Let me know if you need further assistance!

1 Like