How to change page color in Debutify Theme

Store Design
,

Topic summary

A user wants to change purple-colored elements to green on their product page at astropots.com, specifically targeting the add-to-cart button and quantity selector controls.

Multiple solutions provided:

• Method 1 (Moeed): Add custom CSS via theme.liquid file, placing code above the </body> tag

• Method 2 (Made4uo-Ribe): Edit main.css/base.css in the Asset folder, targeting .btn.btn--primary, .product-quantity__button elements, and product select options

• Method 3 (Tech_Coding): Insert CSS in theme.liquid before </body>, focusing on the .js-product-add-to-cart button with green background and border-color

• Method 4 (websensepro): Place CSS before </head> tag in theme.liquid

• Method 5 (ZestardTech): Add CSS to theme.css in Asset folder, including hover states for the add-to-cart button

The user confirmed the general approach but noted that hover and border colors still show purple, indicating the solution needs refinement. All approaches involve custom CSS targeting specific button classes with background: green and border-color: green properties, often using !important flags.

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

Hi @astropots

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

websensepro_0-1727870234493.png

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!