Slider Field

The Slider field is a premium feature that adds an interactive sliding selector to your product pages. It allows your customers to choose values by simply dragging a handle left or right, making it perfect for selecting quantities, dimensions, percentages, or any numeric value.

Why Use a Slider?

  • Better User Experience: Sliders are more interactive than regular number inputs
  • Visual Selection: Customers can visually see where their selection falls in the available range
  • Prevents Errors: Limits customers to your predefined min/max values
  • Dynamic Pricing: Automatically updates product pricing based on the customer’s selection

Price Type

1. Fixed

This is perfect for “flat” pricing:

  • How it works: You set a fixed price that gets added to the product regardless of the slider value.
  • Example:
    • If you offer custom embroidery for an additional $15:
      • Set Price Type to “Fixed”
      • Set Price to $15
  • When a customer selects any position on the slider, the same $15 will be added to the base price.

2. Percentage of Product Price

How it works: You set a percentage that gets calculated based on the product’s base price and multiplied by the slider value.

  • Example:
    • If you offer premium finishes at 10% of product price per level:
      • Set Step Value to 1 (representing 1 level)
      • Set Price Type to “Percentage of product price”
      • Set Price to 10
  • When a customer moves the slider to level 3, they’ll pay 30% of the base price as an addon (for a $100 product, $30 would be added).

3. Price Per Step

This is perfect for “per unit” pricing:

  • How it works: You set a fixed price that gets multiplied by each step on the slider
  • Example:
    • If you sell fabric with a price of $3 per yard:
      • Set Step Value to 1 (representing 1 yard)
      • Set Price Type to “Price per step”
      • Set Price to $3
  • When a customer moves the slider to 4, they’ll pay for 4 yards ($12 added to base price)

4. Custom Formula Pricing

For advanced pricing needs, you can create custom formulas that precisely control how prices change:

Basic Formulas:

  • Volume Discount Formula: {value}>=5?{value}*8:{value}*10
    • Meaning: If 5 or more units, charge $8 per unit, otherwise charge $10 per unit
    • Slider at position 3 = $30 added ($10 × 3)
    • Slider at position 6 = $48 added ($8 × 6)
  • Exponential Pricing: Math.pow({value},2)*0.5
    • Meaning: Square the value and multiply by $0.50
    • Slider at position 4 = $8 added (4² × $0.50)
    • Slider at position 10 = $50 added (10² × $0.50)

More Complex Examples:

  • {value}*10 – Multiply the slider value by $10
    • Slider at position 3 = $30 added
    • Slider at position 7 = $70 added
  • {base_price}*0.1*{value} – Add 10% of the base price for each unit
    • $100 product, slider at position 2 = $20 added (10% × 2)
    • $100 product, slider at position 5 = $50 added (10% × 5)

Real-World Pricing Examples

Custom-Length Rope with Price Per Step

Set up a slider with:

  • Min: 1 meter
  • Max: 50 meters
  • Step: 1 meter
  • Price Type: Price Per Step
  • Price: $3

When a customer moves the slider to 15 meters, the price automatically adds $45 to the base product price.


Set up a slider for print size with:

  • Min: 4 (inches)
  • Max: 24 (inches)
  • Step: 2 (inches)
  • Formula: {value}<=8?5:{value}<=16?{value}*1.5:{value}*2

This means:

  • Sizes 18-24 inches cost $2 per inch
  • Sizes 4-8 inches cost a flat $5
  • Sizes 10-16 inches cost $1.50 per inch

Photo Prints with Size-Based Formula


Consulting Hours with Volume Discount

Set up a slider with:

  • Min: 1 hour
  • Max: 10 hours
  • Step: 0.5 hours
  • Formula: {value}>=5?{value}*80:{value}*100

This gives customers a discount when they book 5 or more hours:

  • 5-10 hours: $80 per hour (20% discount)
  • 1-4.5 hours: $100 per hour

Set up a slider for canvas size with:

  • Min: 8 (inches)
  • Max: 48 (inches)
  • Step: 4 (inches)
  • Formula: Math.pow({value},2)*0.5

This means:

  • Price increases exponentially with size, reflecting the increasing material and labor costs
  • An 8-inch canvas costs $32 ($0.50 × 8² = $32)
  • A 24-inch canvas costs $288 ($0.50 × 24² = $288)
  • A 48-inch canvas costs $1,152 ($0.50 × 48² = $1,152)

Exponential Pricing for Custom Canvases


Linear Pricing for Fabric by Length

Set up a slider for fabric length with:

  • Min: 1 (yard)
  • Max: 10 (yards)
  • Step: 0.5 (yards)
  • Formula: {value}*10

This means:

  • Each yard of fabric costs $10
  • 1 yard costs $10
  • 5 yards costs $50
  • 10 yards costs $100

Set up a slider for engraving complexity with:

  • Min: 1 (complexity level)
  • Max: 5 (complexity level)
  • Step: 1 (level)
  • Formula: {base_price}*0.1*{value}

This means:

  • Price scales with both product value and engraving complexity
  • For a $100 product with complexity level 1: $10 ($100 × 0.1 × 1)
  • For a $100 product with complexity level 3: $30 ($100 × 0.1 × 3)
  • For a $200 product with complexity level 5: $100 ($200 × 0.1 × 5)

Product-Based Engraving Service


Rounded Hourly Service Rates

Set up a slider for consultation hours with:

  • Min: 1 (hour)
  • Max: 8 (hours)
  • Step: 0.5 (hours)
  • Formula: Math.round({value} * 1.5)

This means:

  • Each consultation hour costs $1.50, rounded to the nearest dollar
  • 1 hour costs $2 (1.5 rounded to 2)
  • 2.5 hours costs $4 (3.75 rounded to 4)
  • 6 hours costs $9 (9 exactly)
  • 8 hours costs $12 (12 exactly)

What Your Customers See

When a customer interacts with your slider:

  1. They’ll see the slider with the handle at the default position
  2. As they move the handle, they’ll see the selected value update instantly
  3. The product price updates automatically to reflect their selection
  4. When added to cart, the selected value and calculated price are included

Tips for Creating Effective Pricing Models

  • Start Simple: Begin with basic pricing before trying complex formulas
  • Test Thoroughly: Check multiple slider positions to ensure pricing works as expected
  • Be Transparent: Add a subtitle explaining how the pricing works
  • Consider Breakpoints: Create pricing tiers at logical points (e.g., volume discounts)
  • Match Your Costs: Ensure your formula accurately reflects your actual costs

By using slider fields with thoughtful pricing strategies, you can create flexible product options that adapt to customer needs while ensuring your pricing remains profitable.