Main issue: A pink overlay appears in the Dawn theme when opening the product quick-add (Choose options) modal and the mobile navigation (hamburger) menu. The requester wants a neutral dark overlay (no color tint), just darker.
Context: Screenshots were shared to illustrate the overlay; store URL provided (doecoffee.com).
Proposed solutions:
Other notes: A contributor offered UX tips (use coffee bean images for hover, keep thumbnails consistent). The requester appreciated and plans to update images.
Status: Actionable CSS fixes provided for both overlays; no confirmation yet that changes resolved the issue. Discussion remains open.
Hello,
I want to remove the pink overlay, it appears when I select a product and then “choose options” as you can see as follow:
The same happen I clicked the navigation: the three horizontal lines.
I want both only to be darker without any colour.
Thank you for your help in advance!
Open the quick-add.css template under assets folder and find the .quick-add-modal somewhere in the lines 12 to 24 and replace it with the code below. If you want lighter overlay decrease the background alpha from .5 to like 0.3 or if you want to make more darker increase it to like .7
.quick-add-modal {
box-sizing: border-box;
opacity: 0;
position: fixed;
visibility: hidden;
z-index: -1;
margin: 0 auto;
top: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, .5);
height: 100%;
}
Hi @Angela86
This is Henry from PageFly - Landing Page Builder App
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 bottom of the file → Save
quick-add-modal, .header__icon–menu[aria-expanded=‘true’]::before {
background: #00000073 !important;
}
Hope that my solution works for you.
Best regards,
Henry | PageFly
Your store looks great, and your products are impressive! Even though I’m not a caffeine enthusiast, I found myself wanting to buy your products, lol. Well done!I took a quick look at your collection and have a small suggestion: for the hover image on your product, you might want to consider using a picture of coffee beans. This could enhance the appeal by giving customers a closer look at the quality of your coffee beans. Also, make sure the thumbnail images are consistent to make your site look more polished and professional.
Hey Henry,
Thank you so much to take your time to give me a feedback of the website. I will communicate to the team to take picture of the beans.
I will see how I can change the thumbnail images and show the different kind of product.
Thanks again for your feedback! ???
Yeahhh, you are welcome @Angela86
