My url is pourdecisionsdistillery.com, I am trying to change the outline of the banner button on the homepage that says Shop Now to a solid white border. I cannot seem to get it to change
Topic summary
Goal: change the homepage image banner’s “Shop Now” button outline to a solid white border in Shopify’s Dawn Theme v11.0.
Proposed solutions:
- Add CSS via Theme Customize (Custom CSS on the image banner): .button–secondary { border: 1px solid #fff; } This targets secondary-style buttons and forces a white border.
- Edit theme code (base.css) and add: .banner__buttons .button::after { border: 1px solid white; } This applies a white border to the button’s ::after pseudo-element within the banner.
- Edit theme code (base.css) and add: banner__buttons:after { box-shadow: none !important } This removes a box-shadow that may be creating the current outline appearance.
Implementation paths: Online Store > Themes > Customize (for Custom CSS) or Online Store > Themes > Edit code > base.css.
Notes:
- CSS (styling code) and base.css (theme stylesheet) are central to the fix. Selectors like .button–secondary and ::after define where styles apply.
- Screenshots were provided to illustrate the expected visual result.
Status: No confirmation from the original poster; resolution remains open.
Hi @madspeed50
You can do that by adding this CSS code in your Custom CSS of that image banner in your Online store > Themes > Customize
.button--secondary {
border: 1px solid #fff;
}
1 Like
Hello @madspeed50 
Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom
.banner__buttons .button::after {
border: 1px solid white;
}
The result
Hope it helps!
Hi @madspeed50 ,
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at the bottom of the file → Save
banner__buttons:after{box-shadow:none !important}
Hope my solution works perfectly for you!
Best regards,
Oliver | PageFly