SureSwitch
SureCart
Create elegant payment toggles that boost conversions for your SureCart customers.
Configure Your Toggle
Plans
Style
Text
Advanced
Price plan
#097358
#111827
#FFFFFF
Use {months} to automatically include the number of payment periods. This text appears for recurring payments (e.g. monthly, quarterly, etc).
The number of payment periods for recurring payments (months, quarters, etc).
Live Preview
166€
+VAT
/month for 6 months
How to implement SureSwitch
1
Customize your toggle
Configure all options to match your needs. Add as many pricing plans as you need, customize colors, text, and other settings until you're happy with the preview.
2
Generate and copy the code
Click the "Generate Code" button and then "Copy code". This creates all the magic needed to make your price toggle work!
3
Add the code to Bricks Builder
In Bricks Builder, add a "Code" element, paste your code, and make sure to check "Execute Code". This adds SureSwitch to your website.
4
Place toggles on your page
For a single pricing card:
• Add
• Add
• Add
data-sureswitch to the div where you want the toggle• Add
data-sureswitch-button to your purchase button
5
Multiple pricing cards setup
If you have multiple price cards:
For each DIV where you want a toggle:
• Add
• Add
• Add
For each DIV where you want a toggle:
• Add
data-sureswitch• Add
data-plan-index="0" for first plan, data-plan-index="1" for second plan• Add
data-button="unique-name" (example: "card1", "basic-plan", etc.)
For each BUTTON:
• Add
Example:
For "Basic Plan" card:
For "Pro Plan" card:
• Add
data-sureswitch-button="unique-name" with the SAME name you used in the divExample:
For "Basic Plan" card:
data-button="basic" and data-sureswitch-button="basic"For "Pro Plan" card:
data-button="pro" and data-sureswitch-button="pro"
Generated Code
SureSwitch.js