How to change the background colour of filtering part

Store Design
, , , ,

Topic summary

Goal: change the white background of the filtering/product grid area on a collection page via CSS.

Context and steps:

  • Store URL was requested and provided (otternailart.com) to target the correct elements.
  • Solution 1: Edit theme.liquid (Online Store → Edit code) and add custom CSS near the end of the file (above ) to override the default background.
  • Solution 2: Alternatively, add the custom CSS before in theme.liquid.
  • Solution 3: Edit Assets/base.css and add a specific rule to set the background color, e.g.:
    .section-template–20370813878546__product-grid-padding { background: red !important; }
    (Adjust color as desired.)

Notes:

  • Screenshots illustrated the target white areas and the successful result after applying CSS.
  • theme.liquid is the main layout file in Shopify; base.css is a common stylesheet.

Outcome:

  • The original poster confirmed the change worked and thanked contributors.
  • No remaining issues were raised; the thread appears resolved.
Summarized with AI on January 15. AI used: gpt-5.
5

Hi @ottery

You can follow the following steps:

  1. Please go to the Online Store
  2. Then Edit Code
  3. Please find the theme.liquid file
  4. Before end of Please add following code.

laddisahsi_2-1697108334739.png
laddisahsi_2-1697108334739.png1439×587 208 KB

laddisahsi_3-1697108356263.png
laddisahsi_3-1697108356263.png1439×443 304 KB

If this solution is worked, then please Like this and Mark this as accepted solution!

Laddi

1 Like