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.