Number field setup

Shopify Number Field Option Setup: Complete Guide

Number input fields handle numeric personalization: jersey number, anniversary year, custom count. Different from text field: mobile shows numeric keyboard automatically, validation enforces range, no non-numeric input. Here's the 2026 setup.

Last updated: August 14, 2026~6 min readBy

Start free trialAdd as a preferred source on Google

Common number field use cases

Setup with Print It My Way

  1. Install Print It My Way (Free plan supports 1 number field)
  2. Dashboard → New Personalizer → drag in Number field
  3. Configure:
    • Label: "Jersey number" or "Year"
    • Min: 1 (jersey) or 1900 (year)
    • Max: 99 (jersey) or 2100 (year)
    • Increment: 1 (whole numbers) or 0.5 (fabric yards)
    • Required: Yes / No
  4. Optional: Cart Transform per-unit fee (e.g. fabric per yard)
  5. Attach to product

Native theme code (free)

<label for="jersey-number">
  Jersey number (1-99, required)
</label>
<input
  type="number"
  id="jersey-number"
  name="properties[Jersey Number]"
  min="1"
  max="99"
  step="1"
  inputmode="numeric"
  required
/>

inputmode="numeric" triggers mobile numeric keyboard (faster input than text keyboard). Native browser number input validates min/max.

Mobile numeric keyboard

Critical for good mobile UX. HTML5 type="number" triggers numeric keyboard on iOS + Android automatically. Add inputmode="numeric" for explicit hint.

Print It My Way sets this automatically on Number fields.

Min/max validation

Prevent invalid input:

Browser + app enforce. Customer can't submit invalid range.

Decimal precision

Some use cases need decimals:

Configure step attribute (HTML) or Print It My Way "Increment" setting.

Per-unit pricing via Cart Transform

Number field can drive price:

Cart Transform reads number value + multiplies by unit price. Print It My Way Basic supports.

Number vs quantity: different concepts

Don't confuse:

A customer buying 5 jerseys each with different number = 5 line items (one per jersey) + jersey number field per line + quantity 1 per line.

Frequently asked questions

How to add number field to Shopify?

Personalizer app (Print It My Way, Bold). Add Number field with min/max + optional increment.

Show numeric keyboard on mobile?

inputmode="numeric" attribute. Print It My Way sets automatically.

Validate number range?

min + max HTML attributes. Browser enforces. Personalizer app adds app-side validation for safety.

Allow decimals in number field?

step="0.5" for half-increment. Configure per use case (fabric length, weight).

Per-unit pricing via number field?

Cart Transform multiplies number value × unit price. Fabric per yard, custom prints per unit.

Number vs quantity difference?

Number = per-unit customization (jersey number). Quantity = how many units. Different concepts, different fields.

Max number of digits?

Depends on use case. Jersey 2 digits (1-99). Year 4 digits. Guest count 3-4 digits.

Best app for number fields?

Print It My Way (Free plan includes). Bold Product Options. Both support Cart Transform per-unit pricing.

Cart display for number field?

Personalizer stores as line-item property. Cart-item.liquid displays "Jersey Number: 23" automatically.

Prevent non-numeric input?

HTML5 type="number" rejects non-numeric. Personalizer app validates additionally.

Sources & further reading

Primary sources referenced in this article. We link to official platform documentation and standards bodies rather than secondary summaries so you can verify claims directly.

Number field on Shopify: free

Print It My Way Free plan includes number field with min/max validation + Cart Transform per-unit pricing.

Install Print It My Way