Checkout Plus Styling

How to Use Corso Custom CSS Variables in Your Code

This guide explains how to implement Corso’s custom CSS variables into your own site or Shopify theme using standard CSS and the :root{} selector. This will allow you to customize Corso’s checkout plus elements with ease.

What Are CSS Custom Properties?

CSS custom properties, also known as variables, let you define reusable values in one place and apply them across your stylesheets. This makes it easy to update designs consistently and maintain cleaner code.

Adding Custom Variables to Shopify

Log in to your Shopify Admin Panel
Navigate to: Settings > Checkout Plus
Under Checkout Plus Elements you will be able to add Custom CSS to the Opt-Out Checkout Button or Checkout Plus Info.

🔧 Tip:

Be sure to include these variables inside the :root block in order to define them globally across your entire site. This allows you to reuse consistent styles (like colors, spacing, and fonts) without duplicating values, and makes updating your design as simple as changing one line. For example:

Checkout Plus Info:

:root {
  --corso-info-bg-color: rgb(255, 0, 0);
  --corso-modal-description-font-size: 100%;
}

Opt-Out Checkout Button:

:root {
  --corso-button-padding: 10px;
}

Now that you understand the structure, simply paste any of the variables below into your Custom CSS field and watch the design transform effortlessly.

📋 Corso Variable Reference Tables

Checkout Plus Info Field Variables

Variable	Description	Example
`--corso-info-bg-color`	Background color of the info section	`--corso-info-bg-color: #f5f5f5;`
`--corso-info-border-color`	Border color (transparent = hidden)	`--corso-info-border-color: rgba(0, 0, 0, 0);`
`--corso-info-max-width`	Max width of the container	`--corso-info-max-width: 100%;`
`--corso-info-padding`	Padding inside the box	`--corso-info-padding: 5px;`
`--corso-info-margin`	Outer spacing	`--corso-info-margin: 0px;`
`--corso-info-border-radius`	Corner roundness	`--corso-info-border-radius: 0px;`
`--corso-info-border-width`	Thickness of border	`--corso-info-border-width: 1px;`
`--corso-info-image-width`	Width of image in box	`--corso-info-image-width: 40px;`
`--corso-info-image-display`	Image layout style	`--corso-info-image-display: inline;`
`--corso-info-label-font-size`	Font size of labels	`--corso-info-label-font-size: 85%;`
`--corso-info-label-font-weight`	Thickness of label text	`--corso-info-label-font-weight: bold;`
`--corso-info-text-color`	Text color	`--corso-info-text-color:rgba(17, 0, 255, 0.5);`
`--corso-info-text-line-height`	Line spacing	`--corso-info-text-line-height: 1;`
`--corso-info-description-font-size`	Description font size	`--corso-info-description-font-size: 75%;`
`--corso-info-description-display`	Layout of description	`--corso-info-description-display: flex;`
`--corso-info-description-text-align`	Text alignment	`--corso-info-description-text-align: left;`

Checkout Plus Info Window Variables

Variable	Description	Example
`--corso-modal-text-color`	Modal text color	`--corso-modal-text-color: rgb(0, 0, 0);`
`--corso-modal-title-font-size`	Title font size	`--corso-modal-title-font-size: 100%;`
`--corso-modal-description-font-size`	Description font size	`--corso-modal-description-font-size: 100%;`
`--corso-modal-text-line-height`	Line spacing in modal	`--corso-modal-text-line-height: 1.5;`
`--corso-modal-border-radius`	Rounded corners for modal	`--corso-modal-border-radius: 12px;`
`--corso-modal-box-shadow`	Drop shadow effect	`--corso-modal-box-shadow: 5px 5px 20px 7px #f5f5f5;`

Opt-Out Checkout Button Variables

Variable	Description	Example
`--corso-button-max-width`	Button max width	`--corso-button-max-width: 100%;`
`--corso-button-text-color`	Button text color	`--corso-button-text-color: rgb(0, 0, 0);`
`--corso-button-text-decoration`	Text styling (e.g. underline)	`--corso-button-text-decoration: underline;`
`--corso-button-border-color`	Button border color	`--corso-button-border-color: #f5f5f5;`
`--corso-button-border-width`	Border thickness	`--corso-button-border-width: 0px;`
`--corso-button-padding`	Button inner spacing	`--corso-button-padding: 0px;`
`--corso-button-margin`	Button outer spacing	`--corso-button-margin: 0px;`
`--corso-button-font-size`	Font size for button text	`--corso-button-font-size: inherit;`
`--corso-button-text-align`	Text alignment in button	`--corso-button-text-align: center;`
`--corso-button-border-radius`	Corner style of button	`--corso-button-border-radius: 0px;`

You can now reference these variables in your site’s CSS and component files for cleaner, more maintainable styles.

Visual Representation of Styles

Next, is a visual guide that demonstrates how select variables can affect the look and feel of Corso’s checkout components.