Background of product information page is still in the base theme's color. How Do I change?

Technical Q&A
,

Topic summary

Issue: Product information page background remains the base theme color; user wants a lavender (#C9A0DC) background consistent across the store.

Actions taken:

  • Store URL provided. Initial CSS targeting a specific section in base.css/style.css/theme.css did not affect cart and collection backgrounds.
  • CSS then added in theme.liquid (the main layout file) before , which changed backgrounds sitewide. However, raw code appeared at the top of the site, and font sizes changed (About Us page became very small).

Follow-up requests:

  • Clarify/fix why code is visible at the top (likely CSS inserted without proper tags or incorrect placement) and restore original font sizing.
  • Make Featured Collection tabs link directly to product pages; if not possible, remove the white bar between tabs and the collections list.
  • Update cart page button color to #BFFB7B with white text.

Status:

  • Partial success (background change applied globally), but new issues introduced. Multiple styling and UX adjustments are requested. No final solution provided yet; guidance on correct CSS insertion/scoping, link behavior, spacing, and button styling is pending.
Summarized with AI on January 20. AI used: gpt-5.
1

Background of product information page is still in the base theme’s color. How Do I change? I want to change it to my scheme that I have set for the rest of the store. Just don’t know how to access this.

1 Like
2

Hi @wisteriafalls

Would you mind to share your Store URL website? with password if its protected. Thanks!

1 Like
3

www.wisteriafalls.shop

here it is. thaanks for the help in advance

1 Like
4

@Made4uo-Ribe

5

Thank you for the information. Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
section#shopify-section-template--20738714534186__main {
    background: #c9a0dc;
}
  • And Save.

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
6

Thanks for your help. this did not work tho. Still is the same color. Look at the cart, look at the background of the collections. still the regular color. need it to be that lavender color (C9A0DC) I’m looking for.

1 Like
7

Check this one if it change all the background pages.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “theme.liquid” folder, paste it before the tag.
  • And Save.

I hoe it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
8

Yes that works thank you. But now my website has the code on the top of the website. Is that a user glitch?

9

If I could ask your help some more, this changed my font size and makes the about us page very small. How do I fix that? Not only that, I want my featured collection tab go straight to the product page, how do I do that? If I can’t, then how do i get rid of that white bar in between the tabs and the collections list? Thanks man! really appreciate it.

10

One more thing, on the cart page, the button is blue. Can we change it to #BFFB7B with white as the text. Thanks!