Checkout Styles
Customize the visual appearance of your storefront checkout page including colors, typography, branding, and layout.
Checkout Styles lets you control the look and feel of the single-page checkout experience. Changes made here are compiled into a custom CSS stylesheet that is applied to the checkout page and order details page on your storefront. This includes colors for buttons and accents, custom logo and banner images, font selections, form field styling, and footer links.
All style changes take effect immediately after saving. The compiled stylesheet includes a cache-busting value so returning visitors see the updated design without needing to clear their browser cache.
Editing Checkout Styles
Navigate to Settings > Checkout Settings > Checkout Styles in the admin sidebar. The page displays all customization options in a single scrollable form. Click Save at the top of the page to apply your changes.
Colors
| Field | Description |
|---|---|
| Accent link and focus color | Sets the color for hyperlinks and focused form elements on the checkout page. Default: #007bff. |
| Checkout buttons | Sets the background color for standard action buttons (e.g., Apply, Continue). Default: #007bff. |
| Checkout purchase buttons | Sets the background color for the final purchase/place order button, allowing it to stand out from other buttons. Default: #007bff. |
| Errors Color | Sets the color for validation error messages displayed during checkout. Default: #dc3545. |
Each color field uses a color picker. Click the color swatch to open the picker, or type a hex value directly.
Banner
| Field | Description |
|---|---|
| Background Color | Sets the banner area background color. Visible when no banner image is used or as a fallback. Default: #ffffff. |
| Use a custom banner background? | Checkbox. When enabled, the uploaded banner image is applied to the checkout page banner area. |
| Banner background image (1000 x 400)px | Upload a custom banner image. Recommended size is 1000 x 400 pixels. Accepted formats: JPG, JPEG, PNG, BMP, SVG. |
To remove an uploaded banner image, click the delete icon next to the file name.
Logo
| Field | Description |
|---|---|
| Logo Size | Controls the display size of the checkout logo. Options: None (hidden), 100% (full size), 75% (three-quarter size). |
| Tagline under logo | Text displayed beneath the logo on the checkout page. Leave blank to hide. |
| Custom checkout logo | Upload a custom logo image for the checkout page. Accepted formats: JPG, JPEG, PNG, BMP, SVG. If not set, the storefront default logo is used. |
Main Content
| Field | Description |
|---|---|
| Main content background color | Sets the background color for the main checkout form area (shipping, billing, payment fields). Default: #ffffff. |
| Use a custom main content background? | Checkbox. When enabled, the uploaded background image is applied to the main content area. |
| Main content background image | Upload a custom background image for the main content area. Accepted formats: JPG, JPEG, PNG, BMP, SVG. |
| Form fields | Controls the appearance of form input fields. Options: White (solid white background) or Transparent (blends with the content background). |
Order Summary
| Field | Description |
|---|---|
| Order summary background color | Sets the background color for the order summary panel that displays cart items and totals. Default: #e9ecef. |
| Use a custom order summary background? | Checkbox. When enabled, the uploaded background image is applied to the order summary panel. |
| Order summary background image | Upload a custom background image for the order summary panel. Accepted formats: JPG, JPEG, PNG, BMP, SVG. |
Typography
| Field | Description |
|---|---|
| Header Font | Google Font used for headings on the checkout page. Default: Roboto. |
| Body Font | Google Font used for body text, labels, and form fields on the checkout page. Default: Roboto. |
Available font options: Alegreya, Archivo, B612, BioRhyme, Cairo, Crimson Text, Frank Ruhl Libre, IBM Plex Sans, Karla, Lato, Lora, Montserrat, Muli, Playfair Display, Roboto, Rubik, Spectral, Titillium Web, Varela, Vollkorn.
Fonts are loaded from Google Fonts. If the header and body fonts are different, both are imported; if they match, only one import is generated.
Footer Links
Add up to 4 custom links that appear in the checkout page footer (e.g., Privacy Policy, Terms of Service, Return Policy).
| Field | Description |
|---|---|
| Name | The visible link text displayed in the checkout footer. |
| Url | The destination URL when the link is clicked. Use a full URL including https://. |
Click Add Footerlink to add a new link. The button is disabled when 4 links already exist. Click the delete icon next to a link to remove it.
Associations
Print Store
| Area | Effect |
|---|---|
Checkout page (Checkout.aspx) | The compiled CSS stylesheet is injected into the checkout page at render time. Font imports are added as Google Fonts @import statements. If no custom styles are saved, the default checkout stylesheet is used instead. |
Order details page (myorderdetails.aspx) | The checkout stylesheet is also applied to the customer-facing order details/tracking page so it matches the checkout branding. |
Single-page checkout API (SpcoApi) | The checkout API reads the styles JSON to pass logo settings (size, image, tagline), banner visibility, and footer links to the checkout front-end components. |
Related Pages
- Checkout Fields — configure the form fields that appear on the styled checkout page
- Checkout Settings — overview of all checkout configuration options
- Site Themes — manage the storefront theme that complements checkout styling