How do i make the grey box with the price and name of the product under the product photo white?

Store Design

Topic summary

A user wants to change the grey background box containing product names and prices on their collection page to white, or remove it entirely to show just text.

Multiple Solutions Provided:

Several support teams offered CSS-based solutions with similar approaches:

  • Primary method: Add custom CSS code to the theme.liquid file before the </head> or </body> tag
  • Alternative method: Add CSS to the main stylesheet (main.css, base.css, style.css, or theme.css) at the bottom

Key CSS code pattern:

.card.card--card.card--media.color-scheme-2.gradient {
  background: transparent !important;
}

or

.card--card.card--media>.card__content {
  background: #fff;
}

Steps:

  1. Navigate to Admin → Online Store → Themes → Edit code
  2. Locate theme.liquid or the main CSS file
  3. Insert the provided CSS code
  4. Save changes

All responders included screenshots showing the implementation steps and expected results. The discussion remains open pending confirmation from the original poster.

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

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg
z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg1865×854 94.6 KB

  • Then find the theme.liquid file.
  • Then add the following code at the before tag and press ‘Save’ to save it.
  • Here is the result you will achieve:

BSSTekLabs_0-1725035378009.png
BSSTekLabs_0-1725035378009.png1896×809 227 KB

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