Switch Calculator shows a list of options, each with a toggle and a price. Visitors switch options on and off and the total updates straight away. Add a button below the total to send them to your quote or checkout page.
Three calculators for made-up businesses: a wedding photographer, a gym and a car valeting service. Click the toggles and each total updates straight away.
Six options in 3 columns. Start Enabled is on for full-day coverage, so it is in the total when the page loads. Total centred on a dark panel.
Harbour Light Photography. A 25% deposit holds your date.
1 column, Text After Total “per month” and the total aligned left. The towel service shows that decimal prices work (£4.50).
Riverside Fitness. No joining fee, cancel with 30 days’ notice.
Currency symbol after total on with €, and the total aligned right. Two options start switched on.
Shine Car Care, Cork. Most valets take under two hours.
Set up the options once and the maths is done for you.
Drop Switch Calculator onto your page.
Give each switch a title and a price, and choose whether it starts switched on.
Choose the currency symbol, the text around the total, a description and an optional button.
A simple way to show how options add up.
Each option has its own switch. Visitors turn it on to add the price to the total.
The total recalculates as soon as a switch changes, shown to two decimal places.
Switch on any option by default, such as a core product that most people choose.
Use any currency symbol and place it before or after the total.
Add text before and after the total, plus a description underneath.
Add a button below the total that links to a quote form, contact page or checkout.
Lay the switches out in as many columns as you like, set per breakpoint.
Set the on and off colours, background, borders, padding and typography.
Align the total and style its text, background, borders and spacing.
Anywhere the price depends on what the visitor picks.
Let clients add extras to a base package and see the cost.
List pages, features and add-ons so prospects can price a project.
Add catering, equipment or extra hours to a booking.
Show how extras such as classes or a pool change a monthly fee.
Give a rough price for common jobs before someone gets in touch.
Let people pick modules and see the combined fee.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Content | ||
| Switches | Repeater of options, each with a title, a price and a Start Enabled toggle. | 3 sample options |
| Currency Symbol | Symbol shown with the total. | $ |
| Text before Total | Label shown before the total. | Total: |
| Text After Total | Text shown after the total, e.g. per month. | — |
| Currency symbol after total | Place the currency symbol after the number. | Off |
| Description | Rich text shown under the total. | — |
| Button | Button text and link. The button only shows when it has text. | — |
| Design | ||
| Width | Width of the calculator. | — |
| Columns | Number of switch columns, per breakpoint. | 3 |
| Gap | Space between switches. | 10 |
| Switch Design | On colour, off colour, typography, borders, background and padding. | #EFBF0A / #B7B7B7 |
| Total Area | Alignment, borders, background, padding, total typography, total background, total borders, total padding, total margin and description typography. | Centre |
| Button Design | Background colour, typography, borders and space above. | — |
No. It shows a running total. Use the button to send visitors to your checkout, booking or contact page.
Yes. Prices can include decimals, such as 25.25, and the total is shown to two decimal places.
Yes. Turn on Start Enabled for any option and it is included in the total when the page loads.
Yes. Put text such as per month in Text After Total, as the gym demo does. Add a space at the start so it does not run into the number.
Yes. Enter any symbol in Currency Symbol and choose whether it appears before or after the total.
Switch Calculator is included with Phox Elements, along with 140+ other premium elements for Breakdance.