How to fix my transparent quick add background

Store Design

Topic summary

A user seeks CSS code to change the transparent background of their quick-add modal to white on their Shopify store. The issue appears in a popup that displays when clicking “choose options” on product listings.

Initial Solutions Provided:

  • Two approaches offered: adding CSS to theme files or modifying the quick-add.css file directly
  • Code targets .quick-add-modal__content-info class with background: #fff

Evolving Requirements:

  • After initial fix, user identifies additional transparent areas needing adjustment
  • User clarifies wanting the product image background area white while keeping the outer modal overlay transparent
  • Multiple code iterations provided, but confusion emerges about which specific areas should be white versus transparent

Current Status:

  • Discussion remains unresolved as the user’s exact requirements are unclear
  • Latest attempt produced opposite results from desired outcome
  • Helper requests further clarification on which specific sections need color changes

Screenshots are central to understanding the specific UI elements being discussed.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hello, can someone give me the code to fix this transparent background whenever you click the choose options button? I want it to be white, Any help is greatly appreciated!

My site is https://royalsurge.shop/collections/all

Screenshot 2025-04-07 at 4.10.13 PM.png
Screenshot 2025-04-07 at 4.10.13 PM.png3448×1917 817 KB

2

you have two ways to do this:

Easy way: add the following css code anywhere in your theme.

.quick-add-modal__content-info {
  background: #fff!important;
}

Correct way: find the file “quick-add.css” and add the background here

.quick-add-modal__content-info {
  --modal-padding: 2.5rem;
  padding-right: 4.4rem;
  display: flex;
  overflow-y: auto;
  padding: var(--modal-padding);
  height: 100%;
  background: #fff;
}
3

Please paste this code in the end of quick-add.css file.

.quick-add-modal[open]{
    background: #0000005c !important;
}
.quick-add-modal__content-info{
    background: white !important;
}

Results are amazing:

thescriptflow_0-1744057904138.png
thescriptflow_0-1744057904138.png1920×957 189 KB

Paste this code and check and thanks me later by like it and mark is solution.

4

Thank you so much! Also behind the product is still transparent, how can i make that white too? Thanks in advance!

ExoticSouls_0-1744057955640.png
ExoticSouls_0-1744057955640.png3390×1900 517 KB

5

Thank you! Behind the product is still transparent, how can i make that white too?

6

yes here is updated code.

.quick-add-modal[open]{
    background: white !important;
}
.quick-add-modal__content-info{
    background: white !important;
}
7

go to your “base.css” file and update the following code:

.media--transparent {
  background-color: #fff;
}
8

Hey @DaveedValencia nevermind the code you provide will work globally. So consider provide code that work just that @ExoticSouls want.

Thanks

9

Sorry, i wanted the blue area to still be transparent but the red area to be white!! Let me know what i can do for that!

Screenshot 2025-04-07 at 4.48.46 PM.png
Screenshot 2025-04-07 at 4.48.46 PM.png3450×1921 492 KB

10

Do this please.

.quick-add-modal[open]{
    background: white !important;
}
.quick-add-modal__content-info{
    background: transparent !important;
}
11

That doesn’t work. Same opposite of how i want it.

12

I want more clarification please.