Style your checkout

You can customize the look and feel of your popup checkout to match your brand and improve the buyer experience. Use these settings to adjust the theme, logo, header, text, colors, and button styling.

In the FastSpring app, go to Checkouts > Popup Checkouts, then click Settings on the checkout you want to edit.
Open the Styling tab to view and edit the available options.

The sections below describe each area of popup checkout styling. Select a section or use the TOC on the right to jump ahead.

Checkout themes

Choose between the light and dark visual themes for your popup checkout.

Setting	Description	Available options
Template	Determines the overall visual theme for your checkout window.	Light Mode: Classic bright interface Dark Mode: Low-light interface for dark-themed websites

Note: Styling settings are unique per theme. Switching between themes does not transfer configuration values, but your previous settings are restored when you switch back.

Checkout title

Control the header area of your popup checkout, including the logo, title, and background styling.

Setting	Description	Available options
Checkout Logo and Title	Choose what displays at the top of the checkout window.	Show the first product’s icon and display name Show the predefined logo and first product’s display name Show the predefined logo and checkout title Show the predefined logo only Do not show a logo or checkout title
Checkout Title	Localized text shown below the logo. Only visible if a title option is selected above.	Text field with language selector
Logo for Retina Screens	Retina-quality logo for high-resolution screens. For best results, use a transparent 256×256 px .png. Note: If you provide only a retina logo, FastSpring automatically scales it for regular-resolution screens.	Image upload (.png, .jpg, .gif)
Logo for Regular Screens	Standard logo file for non-retina displays. Recommended only if you’re not providing a retina version.	Image upload (.png, .jpg, .gif)
Logo Placement	Defines how the logo aligns with the popup header area.	Place the logo inside the popup Place the logo overlapping the popup and the area over it
Header Background Color	Color applied to the header background area.	Color picker
Close Button Color	Color of the close (×) button.	Color picker
Close Button Color on Hover	Hover color for the close (×) button.	Color picker

Checkout text

Customize the color, size, and weight of the text elements that appear in your checkout title area.

Setting	Description	Available options
Checkout Title Color	Color for the text displayed in the checkout header.	Color picker
Checkout Font Size	Font size for the checkout title text.	12px–25px
Checkout Title Font Weight	Font weight for the checkout title.	Normal Bold
'View details' Color	Color of the “View details” hyperlink used for subscription terms.	Color picker

Tax text

Change the color of the tax line displayed under pricing.

Setting	Description	Available options
Tax Text Color	Sets the color used for the tax label and amount.	Color picker

Pricing block

Adjust how the subtotal and total prices appear in the checkout window.

Setting	Description	Available options
Pricing Text Color	Applies to the total amount at the top of checkout.	Color picker
Pricing Text Font Size	Sets the size of the pricing text.	12px–25px
Pricing Text Font Weight	Determines whether pricing text appears bold or normal.	Normal Bold

Other payment methods link

Customize the “Other payment methods” link that appears during checkout.

Setting	Description	Available options
Color for the 'Other Payment Methods' Link	Base color of the link text.	Color picker
Color for the 'Other Payment Methods' Link (on hover)	Hover color for the link text.	Color picker

Payment button

Customize the main “Pay” button shown at the bottom of your popup checkout.

Setting	Description	Available options
Button Color	Primary color of the payment button.	Color picker
Text Color	Text color of the payment button label.	Color picker
Button Color (on hover)	Color of the payment button background when hovered.	Color picker
Text Color (on hover)	Color of the payment button text when hovered.	Color picker

Corner radius

Adjust the roundness of the popup window and call-to-action (CTA) buttons.

Setting	Description	Available options
Window	Controls the border-radius of the checkout window.	0px–25px
CTA Buttons Corner Radius	Controls the roundness of all CTA buttons.	0px–25px

Margins

Define vertical spacing above and below the checkout title.

Setting	Description	Available options
Checkout Title Top Margin	Top margin value for the checkout title.	0px–25px
Checkout Title Bottom Margin	Bottom margin value for the checkout title.	0px–25px

Order total, tax, and savings

Adjust spacing between price, tax, and discount lines in the pricing area.

Setting	Description	Available options
Order Pricing Line Bottom Margin	Space between individual pricing lines.	0px–25px
Order Pricing Whole Block Bottom Margin	Space below the entire pricing section, added after the last line.	0px–25px

Completion page

Control the button colors and success icon displayed on the completion page after a purchase.

Setting	Description	Available options
Color of the 'Download' Button	Base color of the “Download Now” button.	Color picker
Color of the 'Download' Button Text	Text color of the “Download Now” button.	Color picker
Color of the 'Download' Button (on hover)	Background color of the “Download Now” button when hovered.	Color picker
Color of the 'Download' Button Text (on hover)	Text color of the “Download Now” button when hovered.	Color picker
Color of the 'Continue' Button	Base color of the “Continue” button.	Color picker
Color of the 'Continue' Button Text	Text color of the “Continue” button.	Color picker
Color of the 'Continue' Button (on hover)	Background color of the “Continue” button when hovered.	Color picker
Color of the 'Continue' Button Text (on hover)	Text color of the “Continue” button when hovered.	Color picker
Color of the Successful Order Checkmark on the Completion Page	Color of the success checkmark displayed at the top of the completion page.	Color picker

Tip: Use distinct yet accessible color contrasts between buttons and text to create a clear visual hierarchy.