white box obstruction on featured collection

Store Design
, , ,

Topic summary

A Shopify store owner encountered white boxes appearing around “add to cart” text on their featured collection page at Hygiadental.com.

Root Cause:
Multiple respondents identified the issue as CSS styling applied to .focus-none span elements, specifically background: #ffffff !important; creating unwanted white backgrounds.

Proposed Solutions:
Three different approaches were suggested:

  • Option 1: Add custom CSS in theme.liquid before the </body> tag to override with background: unset !important;
  • Option 2: Locate and remove the problematic CSS rule directly from theme.css
  • Option 3: Add override code in theme.liquid before the </head> tag

Status:
The discussion appears resolved with multiple working solutions provided. Screenshots were shared showing the before/after results. All solutions target the same CSS property but differ in implementation method (override vs. removal).

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

For some reason these white boxes appeared around my add to cart text?
Thankyou guys

URL: Hygiadental.com

pw: melek

Screenshot 2024-07-31 at 2.47.08 PM.png
Screenshot 2024-07-31 at 2.47.08 PM.png1898×524 76.1 KB

1 Like
2

Hello @Anonymous

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

#collection-template--17256407892068__featured_collection_H7aarU .focus-none span { background: unset !important; }

niraj_patel_0-1722401942070.png
niraj_patel_0-1722401942070.png1312×273 83 KB

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

3

Hello @Anonymous
We have Checked Your Its some CSS issue
Go to online store > select theme > edit code > theme.css

.focus-none span {
  background: #ffffff !important;
}

Search and remove this CSS code

oscprofessional_0-1722401969261.png
oscprofessional_0-1722401969261.png1490×979 349 KB

See this

4

Hello @Anonymous ,
This is occur because of some css.
.focus-none span {
background: #ffffff !important;
}
you can remove or overwrite this css.

goto shopify admin.
Edit code of your theme.

and paste the code

body #MainContent.focus-none span { background: unset !important; }
5

BSSTekLabs_0-1722402116232.png
BSSTekLabs_0-1722402116232.png400×183 26.2 KB

  • Then find the theme.liquid file.
  • add this code above tag:
.focus-none span {
    background: none !important;
}
  • Here is the result you will achieve:

BSSTekLabs_1-1722402187526.png
BSSTekLabs_1-1722402187526.png1746×798 162 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.