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.
5

Works great thank you !

1 Like