[Share] How to change Product Detail Page Color

You can use these CSS code/tips to change Product Detail Page Color.

#1. All Product Detail Pages

You can open a Product > Hover on Edit > Click Edit Design

Next, hover on top right > Click Edit Section

Next, click Colors and change product detail page color here

#2. Specific Product

You can edit Product > Additional Info > Add a Code Block > Paste this code

<style>
  .section-background {
      background-color: #f1f !important;
  }
</style>

#3. Products belong specific Tag

Suppose you want to change product detail page color with products belong tag: Hand Craft

Use this code to Custom CSS box

body:has(article.tag-hand-craft) .section-background {
    background-color: #f1f !important;
}

#4. Products on specific shop page

You can add code to Shop Page Header Injection

<style>
.section-background {
    background-color: #f1f !important;
} 
</style>