Loyalty

What this section does

Customer loyalty: points, tier, progress, redemption and history

Where it goes

• Can be used at most 1 time(s) on one page.
• This section comes with the Plugins.plugins.loyalty.name plugin.

Styles

Different looks for the same section. You can change the style later; your content stays as it is.

The first 2 styles of every section are open on every store. The rest unlock with the Page Editor plugin — all at once, not style by style.

• Full Card

  Freecard

  The complete loyalty view — tier badge, points balance, tier progress, lifetime stats, redeem form and points history in one card

  Specific to this style: title, showTitle, showIcon, showTierBadge, showMemberInfo, showBalance, showProgress, showLifetime, showRedeem, showTransactions, transactionLimit, accentColor, surfaceColor

• Membership Card

  Freegradient

  A tier-coloured gradient membership card with the points balance, tier name and progress — looks like a premium loyalty card

  Specific to this style: title, showTitle, showIcon, showTierBadge, showMemberInfo, showBalance, showProgress, showLifetime, showRedeem, showTransactions, transactionLimit, accentColor, surfaceColor

• Member ID Card

  Page Editormembership

  A physical-looking member ID card — tier-coloured face with the member name, "member since", tier and points, plus benefits-style progress beneath

  Specific to this style: title, showTitle, showIcon, showTierBadge, showMemberInfo, showBalance, showProgress, showLifetime, showRedeem, showTransactions, transactionLimit, accentColor, surfaceColor

• Progress Ring

  Page Editorring

  A gamified circular progress ring with the points in the centre and the climb to the next tier around it

  Specific to this style: title, showTitle, showIcon, showTierBadge, showMemberInfo, showBalance, showProgress, showLifetime, showRedeem, showTransactions, transactionLimit, accentColor, surfaceColor

• Reward Hero

  Page Editorhero

  A bold full-width reward banner — huge points figure, tier, progress and a redeem call-to-action — for the top of a rewards page

  Specific to this style: title, showTitle, showIcon, showTierBadge, showMemberInfo, showBalance, showProgress, showLifetime, showRedeem, showTransactions, transactionLimit, accentColor, surfaceColor

• Tier Journey

  Page Editortier-progress

  Focuses on the climb — a prominent progress bar to the next tier with the points still needed and lifetime earned

  Specific to this style: title, showTitle, showIcon, showTierBadge, showMemberInfo, showBalance, showProgress, showLifetime, showRedeem, showTransactions, transactionLimit, accentColor, surfaceColor

• Stat Tiles

  Page Editorstats

  A dashboard grid of tiles — balance, total earned and total redeemed as separate cards — with history beneath

  Specific to this style: title, showTitle, showIcon, showTierBadge, showMemberInfo, showBalance, showProgress, showLifetime, showRedeem, showTransactions, transactionLimit, accentColor, surfaceColor

• Compact

  Page Editorcompact

  Tight card with the tier badge, points balance and progress only — great for a sidebar

  Specific to this style: title, showTitle, showIcon, showTierBadge, showMemberInfo, showBalance, showProgress, showLifetime, showRedeem, showTransactions, transactionLimit, accentColor, surfaceColor

• Minimal Pill

  Page Editorminimal

  A slim pill showing just the points balance and tier — drop it anywhere

  Specific to this style: title, showTitle, showIcon, showTierBadge, showMemberInfo, showBalance, showProgress, showLifetime, showRedeem, showTransactions, transactionLimit, accentColor, surfaceColor

Settings

The fields you see in the Section Settings panel on the right when this section is selected.

Shared by every style

• bg
• contentMaxWidth
• sectionMaxWidth
• horizontalPadding
• verticalPadding
• verticalAlignment
• horizontalAlignment
• horizontalMargin
• verticalMargin
• spacingOverrides
• animationType
• animationDuration
• animationDelay
• animationEasing
• animationStagger
• animationRepeat
• animationParallax
• imageParallax
• animationScrollEffect
• height