How can I change my cart page color to match my header?

Store Design
, , , , ,

Topic summary

A user seeks help changing their Shopify cart page color from purple to match their header’s orange gradient (linear-gradient(315deg, #ffabdb, #ff3c0a)).

Problem:

  • Cart page displays in purple on both desktop and mobile views
  • User wants it to match the orange/fade variation from their header
  • Store preview link provided for reference

Solutions Attempted:

  • PageFly-Victor suggested adding CSS code to base.css file targeting .cart-items.page-width.is-empty > .cart__warnings > a.button
  • Second suggestion involved adding code to theme.liquid file before </body> tag
  • GemPages provided similar approach with theme.liquid modification and included screenshot reference

Current Status:

  • User reports neither solution resolved the issue
  • Cart page still appears purple on both views
  • PageFly-Victor requested preview link to investigate further

The discussion remains unresolved, with multiple CSS customization attempts unsuccessful.

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

Hello.

Store preview: https://swfh0hcg5v96p333-68796285242.shopifypreview.com

I need some help with making some adjustements to the colours of the cart page, for both computer/mobile views. I want the colour to be the same as in my header (orange variation/fade → [linear-gradient(315deg, #ffafbd, #ffc3a0)]) and not the the purple colour which is displayed. See picture below:

Andy106_0-1678291690492.png
Andy106_0-1678291690492.png313×400 27.7 KB

2

Hi @Andy106 ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

cart-items.page-width.is-empty > .cart__warnings > a.button {
    background: linear-gradient(315deg,#ffafbd,#ffc3a0)
}

Hope my answer will help you.

Best regards,

Victor | PageFly

3

Hello. Tanks for getting back to me, but this did not solve the problem. The cart drawer still appearss to be purple both on computer/mobile view

4

You can try another way below:

Step 1. Go to Online Store → Theme → Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before :
5

Thanks again, however, still no change…

6

Hello @Andy106 ,

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1678344919684.png
GemPages_0-1678344919684.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1678344938767.png
GemPages_1-1678344938767.png1532×868 66.2 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

7

Did you fix it yet? If not, can you give me the preview link so I can check it for you. Thank you