|
/ Documentation /CartFlows/Features/ How to Set Global Styling for a CartFlows Funnel

How to Set Global Styling for a CartFlows Funnel

CartFlows lets you set one color scheme for a whole funnel with Global Styling. You choose four brand colors once, and every step in that funnel uses them, so your landing, checkout, upsell and Thank You pages all look like they belong together.

This guide shows you where to find Global Styling, what each color controls, and how it works with your page builder.

How Global Styling Works

Global Styling sits in each funnel’s settings, so every funnel can have its own color scheme. Once you turn it on, CartFlows passes your four colors to all the steps in that funnel.

  • On the checkout page, the colors are used for the Place Order button, the selected payment method, links, the text in the fields and the section headings.
  • In Elementor, your four colors appear in Elementor’s Global Colors as CartFlows Primary Color, CartFlows Secondary Color, CartFlows Text Color and CartFlows Heading/Accent Color, so you can apply them to any widget.
  • In the Block Editor, the same four colors appear in the color palette while you edit a funnel step, so they’re one click away.

This makes it easy to match a funnel to a campaign or brand without restyling each page by hand.

How to Set Up Global Styling

Step 1. From the WordPress admin, go to CartFlows → Funnels and open the funnel you want to style. For your store checkout, go to CartFlows → Store Checkout instead.

Step 2. Click the gear icon at the top right of the funnel to open Funnel Settings.

Funnel Settings gear icon on the CartFlows funnel page

Step 3. Click the Global Styling tab in the left menu.

Step 4. Turn on Enable Global Styling. The four color options appear below the toggle.

Global Styling tab in Funnel Settings with the four color options

Step 5. Pick your colors:

  • Primary Color — Your main brand color. On the checkout page, it’s used for the Place Order button, the selected payment method, links and the item count badge.
  • Secondary Color — A supporting color for your page designs. It’s available in Elementor and the Block Editor alongside the other three.
  • Text Color — On the checkout page, it’s the color of the text customers type into the fields, such as their name and address.
  • Heading/Accent Color — The color of the section headings on the checkout form, such as Contact, Billing Details, Payment and Your Order.

Step 6. Click Save Settings at the top right.

Global Styling is now active on every step of that funnel.

Global Styling in Action

Open your checkout page to see the result. In the example below, the Primary Color is set to blue, so the Place Order button, the selected payment method box and the links all use it.

Checkout page using the funnel Primary Color on the Place Order button and payment method

Frequently Asked Questions

Was this doc helpful?
What went wrong?

We don't respond to the article feedback, we use it to improve our support content.

Need help? Contact Support
Table of Contents