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

Topic summary

Goal: Change the cart page background (desktop/mobile) and mobile/desktop headers from purple to an orange gradient matching the site header (linear-gradient(315deg, #ffafbd, #ffc3a0)).

Proposed fixes:

  • Suggestion to add custom code in theme.liquid before (screenshots provided, code content not shown).
  • CSS provided to update menu drawer and a header menu list:
    • .menu-drawer__navigation-container { background: linear-gradient(315deg,#ffafbd,#ffc3a0) !important; }
    • ul#HeaderMenu-MenuList-3 { background: linear-gradient(315deg,#ffafbd,#ffc3a0); }

Outcome: The menu/subcategory color was successfully updated to the orange gradient. The cart page remains purple on both desktop and mobile.

Context notes:

  • CSS (style rules) and theme.liquid (Shopify layout file) are central to the customization.
  • Screenshots and the store preview link are key to understanding the specific areas needing the change.

Status: Partial resolution. Further guidance is requested to target the cart page elements; unresolved and ongoing.

Summarized with AI on January 30. AI used: gpt-5.

Hello.

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

I need some help with making some adjustements to the colours of the colour of the cart age 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:

Same colour adjustement to be made in the mobile section header, I want to change it from the purple colour to the orange of the header. See picture below:

Finally, the same colour change from purple to orange to me made of the desktop view subheader view:
See picture,

Thanks in advance for the help!

Hi @Andy106

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag


Hope this answer helps.

Best regards,

Victor | PageFly

@Andy106

add below css

.menu-drawer__navigation-container {
    background: linear-gradient(315deg,#ffafbd,#ffc3a0) !important;
}
ul#HeaderMenu-MenuList-3 {

    background: linear-gradient(315deg,#ffafbd,#ffc3a0);

}

Thank you for getting back. The menu/subcategory issue is fixed, however the cart page appears to be still purple, on both computer/mobile views. Any suggestestions for this?

Thanks in advance!

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