Change breadcrumbs background color to the same color of my page

Store Design
, , , , ,

Topic summary

A user seeks to change the breadcrumb background color on their product page to beige, matching the rest of their page design. The breadcrumb section only accepts custom CSS.

Solutions Provided:

Multiple community members offered CSS code snippets to resolve the issue:

  • Method 1: Add CSS code to the theme.liquid file above the </body> tag
  • Method 2: Insert custom CSS directly in the theme customizer under Online Store > Themes > Customize

The recommended CSS targets .breadcrumbs__wrapper .breadcrumb with background: #cfaf6f !important (beige color code).

Outcome:

The original poster confirmed the solution works successfully. The discussion is resolved with working code provided by multiple contributors.

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

Hey @INKLY

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1727940174281.png
Moeed_0-1727940174281.png1886×828 148 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like