How to change product background in a custom theme?

Topic summary

A user seeks help changing product backgrounds across their custom Shopify theme using CSS code. They provide screenshots showing the desired appearance versus the current state.

Solutions Provided:

Multiple community members offered CSS-based approaches:

  • Option 1: Add background-color: #3e2e2e; to .product-item__image-wrapper in theme.css
  • Option 2: Insert background: #2f2f5f; for .product-item__aspect-ratio at the bottom of theme.css
  • Option 3: Paste custom CSS code before </body> tag in theme.liquid file

Implementation Steps:

  1. Navigate to Online Store β†’ Theme β†’ Edit code
  2. Locate either Assets/theme.css or theme.liquid file
  3. Add the provided CSS snippet at the specified location

All solutions target product item containers with background color modifications. The discussion remains open regarding which approach the user ultimately implemented or found most effective.

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

Hello,

Could someone help where I can change the background of all my products with a code? In a custom theme

This is how it should look

This is now

The website is
https://monttega.com/collections/hoodies

1 Like

@Storum - add to the very end of your theme.css file

.product-item__image-wrapper {background-color: #e3e2e2;}

@Storum

@Storum

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
.product-item__aspect-ratio {background: #f2f2f5;}

Hello @Storum

It’s GemPages support team and glad to support you today.

I would like to give you a solution to support you.

  1. Go to Online Store β†’ Theme β†’ Edit code.

  2. Open your theme.liquid theme file.

  3. Paste the below code before :


Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.