Skip to content

Checkout Settings

The Checkout tab in Commerce Connect Settings (Commerce Connect > Settings > Checkout) controls how the BigCommerce checkout experience appears to your customers and where they’re redirected when they check out.

Checkout Styling Options

Section titled “Checkout Styling Options”

Apply Theme Styles to Checkout

Section titled “Apply Theme Styles to Checkout”

Toggle: On/Off (default: On)

When enabled, Commerce Connect automatically applies styling to the BigCommerce checkout to match your WordPress® site’s appearance, creating a consistent visual experience between your WordPress® product pages and the checkout flow.

What gets styled:

  • Typography (fonts, headings, paragraph styles)
  • Button styles
  • Form field styling
  • Link colors and hover states

How it works: Commerce Connect reads your WordPress® theme’s active styles and programmatically applies them to the BigCommerce checkout. This happens automatically - you don’t need to configure theme CSS or write custom checkout styles.

When to enable:

  • ✅ You want a seamless brand experience from browsing to checkout
  • ✅ Your theme has distinctive styling you want customers to see throughout
  • ✅ You’re using a custom checkout domain and want it to feel native

When to disable:

  • ❌ You prefer BigCommerce’s default checkout styling
  • ❌ Your theme’s styling conflicts with checkout functionality
  • ❌ You want to maintain BigCommerce’s optimized checkout design

Apply Theme Background Color to Checkout

Section titled “Apply Theme Background Color to Checkout”

Toggle: On/Off (default: On)

When enabled, this setting applies your WordPress® theme’s background color to the BigCommerce checkout page.

Effect:

  • Checkout page background matches your site’s background
  • Creates visual continuity when customers are redirected to checkout

Recommendation: Enable this if you’ve enabled “Apply theme styles to checkout” for maximum visual consistency.

Checkout Window Behavior

Section titled “Checkout Window Behavior”

Open Checkout In

Section titled “Open Checkout In”

Dropdown: Current tab/window (default) or New window

Controls how the checkout page opens when customers click the “Proceed to Checkout” button.

Current tab/window:

  • Customer stays in the same browser tab
  • Standard ecommerce behavior
  • Recommended for most sites

New window:

  • Opens checkout in a new browser tab/window
  • Customer can reference product pages while checking out
  • May confuse some customers expecting standard flow

Checkout Domain Configuration

Section titled “Checkout Domain Configuration”

Custom Checkout Domain

Section titled “Custom Checkout Domain”

Field: Read-only display of your configured checkout subdomain

What this shows: The custom subdomain where customers are redirected for checkout (e.g., checkout.www.your-site.com).

Why it matters: For headless WordPress® setups, a custom checkout subdomain is required to maintain a cohesive customer experience. Without proper DNS configuration, customers will be redirected to BigCommerce’s default checkout domain, breaking the branded experience.

Example:

checkout.www.retro-quest-games.com

Help text shown in UI:

The domain that customers will be redirected to for the checkout. If this is a custom checkout subdomain is required for this headless setup and will need DNS records configured.

Quick link: “Manage domains in BigCommerce →” (opens BigCommerce control panel)

DNS Configuration Required

Section titled “DNS Configuration Required”

The custom checkout domain requires DNS records to be configured before it will work.

See: DNS Cutover Guide for complete setup instructions including:

  • Required DNS records (CNAME or A records)
  • TTL recommendations
  • SSL certificate setup
  • Testing and verification steps

Visual Consistency Examples

Section titled “Visual Consistency Examples”

Styled Checkout (Theme Styles Enabled)

Section titled “Styled Checkout (Theme Styles Enabled)”

When both theme styling toggles are enabled, Commerce Connect automatically applies your theme’s styling to the checkout page:

  • Custom fonts from your WordPress® theme
  • Brand colors and button styles
  • Form field appearance matching your site
  • Background colors consistent with your site design

Result: Customers may not even realize they’ve been redirected to a different domain for checkout - the visual experience remains seamless.

Unstyled Checkout (Theme Styles Disabled)

Section titled “Unstyled Checkout (Theme Styles Disabled)”

When theme styling is disabled, customers see:

  • BigCommerce’s default Optimized One-Page Checkout design
  • Standard BigCommerce fonts, colors, and layout
  • Functional but visually disconnected from your WordPress® theme

Result: Clear visual break between browsing (WordPress®) and checkout (BigCommerce).

Section titled “Related Documentation”