How to remove black border on quick add buttons

Store Design
, ,
1

Hoping to get some help on an issue with quick add buttons

Theme: Dawn

Location: Home Page

Block: Featured Collection

I have a featured collection block on my home page, but no matter what I try, I cannot get rid of the black border around the quick-add buttons, as displayed below. I’ve checked in the base.css file, quick-add.css file and can’t find any reference to a black border. I updated quick-add.css with the below code, and the black border still appears:

.quick-add-modal__toggle {
background-color: #E6C068;
border: none;
border-radius: 0%;
color: rgba(var(–color-foreground), 0.55);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 1.2rem;
z-index: 5;
width: 4rem;
position: fixed;
top: 1.5rem;
right: 1.5rem;
}

Example:

GloSkin_1-1711898283381.png
GloSkin_1-1711898283381.png1331×573 190 KB

2

Hello @BeautyEcommerce

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.button:before{ box-shadow: unset !important; } .button:after{ box-shadow: unset !important; } .button:not([disabled]):hover:after{ box-shadow: unset !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like
3

Thank you so much for your help! That worked. Greatly appreciate it!