Switch Field
The Switch field is a free/premium feature that adds a modern toggle switch to your product pages. It allows customers to easily enable or disable options with a simple click, making it perfect for boolean choices, optional add-ons, or feature toggles.
Why Use a Switch?
- Clear State: Visual indication of enabled/disabled state
- Space Efficient: Takes up minimal space while being highly visible
Switch Settings
Basic Settings
- Required Field
- Enable/disable if the switch must be activated
- Customize required field message
- Set required text color
- Default Value
- Set whether the switch is ON or OFF by default
- Useful for pre-selected options
- Field Properties
- Name: Unique identifier for the field
- ID: Custom ID for styling/scripting
- Class: Custom CSS classes
Visual Customization
- Switch Layout
- Default: Standard rounded switch
- Square: Modern squared edges
- Icons
- Checked Icon: Icon displayed when switch is ON
- Unchecked Icon: Icon displayed when switch is OFF
- Choose from extensive icon library
- Colors
- Checked Background Color: Color when switch is ON (default: #00ff00)
- Unchecked Background Color: Color when switch is OFF (default: #cccccc)
- Animation Style
- None: Instant state change
- Smooth: Gentle transition
- Bounce: Playful bounce effect
- Elastic: Spring-like animation
Price Type
1. Fixed
- Set a flat rate when switch is enabled
- Example: Premium packaging for $5
2. Percentage of Product Price
- Add a percentage of base price when enabled
- Example: 10% premium for rush processing
Real-World Pricing Examples
Premium Packaging Toggle
Set up a Switch with:
- Switch Label: “Premium Gift Packaging”
- Default: OFF
- Price Type: Fixed
- Price: $5
- Checked Icon: Gift box
- Unchecked Icon: Standard box
- Checked Color: Gold (#FFD700)
- Unchecked Color: Gray (#CCCCCC)
- Animation: Smooth
Set up a Switch for print size with:
- Switch Label: “Rush Processing (24h)”
- Default: OFF
- Price Type: Percentage
- Price: 25
- Checked Icon: Clock
- Unchecked Icon: Calendar
- Checked Color: Red (#FF0000)
- Unchecked Color: Gray (#CCCCCC)
- Animation: None
Rush Processing Option
Custom Engraving Service
Set up a Switch with:
- Switch Label: “Add Custom Engraving”
- Default: OFF
- Price Type: Custom Formula
- Formula: {base_price}*0.15
- Checked Icon: Pencil
- Unchecked Icon: Blank
- Checked Color: Blue (#0000FF)
- Unchecked Color: Gray (#CCCCCC)
- Animation: Elastic
Best Practices
- Clear Labels
- Use descriptive labels that clearly indicate the option
- Color Psychology
- Use green for positive/enabled states
- Use red for premium/urgent options
- Maintain brand color consistency
- Default States
- Set sensible defaults based on common customer choices
- Consider making premium features OFF by default
- Performance
- Keep animations subtle and quick
- Use appropriate icon sizes, If use image then maintain size
By implementing switch fields thoughtfully, you can create an intuitive and engaging shopping experience while maintaining clear pricing transparency for your customers.