Product photo Padding background Custom Theme

Store Design

Topic summary

Request to set a uniform background behind all product images in a custom Shopify theme and fix a grey bar appearing on hover due to image ratio/margins. Example links and screenshots were provided to show the desired look and issues on the collection page, product page, and homepage.

Key changes implemented:

  • Set background color #f5f5f5 on product wrappers: .boost-supporter-wrapper, .product__item–image, and .product-image–container img.
  • Remove unintended image spacing by forcing margin: 0 on collection images. Different selectors were needed because the collection uses Boost Product Filter & Search (PFS) markup: .boost-supporter-wrapper img (didn’t work), then .boost-pfs-filter-product-item-image img (worked).

Where to add CSS:

  • Initially in Assets/custom.scss.liquid; later advised to place global CSS in Assets/theme.scss.liquid.
  • For Boost PFS-specific collection fixes, add in Assets/boost-pfs-custom.scss.liquid.

Outcome:

  • Background applied consistently; grey bar on hover eliminated.
  • Homepage and product page fixed; collection page resolved after targeting the correct Boost PFS selector.

Notes:

  • Images/screenshots were central to diagnosing the margin/ratio issue.
  • Discussion concluded with the issue resolved.
Summarized with AI on February 18. AI used: gpt-5.
1

Hello,

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

This is aan example

Greetings

2

@Storum ,

Welcome to the Shopify Community!

Please share your store URL WITH SCREENSHOT, so that I can check your issue and will back to you with a proper solution.

Have a Good Day!..

3

Hi,

Thanks for taking the time to help us out.

This is how our current website looks at the collection page https://quotrell.com/collections/new

Here is an example of the look we would like to achieve
https://gyazo.com/37ebf63c03c861b2d78964462224b283

Many thanks in advance.

4

@Storum

.boost-supporter-wrapper {
    background: #f5f5f5;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->custom.scss.liquid

5

Thank you very much, it works great.

Now when you hover over the product there is a grey bar when the model appears on top because of the ratio difference, is there a fix for this?

We also noticed that it doesn’t appear on our home page yet, the product background there is still transparant, is there a fix for this?

–

Productpage:
https://gyazo.com/f654ac72b022660ca59a3904c0370956

Homepage:
https://gyazo.com/e44c48c7b4bd5ad98e3c0b203a6cbb32

Many thanks in advance!

6

@Storum ,

.product__item--image {
    background:  #f5f5f5;
}
.product-image--container img {
    background:  #f5f5f5;
}
7

@Storum ,

.boost-pfs-filter-wrapper img {
    margin: 0;
}
8

Thanks! All this in the custom.scss.liquid?

9

@Storum ,

For all css

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

1 Like
10

Hi,

We still have the problem only on the product page.

https://gyazo.com/f654ac72b022660ca59a3904c0370956

You can see that little grey.

On the home page it works! Thanks

11

@Storum ,

I did not see on product page.

oscprofessional_0-1651204809808.png
oscprofessional_0-1651204809808.png1672Ă—976 111 KB

Use this css for collection pages

.boost-supporter-wrapper img {
    margin: 0;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->custom.scss.liquid

12

Hi,

Thanks for helping us again :slightly_smiling_face:

Yes on the product page it is good but on the collection it do not work.

I tried the code but it change nothing :disappointed_face:

13

@Storum ,

.boost-pfs-filter-product-item-image img {
    margin: 0;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->boost-pfs-custom.scss.liquid

14

Hi,

Yes its works thanks for helping us!

Have a great day!