Keystone Shopify Apps

Appearance

Checkbox (Multi) ​

Allow customers to select multiple options from a list using checkboxes.

Overview ​

Checkbox (Multi) is a selection option type that displays multiple choices as always-visible checkboxes. Customers can check multiple boxes to select several options simultaneously. It's ideal when customers should be able to choose more than one item.

Use Checkbox (Multi) for:

  • Add-ons or extras (gift wrapping, rush processing)
  • Multiple features or services
  • Toppings or ingredients
  • Accessory bundles
  • Multiple upgrades

Key characteristics:

  • Multiple selections allowed
  • All options always visible
  • Each checkbox independent
  • Can be marked as required (at least one must be selected)
  • Optional minimum and maximum number of selections
  • Values can have price add-ons
  • Values can be reordered by dragging

Configuration ​

Basic Settings ​

SettingDescription
LabelOption name displayed to customers (e.g., "Select Add-Ons")
Option is required for this option setIf enabled, customers must select at least one checkbox before adding to cart
Hide Label from storefrontIf enabled, only the checkboxes are shown (label is hidden)

Advanced Settings ​

SettingDescription
Internal LabelAdmin-only identifier (replaces label in options list)
Help TextAdditional guidance shown to customers (based on display mode)
Limit selectionDisabled by default. Set to Enabled to control how many checkboxes a customer can check — see Limit Selection below
Min selectionsThe fewest checkboxes a customer needs to check once they start selecting. Shown when Limit selection is Enabled
Max selectionsThe most checkboxes a customer can check. Cannot exceed the number of values. Shown when Limit selection is Enabled

Checkbox Options (Values) ​

Each checkbox value can be configured with:

SettingDescription
Value NameOption text shown next to checkbox (max 255 characters)
Pre-selected by defaultIf enabled, this checkbox is checked when page loads
Help textOptional text shown next to this specific value on the storefront — see Value Help Text below
PricingThree options: Free (default), Add fee, Link variant

Managing values:

  • Add Value button creates new checkbox options
  • Drag handle (⋮⋮) to reorder values
  • Chevron (⌄) to expand value settings — Help text lives here, alongside Pre-selected and Pricing
  • Each value can have its own pricing

Value Help Text ​

Every checkbox value has its own optional Help text field (separate from the option-level Help Text under Advanced Settings) — a short hint like "Adds 2 business days" that appears right next to that value.

  • Leave it blank and nothing renders — no icon, no empty gap
  • Shows on the storefront, in the Live Preview, and in the option-set Details preview
  • Persists through Save + refresh and through duplicating the option or option set
  • How it looks — a line under the value, or an ⓘ icon with a hover tooltip — is controlled per-template in Checkbox Styling

Value Help Text vs. Help Text

The Help Text field under Advanced Settings applies to the whole option. Value Help Text applies to one specific checkbox value — each value can have its own. Both can be used together.

Limit Selection ​

By default a customer can check as many boxes as they like. Limit selection sets a minimum, a maximum, or both — for example "choose up to 2 toppings" or "pick at least 2 features".

  1. Click Advanced Settings below the option label
  2. Set Limit selection to Enabled
  3. Enter Min selections, Max selections, or both — leave a field empty for no minimum or no cap

On the storefront:

  • Once the maximum is reached, checking another box is refused — it stays unchecked — and a message appears under the option (default: "You can select up to 2 option(s).")
  • Add to cart is blocked while fewer boxes than the minimum are checked (default: "Please select at least 2 option(s).")
  • The message updates as boxes are checked and unchecked, and clears once the selection is valid
  • The Select all control from Checkbox Styling is hidden when the maximum is lower than the number of values a customer can check

A minimum doesn't make the option required: with Option is required off, customers can leave every box unchecked, but once they check one they need to reach the minimum.

The option set can't be saved if min is higher than max, if either number is higher than the number of values, or if more values are pre-selected than max allows.

See Limit Selection for the full rules and how to reword the messages.

Pricing Options ​

Free (Default) ​

No additional cost for this selection.

When to use: Included choices, informational selections, non-priced options

Add Fee ​

Manually set a specific price that's added to the base product.

Example: Gift Wrapping (+$5.00)

How it works:

  • You enter the price amount
  • App creates a hidden Shopify product automatically
  • Price is added to cart when checked

Hidden Products

The app creates hidden products for Add Fee pricing. Do not edit or delete these products in Shopify.

Connect the value to an existing Shopify product for automatic price syncing.

Example: Link "Protective Case" to your Case product

How it works:

  • You select an existing product
  • Price automatically syncs with that product
  • Updates when you change the linked product price

How to Add Checkbox (Multi) ​

  1. Navigate to Option Sets and open your option set
  2. Click Add Option
  3. Select Checkbox (Multi) from the Option Type modal
  4. Enter a Label (e.g., "Add-Ons")
  5. Check Option is required if at least one selection is mandatory
  6. (Optional) Click Advanced Settings to add Help Text or set a selection limit
  7. In Checkbox Options, add your values:
    • Enter Value Name for each option
    • Click Add Value for more options
    • Drag to reorder values
    • Expand (⌄) to set pricing or pre-selection
  8. Click Save in the contextual save bar

Use Cases ​

Add-On Services ​

Label: Add Extra Services Required: No Values:

  • Gift wrapping (+$5.00) [Add Fee: $5]
  • Express processing (+$10.00) [Add Fee: $10]
  • Personal note card [Free]

Result: Customers can select multiple add-on services

Toppings Selection ​

Label: Choose Your Toppings Required: No Pre-selected: Cheese (first value) Values:

  • Cheese [Free] (default)
  • Pepperoni (+$2.00)
  • Mushrooms (+$1.50)
  • Extra sauce [Free]

Result: Multiple topping selection with Cheese pre-checked

Product Accessories ​

Label: Recommended Accessories Required: No Values:

  • Protective Case (+$15.00) [Link Variant: Case Product]
  • Screen Protector (+$8.00) [Link Variant: Protector Product]
  • Charging Cable (+$12.00) [Link Variant: Cable Product]

Result: Multiple accessories with linked product pricing

Features Bundle ​

Label: Include These Features Required: Yes (at least one) Values:

  • Feature A [Free]
  • Feature B (+$5.00)
  • Feature C (+$10.00)
  • Feature D (+$15.00)

Result: Required to select at least one feature

Upgrades Package ​

Label: Select Upgrades Required: No Values:

  • Premium finish (+$20.00)
  • Extended warranty (+$50.00)
  • Priority support (+$30.00)
  • Free gift [Free]

Result: Optional multiple upgrades selection

Customer Experience ​

Checkbox interaction:

  1. Customer sees label and all checkbox options
  2. All choices visible immediately
  3. Clicks checkboxes to select (multiple allowed)
  4. Checked boxes show checkmark
  5. Can check/uncheck any combination
  6. If priced, sees price next to each option (e.g., "Gift wrapping (+$5.00)")

Price display:

  • Prices shown inline: "Express (+$10.00)"
  • Multiple selections add up in cart
  • Each checked item listed at checkout

Styling ​

Checkbox has its own dedicated styling — item style, the selection box and its glyph, label typography, value help text, layout, disabled state, quantity input, and a "Select all" control are all configurable via named templates.

See Checkbox Styling for the full settings reference.

Best Practices ​

Value organization:

  • Order by popularity or importance
  • Use drag handles to reorder easily
  • Group related options together
  • Consider limiting to 5-8 options

Use clear value names:

  • Descriptive: "Gift wrapping with ribbon" vs "Wrapping"
  • Include details: "Express processing (2 days)"
  • Show prices clearly: "Premium finish (+$20)"
  • Keep names scannable

Pre-selection strategy:

  • Pre-check recommended or popular items
  • Can pre-select multiple checkboxes
  • Test impact on conversions
  • Consider upsell opportunities

Pricing best practices:

  • Show prices clearly for each option
  • Multiple prices add up transparently
  • Use Add Fee for fixed costs
  • Use Link Variant for existing products

Consider checkbox (multi) vs other types:

  • Use Checkbox (Multi) for: Multiple selections, add-ons, extras
  • Use Radio for: Single choice only
  • Use Checkbox (Single) for: One yes/no option
  • Use Dropdown for: Single choice, many options

Mobile optimization:

  • Checkboxes work well on mobile
  • Ensure adequate tap target size
  • Verify spacing between options
  • Test that text doesn't wrap awkwardly

Communicate requirements:

  • "Required" means at least one must be checked
  • Use Limit selection to enforce a minimum or maximum number of checked boxes
  • Use Help Text to clarify selection rules
  • Test required validation
  • Provide clear error messages