Streaming live at 10am (PST)

How to customize Snipcart's checkout colors through custom code

I’m looking to slightly change Snipcart’s default theme by modifying their stylesheet. I just want to change the colors of the cart and checkout to match my site’s existing color scheme. I’ve looked at all their documentation on how to do this sort of thing but it has left me lost. If anyone has done this before or knows how to go about doing it through Webflow’s custom code I would greatly appreciate some assistance.

I don’t think a read-only will be much help on this as it’s all custom-code based and Snipcart won’t work within the designer but I can add if someone requests it.

Appreciate any advice. Thanks!

Hey there @MasonN,

Dominic from Snipcart here :slight_smile: I’m not super familiar with Webflow yet, but I might be able to help! Do you have access to writing custom CSS in webflow? If so, you can use the Theming feature of Snipcart.

You might have already read this so let me know if you have questions about implementing this feature. Here is a summary:

All the cart colors are applied as CSS variables (ie: --color-buttonPrimary). These variables can be overridden by you to change the default values. All you need to do to override these variables is write custom CSS on your site, that could look like this:

/* Targets the snipcart div */
#snipcart {
  /* Applies the color red to the primary button */
  --color-buttonPrimary: red;
}

Let me know if this helps,
Cheers!