Customize the colors of your checkout and upsells. Checkout X takes the colors from the theme of your e-commerce store, however, you could always edit them. These colors won’t override the ones from your store’s pages before the checkout.

Custom Accent Color

This is the color of the small components on your checkout and upsells pages that are used to emphasize your color scheme. You could use HEX color codes or just choose from the color scheme in the Checkout X app.

Note: These are the components having the accent color on the checkout page.

Note: These are the components having the accent color on the upsell page.

Change your accent color by following these steps👇👇👇:

  1. Go to the Checkout X dashboard.

  2. Click on Configuration.

  3. Go to Customize Checkout.

  4. Find the field Custom Accent Color.

  5. Add your HEX color code in the field or choose one from the color scheme.

  6. Don’t forget to click Save Checkout.

  7. Done!

Custom Buttons Color

This is the color of the buttons on your checkout and upsells pages that is used to create an action feel. You could use HEX color codes or just choose from the color scheme in the Checkout X app.

Note: This is the action button having the color on the checkout page.

Note: This is the action button having the color on the upsell page.

Change the color of your buttons by following these steps👇👇👇:

  1. Go to the Checkout X dashboard.

  2. Click on Configuration.

  3. Go to Customize Checkout.

  4. Find the field Custom Buttons Color.

  5. Add your HEX color code in the field or choose one from the color scheme.

  6. Don’t forget to click Save Checkout.

  7. Done!

Custom Error Color

This is the color of the error messages on your checkout page that is used to emphasize that there is a problem. You could use HEX color codes or just choose from the color scheme in the Checkout X app. We would recommend you use a bright red color to create a stark contrast. If you want to edit the text of the error message, you could check our “Translations” article.

Change the color of your error messages by following these steps👇👇👇:

  1. Go to the Checkout X dashboard.

  2. Click on Configuration.

  3. Go to Customize Checkout.

  4. Find the field Custom Error Color.

  5. Add your HEX color code in the field or choose one from the color scheme.

  6. Don’t forget to click Save Checkout.

  7. Done!

Did this answer your question?