Checkout Plus Visual Guide
Visual Representation of Styles
Section titled “Visual Representation of Styles”Below is a visual guide that demonstrates how to use custom CSS with select variables. These will affect the look and feel of Corso’s checkout plus components and allow for easy customization.
Checkout Plus Styling Examples
Section titled “Checkout Plus Styling Examples”This guide demonstrates how each CSS variable impacts your layout. Every example shows:
- The necessary variable within the Custom CSS field
- An image showcasing the change that will take place
Default Style
Section titled “Default Style”Each example begins with this default layout:
How to Apply Styles
Section titled “How to Apply Styles”Just paste your chosen CSS variable(s) into the Custom CSS field:
Minimal Look
Section titled “Minimal Look”This look uses only the basics for a clean, subtle style.
Example: Minimal Variables
Section titled “Example: Minimal Variables”In this instance, you will need to delete the information fields at the bottom of the checkout plus page. Then, add the following CSS variable to the Custom CSS field:
First:
Section titled “First:”Add the following CSS variable to the Custom CSS field of the Checkout Plus Info section:
:root { --corso-info-bg-color: transparent; --corso-info-label-font-weight: normal; --corso-info-padding: 0;}
It should look similar to this:
Section titled “It should look similar to this:”But wait, there’s more!
Section titled “But wait, there’s more!”The opt-out button doesn’t look quite right. To fix this, add the following CSS variable to the Custom CSS field of the Opt-Out Checkout Button section and make it a bit smaller:
:root { --corso-button-font-size: 80%;}
Perfect!
Section titled “Perfect!”Now all the elements blend together nicely.
Further Customization
Section titled “Further Customization”To further customize the look of your checkout plus, you can add the following CSS variables to the Custom CSS field.
Example: Customization Variables
Section titled “Example: Customization Variables”We want to add a bit more information to our Checkout Plus box, but have everything blend in seamlessly. We can do this by adding the following.
First:
Section titled “First:”Let’s change the text for our info box:
Add the following CSS variable to the Custom CSS field of the Checkout Plus Info section:
:root { --corso-info-bg-color: transparent; --corso-info-text-color: #676767; --corso-info-label-font-weight: normal; --corso-info-padding: 0;}
Add the following CSS variable to the Custom CSS field of the Opt-Out Checkout Button section:
:root { --corso-button-font-size: 80%; --corso-button-text-color: #676767;}
Finally:
Section titled “Finally:”Now we have a nice, clean look with a bit more information. Everything blends together nicely, and the text is still easy to read.
Forgetting Something?
Section titled “Forgetting Something?”You may want to change the text of the information modal, so it matches the rest of the information we just changed. To do this, you simply hit the “Edit” icon at the bottom of the Checkout Plus page. This will open an additional page where you can change the text.
We recommend changing the title to match the Checkout Plus info box. For example:
And there you have it!
Section titled “And there you have it!”You now have fully customized Checkout Plus elements that match your brand and style!
Extra customization
Section titled “Extra customization”To further customize each element of Checkout Plus, please refer to the previous page, “Checkout Plus Styling” for a complete list of CSS variables. You can use these variables to adjust the font size, color, and other properties of the Checkout Plus Info Box, Opt-Out Checkout Button, and even the Checkout Plus Modal!