Shopify themes, liquid, logos, and UX
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.
www.doecoffee.com
I want both only to be darker without any colour.
Thank you for your help in advance!
Solved! Go to the solution
This is an accepted solution.
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
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
Same happen when I click on the navigation: "The three horizontal lines"
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%;
}
This is an accepted solution.
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
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
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.
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
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
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025