Web checkout appearance
Customize how your web checkout looks across colors, fonts, headers, footers, backgrounds, buttons, and overall page styling.
After you create a web checkout, you can customize its look and feel to match your brand and improve the buyer experience. Use these settings to adjust global styles, header and footer, page backgrounds, product and price presentation, homepage behavior, button styles, and the completion page.
In the FastSpring app, go to Checkouts > Web Checkouts, then click Settings on the checkout you want to edit. Use the tabs at the top of the page to access each design category.
Store title, favicon, country/language, email/VAT, font
Logo, header text, links, background, divider
Footer text, colors, link styles
Page links, body background, panels, terms color
Price color/size, product titles and images, offer tiles
Catalog checkboxes, action buttons, title link behavior
Common button controls and per-type defaults
License visibility after purchase
Edit your checkout settings
Use this flow to update appearance settings for a specific web checkout.
- Go to Checkouts > Web Checkouts.
- Click Settings on the checkout you want to edit.
- Open a tab to adjust its settings.
- Click Save.
Note: Checkout settings are per-checkout. Changes here override store-level defaults but do not affect your other web checkouts. Use Save and Preview to confirm your design changes before making the checkout live.
General settings
Adjust global appearance and localization controls that apply across your web checkout.
| Setting | Description | Available options |
|---|---|---|
| Store title | Title displayed in the browser tab. Supports multiple languages via the selector. |
|
| Favicon | Icon shown in the browser tab (and some address bars). |
|
| Country and Language selector | Controls visibility and lock state of the country/language control at checkout. |
|
| Require email to start the order | Prompts buyers for their email before entering the store; useful for cart abandonment tracking. |
|
| Tax Exemption | Displays a tax-exemption ID link at checkout; removes applicable tax when valid. |
|
| Font | Font used throughout the checkout. If the chosen font isn’t available, a system font is used. |
|
Customer information
Control which customer fields appear and how subscription renewals are handled visually during checkout.
| Setting | Description | Available options |
|---|---|---|
| Email field | Where the email field appears; emails are captured for cart-abandon tracking. |
|
| Newsletter Subscription Checkbox | Controls the opt-in checkbox “Stay updated via email about product updates and special offers.” |
|
| 'Company' field | Shows a company field and passes the value in orders/webhooks. |
|
| Collect Physical Address | Controls billing address collection during checkout. |
|
| Force phone number collection | Requires buyers to provide a phone number. |
|
| Auto/Manual subscription renewal at initial checkout | Whether payment details are saved for renewals during the first purchase. |
|
Accessibility best practices
Accessible design ensures your checkout is usable and readable for all buyers.
- Maintain a minimum 4.5:1 contrast ratio between text and background.
- Keep button heights at least 40px for comfortable mobile tap targets.
- Use visible focus and hover states (not color-only changes).
- Choose clear, legible fonts that render well across devices.
- Ensure links are visually distinguishable and provide clear hover styles.
Header settings
Customize the global header that appears on all checkout pages.
| Setting group | Description | Available options |
|---|---|---|
| Size and behavior | Control height and whether the header stays fixed while scrolling. |
|
| Logo | Upload logos and set margins/link behavior. |
|
| Text | Header text to the right of the logo; supports Markdown and localization. |
|
| Links | Link color, hover, underline, and weight styles. |
|
| Background and divider | Header background and divider beneath the header. |
|
Footer settings
Customize the footer that appears on every page in your checkout.
| Setting group | Description | Available options |
|---|---|---|
| Text | Footer copy (supports Markdown) and color; localized per language. |
|
| Links | Footer link color, hover, underline, and weight styles. |
|
| Background | Footer background color. |
|
Page settings
Control the link styling, page backgrounds, panels, and the Terms & Conditions text color across your checkout pages.
| Setting group | Description | Available options |
|---|---|---|
| Links | Link color, hover, underline, and weight in page content. |
|
| Background | Body background behind product content. |
|
| Offer groups | Heading color for offer groups. |
|
| Panels and popups | Corner radius and panel header colors; applies to sections like “Your Order” and “Your Payment.” |
|
| FastSpring Terms & Conditions of Sale | Text color for the Terms & Conditions notice below the footer. |
|
Note: Page settings apply to all pages within this checkout, but not to other web checkouts in your store.
Products and prices
Adjust price styling and how product titles and images appear, including when products are surfaced as offers.
| Setting group | Description | Available options |
|---|---|---|
| Price | Set price color and size, and whether to hide “Free” for free options. |
|
| Products | Control product title size and image container size. |
|
| Products as offers | Configure title size and image sizes for cross-sell and up-sell tiles. |
|
Homepage
Control catalog behaviors such as adding to cart via checkboxes, per-product action buttons, and title link behavior.
| Setting | Description | Available options |
|---|---|---|
| Show checkboxes for adding products to cart. | Displays a checkbox next to each product; checking adds to cart, unchecking removes. |
|
| Product action button behavior | Action of the per-product button (e.g., “Buy Now”). |
|
| Product title link behavior | Behavior when clicking the product title. |
|
Buttons
Customize button colors, hover states, text sizes, borders, and corner radius across checkout and the Account Management portal.
Note: The controls below apply consistently across button types. Defaults can vary by type (for example, “Confirm OK” uses a green palette).
| Control | Description | Available options |
|---|---|---|
| Text size | Button text size in pixels. |
|
| Corners radius | Corner roundness. |
|
| Color / Color on hover | Background and hover colors. |
|
| Text color / Text color on hover | Foreground and hover colors. |
|
| Border width / color / hover | 0–10px border with colors; optional styling. |
|
Note: Payment Buttons support Short Checkout Flow. When enabled, a payment option is selected immediately without an extra “Enter Payment Details” click.
Completion page
Control the appearance of the completion page that buyers see after a successful order.
| Setting | Description | Available options |
|---|---|---|
| Show licenses on completion page | Displays configured licenses/fulfillments after purchase. |
|
Updated 8 months ago