How to make featured collection background transparend in Spotlight theme

Shopify Discussion

Topic summary

Main issue: The poster wants the “featured collection” section’s background to be transparent in Shopify’s Spotlight theme but can’t achieve it despite trying multiple CSS snippets and placements.

Latest response: A support rep offers general CSS debugging guidance rather than a theme-specific fix:

  • Identify the exact element causing the issue.
  • Use browser developer tools (Inspect) to view applied/overridden styles and conflicts.
  • Validate and simplify CSS by removing unnecessary rules.
  • Clear browser cache to ensure latest styles load.
  • Ensure selector specificity (more precise selectors override less specific ones).
  • Test across different browsers for rendering differences.

Outcome/status: No concrete code solution or theme-specific instructions were provided. The issue remains unresolved; next steps are to follow the debugging process to isolate the correct selector and conflicting styles. No images or code snippets were shared.

Summarized with AI on December 31. AI used: gpt-5.
1

I have scoured every where I possibly can. Tried every CSS code I could find… As well as placement… Please help before I pull all my hair out!

2

Hi @dwilcox ,
This is Theodore from PageFly - Shopify Page Builder App.

Debugging CSS can be frustrating! Here’s a quick guide to help:

  1. Pinpoint the issue: Identify the exact element with the CSS problem.

  2. Inspect the element: Use browser developer tools to see applied styles and identify conflicts.

  3. Validate and simplify: Use online tools to check for errors and isolate the problem by removing unnecessary code.

  4. Clear cache: Clear your browser cache to ensure you’re seeing the latest styles.

  5. Specificity: Make sure your CSS selectors are specific enough to target the desired element.

  6. Test across browsers: How a page renders can vary, so test in different browsers.

Best regards,
Theodore | PageFly