PopPage Background Color (Broadcast theme)

Topic summary

Goal: make the product size popup (modal) in the Broadcast theme have a solid, non‑transparent background (ideally black).

Key steps proposed:

  • Add CSS in the theme’s Assets (base.css/style.css/theme.css) targeting .product-modal__content to set a background color, and adjust text/borders via .product-modal__outer. Examples given used white or gray (with !important) to demonstrate control.
  • A store URL was requested to assist further.
  • When CSS was mistakenly placed in theme.css with Liquid/JS, guidance was to move the code to the correct location (before the tag in theme.liquid), after which the change worked.

Technical notes:

  • CSS (Cascading Style Sheets) controls visual styles.
  • “Modal” refers to the popup overlay for product details.
  • Provided selectors: .product-modal__content (background), .product-modal__outer (text and table borders).
  • Images/screenshots illustrated the result but are not essential to reproduce.

Outcome:

  • Popup background styling was successfully applied after fixing code placement; color can be set as desired via CSS.

Current status:

  • Resolved for the popup. A new, unanswered request asks for reducing the home page collection size on mobile only (no solution yet, discussion ongoing).
Summarized with AI on December 15. AI used: gpt-5.

Thank you so much for your quick reply. Like this ?