Pricing Plans | SaaSFlow Docs

73 settingsPagesBlog postsBlog listings

Where it is used

Pricing page

Content settings

What the module says and shows. Repeaters (groups you can add items to) are marked as such.

Setting Type What it does

Eyebrow Text Short label shown above the heading. Leave empty to hide it.

Heading Text Optional heading above the plans. Wrap words in [brackets] to highlight them.

Description Rich text Optional supporting text under the heading.

Billing toggleGroup · 6 settings

Show monthly/annual toggle	On/off	Lets visitors switch between monthly and annual prices.Default: `On`
Show first	Choice	Which prices show when the page loads.Options: Monthly pricesAnnual pricesDefault: `Annual prices`
Monthly button	Text	Text on the monthly button.Default: `Monthly`
Annual button	Text	Text on the annual button.Default: `Annual`
Savings note	Text	Short note next to the toggle. Leave empty to hide it.Default: `Save up to 20%`
Price period	Text	Shown after each price, for example / month or / user / month.Default: `/ month`

PlansRepeater · 18 settings

Icon	Choice	Icon shown at the top of the card. Its color is set in the Styles tab. Choose Pick from icon library or Upload my own for any other icon.Default: `Cube`
Library icon	Icon	Search the Font Awesome library and pick an icon. It takes the icon color.
Icon image	Image	A square SVG or PNG, at least 48 x 48px. Uploaded images keep their own colors.
Plan name	Text	Name of the plan, for example Starter.Default: `Plan`
Plan description	Text	Who the plan is for, in a few words.
Price	Choice	Show prices, or a custom line such as Custom pricing.Options: Monthly and annual priceCustom text (for example Custom pricing)Default: `Monthly and annual price`
Price when billed monthly	Text	Price shown with Monthly selected, for example $35.Default: `$0`
Price when billed annually	Text	Monthly price shown with Annual selected, for example $29.Default: `$0`
Note when billed monthly	Text	Small line under the price with Monthly selected. Leave empty to hide it.
Note when billed annually	Text	Small line under the price with Annual selected, for example Billed annually (save 20%).
Custom price text	Text	Shown instead of a price.Default: `Custom pricing`
Custom price note	Text	Small line under the custom price text.
Highlight this plan	On/off	Gives the card a colored border, a badge and a filled button.Default: `Off`
Badge	Text	Badge at the top of a highlighted card. Leave empty to hide it.Default: `Most popular`
Button text	Text	Text on the button. Leave empty to hide the button.Default: `Get started`
Button link	Link	Where the button goes.
HubSpot CTA ID	Text	Optional. To use a HubSpot CTA instead of the button (so HubSpot tracks its views and clicks), paste the CTA's ID here. Find it in Marketing > CTAs: open the CTA and copy the number from the page address. Needs HubSpot's CTA tool. Leave empty to use the button.
Included features	Text	Short points shown with a check mark.

Style settings

In the module's Styles tab: layout, color mode, background, fonts, spacing and animation.

Setting Type What it does

Color mode Choice "Same as site" follows Theme settings > Color mode.Options: Same as siteLightDarkDefault: Same as site

Eyebrow style Choice "Same as theme" follows Theme settings > Eyebrow.Options: Same as themePlain textPillGradient badgeDefault: Same as theme

Highlight color Color Color of the highlighted plan, the active toggle button and [highlighted] words. Leave as is to use the theme's primary color.

Highlighted planGroup · 3 settings

Border	Choice	Border of the highlighted plan. The gradient is also used on its badge and the active toggle button.Options: GradientSolid (highlight color)Default: `Gradient`
Gradient start	Color	Top-left color of the gradient.Default: `#8B5CF6`
Gradient end	Color	Bottom-right color of the gradient, also the end color of the active toggle button.Default: `#3B82F6`

FontsGroup · 2 settings

Heading font	Font	Starts as the theme's heading font. Change it to use another font in this module only.Default: `Outfit`
Text font	Font	Starts as the theme's body font. Change it to use another font in this module only.Default: `Inter`

Transparent background On/off Removes this section's background so the page background shows through. Useful for blending sections together.Default: Off

Background color Color Leave empty to use the theme colors for the current light or dark mode.

Background effectGroup · 6 settings

Show background glow	On/off	Default: `Off`
Intensity	Number	How strong the glow is. 0% hides it.Default: `60`
Flowing movement	On/off	Plays an entrance animation. Visitors who turn off motion on their device don't see it.Default: `On`
Fade out at the top and bottom	On/off	Fades the glow out at the edges so it blends into the next section.Default: `On`
Glow color 1	Color	Leave empty to use the theme primary color.
Glow color 2	Color	Leave empty to use the theme accent color.

Background animation Choice A subtle moving background behind this section. Soft bubbles: glass circles floating. Aurora: large blurred color clouds drifting. Dot grid: a faint dotted pattern drifting. Ripples: soft rings spreading out. Brand colors only; still for visitors who turn off motion.Options: NoneSoft bubblesAurora glowDrifting dot gridRipplesDefault: None

Animation strength Number How visible the background animation is. Lower is subtler.Default: 45

Number of bubbles Number How many bubbles float in this section. Phones show about half of them.Default: 6

Bubble arrangement Number 0: this section gets its own random arrangement. Pick any other number to shuffle the bubbles into a new one, for example if a bubble sits behind your text.Default: 0

CardsGroup · 6 settings

Cards per row (desktop)	Number	How many plans sit side by side on desktop. Tablets show two, phones one.Default: `4`
Card background	Color	Leave empty to use the theme card color.
Corner radius	Number	Roundness of the corners. 0 is square.Default: `16`
Show border	On/off	Draws a thin border around each card.Default: `On`
Shadow	Choice	Shadow under each card.Options: NoneSoftStrongDefault: `Soft`
Lift on hover	On/off	Cards rise slightly when hovered.Default: `Off`

SpacingGroup · 4 settings

Leave empty to use the theme section spacing (Theme settings > Layout).

Top padding (desktop)	Number	Space above the content on desktop.
Bottom padding (desktop)	Number	Space below the content on desktop.
Top padding (mobile)	Number	Space above the content on phones.
Bottom padding (mobile)	Number	Space below the content on phones.

Plan 1 icon color Color Icon color for plan 1.Default: #10B981

Plan 2 icon color Color Icon color for plan 2.Default: #4F46E5

Plan 3 icon color Color Icon color for plan 3.Default: #8B5CF6

Plan 4 icon color Color Icon color for plan 4.Default: #10B981

Animate when scrolled into view On/off Content fades up as the section comes into view. Visitors who turn off motion on their device see no animation.Default: On

Interface labels

Words on buttons and for screen readers. Change them to translate the module.

Setting	Type	What it does
Billing toggle	Text	Read by screen readers for the monthly/annual buttons.Default: `Billing period`
Feature list	Text	Read by screen readers before each plan's feature list.Default: `Included features`

Tip

Headings support [brackets] to highlight words and | for a new line. See Editing tips.