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:

They’ll see the slider with the handle at the default position
As they move the handle, they’ll see the selected value update instantly
The product price updates automatically to reflect their selection
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.