Customizing/Changing Checkout Colors

Getting your checkout to match your brand is very important, and with the Spiffy Checkout Editor, you have the option to change the colors of a wide range of elements on the checkout. From the checkout button, to the order total, and everything in between, Spiffy has you covered!

From the Design tab in the Spiffy Checkout Editor, you will be able to set an automatic brand color, or fine-tune a wide range of colors, via the advanced color settings!

Getting Started

From the Spiffy Checkout Editor, click on the Design tab.

In the Design settings, you will have the option to start by selecting a general Brand Color

(NOTE: This will not affect the checkout button color. To change the checkout button color, select Advanced Color Settings, and Checkout Button)

To fine-tune any colors, or adjust specific colors manually, click to Show Advanced Color Settings.

Just select any of the options to display available color pickers. Here is a preview of all of the options that you have available!

Additional Info:

To reset any specific color option, just hover over it and click the reset icon. This will reset the color based on the general Brand Color that is currently selected.

To reset all colors back to the default, just hover over Brand Color and click the reset icon, or click the reset icon at the top of the Checkout Design settings.

Once you have finished customizing your checkout colors, simply Save at the top of the checkout design settings, and when you are ready, Publish your checkout!

Got a question? Send us an email over at