Number Styling

Style every visual detail of the Number option type — the − and + buttons beside the number, the field itself, its label and help text, the colors it takes while a customer types, and how it looks when the number isn't accepted — using per-type templates.

Overview

Read Types Settings first if you haven't created a template before. This page covers every setting available once you're editing a Number template, grouped the same way they appear in the editor's left navigation: Buttons, Field style, Label & help text, Field colors, Text, and Focus, error & disabled.

A Number template is built on the Short Text template: the field, label, help text, color, text and focus settings have the same names, ranges and defaults, so if you've styled Short Text you already know most of this editor. What's new is Buttons — the − and + buttons that step the number up and down — and it comes first, because where the buttons sit and how they look is what makes a number field look finished.

Two settings change what appears on the page, not just how it looks: Layout under Buttons decides whether the buttons exist at all, and Help text display replaces the store-wide Help Text Display Mode for every option using the template.

Three states, not two

A number field has nothing to select, so its third state is focus — the field the customer is currently typing in. The field's colors are set separately for Idle, Hover and Focused, each under its own heading on the same pane. The typed number keeps one Number color in all three. The buttons have their own Idle and Hover colors under Buttons.

A new template starts from your shop's theme: the idle colors and sizes seed from your Colors and Borders & Shapes. Hover and focus colors are worked out from those, so the states never look identical out of the box. The hex values in the tables below are what a template uses when your theme doesn't set that color.

Number has its own templates

Number and Short Text are styled separately. A Number option only offers Number templates, and a Short Text template never affects a Number option.

What's different from Short Text

Every Short Text setting is here too. These are the ones that differ:

	Short Text	Number
Buttons	—	New, and first in the left navigation: the − and + buttons, their look, icons, size and colors
Width, Compact width	—	New, under Field style: a full-width field or a fixed, narrower one
Typed text color	Text, set per state	Number color, one color for all three states
A Filled field's color	Background, shared with Outlined	Its own Fill color per state, a light tint by default
Background — Focused	#FFFFFF, the same as Idle	A faint tint of your button color (#F8FAFF)
Font size	14px	16px
Font weight	Regular	Medium
Alignment	Text alignment, Left	Number alignment, Center
Disabled opacity	50%, the field only	40%, and it also fades a − or + button once the number reaches a limit

Buttons

The structural choice — pick it first. Layout decides whether there are buttons at all; Button look decides whether they're part of the field or stand beside it.

Setting	Options (default)	What it controls
Layout	Picture cards: Split (default) / Right / Stacked / No buttons	Where the − and + buttons sit
Button look (all layouts except No buttons)	Picture cards: Attached (default) / Inline / Separate	Whether the buttons are part of the field, icons inside it, or buttons of their own beside it
Icon (Split, Right)	Picture cards: Plus & minus (default) / Chevrons / Triangles	The symbol on each button
Icon (Stacked)	Picture cards: Chevrons (default) / Triangles	The symbol on each button. Kept separately from the Split and Right icon, so switching layouts never carries one over
Button width (all layouts except No buttons)	Slider, 28–72px (44px)	The width of each button
Gap between buttons and field (Separate only)	Slider, 0–24px (8px)	The space between the field and the buttons. With Right, it also separates the two buttons
Icon size (all layouts except No buttons)	Slider, 10–24px (14px)	The size of the symbol

In-app help:

• Layout: Where the − and + buttons sit. Customers can always type a number too, and the Up and Down arrow keys step it.
• Button look: Attached buttons are part of the field, inline ones are icons inside it, and separate ones stand beside it. Separate buttons follow the corner style, so Pill makes them round.

Buttons always take the field's full height — Stacked buttons share it, one above the other — so Spacing under Field style changes their height too. 44px wide keeps them easy to tap on a phone.

What each Layout looks like

Layout	Arrangement	Icons
Split	− on the left of the number, + on the right	Chevrons and Triangles point left on −, right on +
Right	The number, then − and + side by side on its right	As Split
Stacked	The number, with + above − in one column on its right	Chevrons and Triangles point up on +, down on −
No buttons	The number field alone	—

With No buttons, every other setting under Buttons is hidden and the editor shows a note instead: Customers type the number. The Up and Down arrow keys still step it by the option's Step. The browser's own small up and down arrows are hidden too, with or without buttons.

Button Colors

Under the Idle and Hover headings. Which background setting appears depends on the Button look.

Setting	Options (default)	What it controls
Button background — Idle (Attached, Separate)	Color, transparent allowed (worked out from your theme; #F4F4F5)	Button fill at rest
Button background — Idle (Inline, with Split or Right)	Color, transparent allowed (transparent)	The round shape behind the icon, at rest
Icon color — Idle	Color (your theme input text color; #111827)	The symbol at rest
Button background — Hover (Attached, Separate)	Color, transparent allowed (worked out from your theme; #E9EAEC)	Button fill under the cursor
Button background — Hover (Inline, with Split or Right)	Color, transparent allowed (worked out from your theme; #E9EAEC)	The round shape behind the icon under the cursor
Icon color — Hover	Color (worked out from your theme; #1D4ED8)	The symbol under the cursor

In-app help for the Inline Button background: A round shape behind the icon. Choose Transparent to show only the icon.

Attached and Separate button backgrounds start as your theme's input background shifted slightly toward your text color, so the three looks differ out of the box. The hover icon color is your input text color shifted toward your button color.

With Inline and Stacked together, the background settings are hidden and the editor explains why: Stacked inline buttons show only the icon — they are too flat for a round background, so the background settings are hidden.

How Button look combines with Field style

	Attached	Inline	Separate
Outlined	One bordered box; the buttons are segments of it, divided from the number by lines in the field's Border color and Border width	One bordered box with the icons inside it	A bordered field, and two bordered buttons beside it
Filled	One tinted box; the buttons are divided from the number by thin lines worked out from the fill and the Number color	One tinted box with the icons inside it	A tinted field, and two buttons filled with Button background, no borders
Underline	One line under the number and the buttons, no dividers — the buttons stand out by their Button background	One line under the whole row, with the icons on it	A line under the number, and two round buttons beside it
Corners	Round the outer corners of the whole box	Round the outer corners of the whole box	Round the field and each button. Pill makes the buttons round
Shadow	Around the whole box	Around the whole box	Under the field and under each button
Hover	The whole box takes the field's Hover colors when the cursor is anywhere on it; the button under the cursor also takes the Hover button colors	As Attached; the round shape appears behind the icon under the cursor	The field and each button change on their own. A bordered button takes the field's Hover Border color
Focus	The Focused colors and focus ring go around the whole box, buttons included	As Attached	The Focused colors and focus ring go around the number field only

Separate buttons on Underline

Corners are hidden on Underline, but Separate buttons there are always round, so they don't read as stray boxes next to a single line.

Field Style

Setting	Options (default)	What it controls
Field style	Picture cards: Outlined (default) / Filled / Underline	The overall look of the field
Corners (Outlined, Filled)	Picture cards: Global (default) / Pill / Square / Custom	Corner rounding of the field, and of Separate buttons
Corner radius (Custom corners only)	Number, 0–40px (6px)	Exact corner rounding
Spacing	Picture cards: Comfortable (default) / Compact	The field's padding and height together
Width	Picture cards: Full width (default) / Compact	Whether the field fills the column or stops at a fixed width
Compact width (Compact width only)	Slider, 120–400px (180px)	The width of the field, buttons included
Border width (Outlined, Underline)	Slider, 0–4px (1px, from your theme border width)	Border thickness — on Underline, the thickness of the line
Shadow (Outlined, Filled)	Dropdown: None (default, from your theme input shadow) / Subtle / Medium / Strong	Drop shadow

In-app help:

• Field style: Outlined draws a border around the field. Filled is a tinted box with no border, so the border settings are hidden. Underline draws only a bottom line, so corners, shadow and the background colors are hidden. Attached and inline buttons sit inside the same box.
• Corners: Global uses your store's corner radius, so it looks square when that radius is 0 — pick Pill, Square or Custom for a specific shape.
• Spacing: Sets the field's padding and height together. Compact suits forms with many fields.
• Border width: On the Underline style this is the thickness of the line.

Comfortable keeps the field at least 44px tall and Compact at least 36px, and the buttons follow.

On Underline, the number loses its side padding so it lines up with the label — except with Split, where the − button sits in front of it.

"Global" corners can look square

Global follows your store's corner radius from Borders & Shapes — so if that radius is 0, the field renders square. Pick Pill, Square or Custom when you want a specific shape regardless of the global value.

Compact width always leaves room for the number

Compact width includes the buttons and the gaps between them. If the buttons and gaps would leave the number less than 80px, the field grows past your Compact width to keep it readable — for example, two 72px Separate buttons with 24px gaps make the field at least 272px wide.

Label & Help Text

Two sections in one pane: where the label sits, and how the option's help text is presented.

Label

Setting	Options (default)	What it controls
Label position	Picture cards: Above (default) / Left	Where the label sits relative to the field
Label width (Left only)	Number, 60–320px (140px)	Width of the label column
Space between label and field	Slider, 0–24px (4px)	Gap between the two
Label size	Number, 10–28px (16px)	Label text size
Label weight	Regular / Medium / Semibold (default) / Bold	Label text weight
Label color	Color (your theme text color; #1F2937)	Label color

In-app help for Label width: Use the same width on every Number option so their fields line up.

Left labels stack when there isn't room

Left places the label beside the field only when it fits. On screens 768px wide and below — and on any screen when the column the option sits in is too narrow — the label stacks above the field instead. "Too narrow" means less room than the label width, the gap, the buttons and about 120px for the number: with the defaults (140px label, Split buttons 44px wide), that's a column under about 350px.

Help Text

Setting	Options (default)	What it controls
Help text display	Picture cards: Above field (default) / Below field / Tooltip / Hidden	How the option's help text is shown

In-app help: Replaces the store-wide Help Text Display Mode for options using this template. Tooltip shows an "i" beside the label that reveals the help text on hover.

Shown for Above field and Below field:

Setting	Options (default)	What it controls
Help text color	Color (your theme text color; #4B5563)	Help text color
Help text size	Number, 10–20px (14px)	Help text size
Help text style	Dropdown: Italic (default) / Regular	Help text style

Shown for Tooltip:

Setting	Options (default)	What it controls
Icon color	Color (your theme text color; #6B7280)	The "i" beside the label
Tooltip position	Picture cards: Top (default) / Bottom	Whether the bubble opens above or below the "i"
Tooltip background	Color (#1F2937)	Bubble fill
Tooltip text	Color (#FFFFFF)	Bubble text color
Tooltip text size	Number, 10–18px (14px)	Bubble text size
Tooltip max width	Slider, 120–400px (250px)	Widest the bubble gets before the text wraps

In-app help for Icon color: The "i" beside the label. On hover it fills with the tooltip colors.

Shown for Hidden: no settings, just a note — Options using this template show no help text, even when the option has some.

Help text display overrides your store-wide setting

For every Number option using this template, Help text display replaces the store-wide Help Text Display Mode.

With Hidden, no help text appears on those options at all, even when the option has some — the text stays saved, it just isn't rendered.

Number options with no template assigned keep following the store-wide setting, as before.

Field Colors

Number color and Placeholder are set once and apply in every state. The field's own colors are set separately for Idle, Hover and Focused (while the customer is typing), each under its own heading. Which ones appear depends on the Field style: Background for Outlined, Fill color for Filled, and Border for Outlined and Underline.

Setting	Options (default)	What it controls
Number color	Color (your theme input text color; #111827)	The number the customer types — all field styles
Placeholder	Color (your theme placeholder color; #6B7280)	The hint shown in the empty field — the option's Placeholder, or Enter number when it has none
Background — Idle (Outlined)	Color (your theme input background; #FFFFFF)	Field fill at rest
Fill color — Idle (Filled)	Color (worked out from your theme; #F4F4F5)	Field fill at rest
Border — Idle (Outlined, Underline)	Color (your theme input border; #D1D5DB)	Border, or underline, color at rest
Background — Hover (Outlined)	Color (worked out from your theme; #F9FAFB)	Field fill under the cursor
Fill color — Hover (Filled)	Color (worked out from your theme; #E9EAEC)	Field fill under the cursor
Border — Hover (Outlined, Underline)	Color (worked out from your theme; #9CA3AF)	Border, or underline, color under the cursor
Background — Focused (Outlined)	Color (worked out from your theme; #F8FAFF)	Field fill while the customer types
Fill color — Focused (Filled)	Color (worked out from your theme; #EEF2FD)	Field fill while the customer types
Border — Focused (Outlined, Underline)	Color (worked out from your theme; #2563EB)	Border, or underline, color while the customer types

In-app help:

• Number color: The number the customer types. It keeps one color on hover and while typing; the field, its border and the focus ring show the state.
• Placeholder: The hint shown in the empty field.
• Border (Focused): Shown while the customer is typing. The focus ring itself is set under Focus, error & disabled.

Hover colors start as your theme's input colors shifted slightly toward your text color; focused colors are shifted toward your button color. That's why the focused field gets a faint tint rather than keeping its resting background.

With Attached and Inline buttons, these colors paint the whole box, buttons included. With Separate buttons and No buttons, they paint the number field only.

Filled has its own fill

Unlike Short Text, Filled doesn't reuse the Outlined Background. It has its own Fill color, a light tint by default, so a Filled field stays visible even when your theme's input background is the same color as your page.

Contrast warnings

Number color, Placeholder, Icon color and several other colors warn when they'd be hard to see against what's behind them — for example "Low contrast with … Text needs 4.5:1 to stay readable." The check follows your current Field style and Button look, so the same color can warn with one look and not another.

Text

How the number the customer types is rendered.

Setting	Options (default)	What it controls
Font size	Number, 10–28px (16px)	Size of the number
Font weight	Regular / Medium (default) / Semibold / Bold	Weight of the number
Letter spacing	Number, −1 to 4px in steps of 0.5 (0px)	Spacing between digits
Number alignment	Picture cards: Left / Center (default) / Right	Where the number sits in the field
Mobile font size	Number, 10–24px (empty — uses Font size)	Replaces Font size at 768px wide and below

In-app help:

• Number alignment: Center suits Split buttons. Left lines the number up with the label.
• Mobile font size: Optional override at 768px wide and below. Leave empty to use the same size everywhere.

Focus, Error & Disabled

Setting	Options (default)	What it controls
Focus ring	Toggle (on)	The ring shown while the field is focused
Focus ring color (Focus ring on)	Color (your theme button color; #2563EB)	Ring color
Focus ring width (Focus ring on)	Slider, 1–5px (2px)	Ring thickness
Error color	Color (#DC2626)	The message under the field, and the field's border, when the number isn't accepted
Disabled opacity	Slider, 10–100% (40%)	How faded a − or + button looks once the number reaches the Lowest or Highest value — and how faded the field looks if your theme disables the form

In-app help for Error color: Applies to the message under the field and to the field's border when validation fails. Turn on Show error state in Manage preview to see it.

Where the focus ring is drawn:

Button look	Focus ring
Attached, Inline	Around the whole box, buttons included, with a small gap
Separate, No buttons	Around the number field, with a small gap
Any, on Underline	A thicker line under the field, in the ring color — under the whole row with Attached and Inline

The ring stays visible on a field showing an error, too.

Turning the focus ring off

With the ring off, only the Focused colors from Field colors mark the field the customer is typing in — the Focused Border on Outlined and Underline, the Focused Fill color on Filled. Make sure they're clearly different from Idle.

What a field with an error looks like:

Field style	The field
Outlined	Border in the Error color
Filled	A thin ring in the Error color (Filled has no border to recolor)
Underline	Underline in the Error color

With Attached and Inline, the whole box takes the error look, buttons included. With Separate and No buttons, only the number field does — Separate buttons keep their own look. A field showing an error keeps its Idle background on hover.

Seeing the error state

You don't have to fail an Add to cart on a live storefront to style the error look: in Manage preview, turn on Show error state — see Sandbox & Live Preview.

On the Storefront

The − and + Buttons

The buttons follow the Lowest value, Highest value and Step set on the option — see Range and Step.

• Each press moves the number by the Step, or by 1 when the option has no Step
• At the Lowest value the − button fades to the Disabled opacity and can't be pressed; at the Highest value the + button does. With no Lowest or Highest value, that button never fades
• A number that isn't on a step moves to the nearest allowed number in the direction pressed: with Step 1, 2.3 becomes 3 on + and 2 on −. With no Step every number is allowed, so the buttons simply add or subtract 1: 2.5 becomes 3.5 or 1.5
• An empty field counts as 0: + gives the first allowed number above 0 (1 with no Step), and − the first one below 0, kept within the Lowest and Highest value. So when the Lowest value is above 0, either button on an empty field fills in the Lowest value
• A typed number beyond a limit is brought back in one press: with a Highest value of 6, 9 becomes 6 on −, and + stays faded
• Pressing a button clears an error on the field, as typing does

Typing and the Keyboard

• Customers can always type a number, whatever the Layout
• The Up and Down arrow keys step the number by the Step (by 1 when there's none) and stop at the Lowest and Highest value
• The buttons aren't Tab stops: Tab moves from the number field straight to the next option. Pressing a button leaves the cursor in the field, so on a phone the keyboard stays open
• Screen readers name the buttons after the option's label — for an option labelled Adults, Decrease Adults and Increase Adults. These two names are always in English

Errors

A required Number left empty shows your Option Required Message under the field — for an option labelled Adults, "Adults is required". A number outside the range, or off the step, shows a range message instead — see Number → On the Storefront. Both are drawn in the Error color, and the field takes the error look described above. The error clears as soon as the customer types or presses − or +.

Phones and Narrow Columns

• Mobile font size, when set, replaces Font size at 768px wide and below
• Label position: Left stacks the label above the field at 768px wide and below, and in any column too narrow for the label, the buttons and the number — see Label
• The buttons keep their Button width on phones

Options Without a Template

Number options on Global styles look exactly as they did before templates existed: a plain number field in your theme's input colors, with no − and + buttons — just whatever small up and down arrows the customer's browser draws for number fields — and help text following the store-wide Help Text Display Mode. The Lowest value, Highest value and Step still apply to typing and the arrow keys.

How to Style Number

1. Open the Style Settings modal (see Customization Overview)
2. Click Types → Number
3. Create a new template or click an existing one to edit it
4. Use the left navigation to jump between Buttons, Field style, Label & help text, Field colors, Text, and Focus, error & disabled
5. Pick a Layout and Button look first — they decide which button settings appear, and No buttons hides the rest of the Buttons pane
6. Set the button colors under the Idle and Hover headings in Buttons, and the field's colors under the Idle, Hover and Focused headings in Field colors
7. Click Manage preview to put your own label, placeholder, range, value and help text in the preview, or to see the error state — see Sandbox & Live Preview
8. Click Save in the contextual save bar

Assign the template on the option itself: open a Number option, click Style Settings, and pick a template card (or Global styles). Then save the option set.

Related

• Number (option type) — how to add a Number option and set its Lowest value, Highest value and Step
• Types Settings — how templates work and how to assign one to an option
• Sandbox & Live Preview — build a test field with your own range and preview the error state
• Help Text Display Mode — the store-wide setting this template can override
• Language Settings — the message shown under a required field left empty
• Short Text Styling — the template Number is built on
• Accordion Styling
• Checkbox Styling
• Radio Styling
• Swatches Styling
• Tabs Styling
• File Upload Styling
• Slider Styling
• Date Range Styling
• Time Picker Styling
• Modal Styling
• Short Text Group Styling
• Formula Styling
• Telephone Styling