Paragraph Text Styling

Style every visual detail of the Paragraph Text option type — the look and height of the field, its label and help text, the character counter, the colors it takes while a customer types, and how it looks when a required field is left empty — 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 Paragraph Text template, grouped the same way they appear in the editor's left navigation: Field style, Label & help text, Character counter, Field colors, Text, and Focus & error.

A Paragraph Text template is built on the Short Text template: the label, help text, color, text and focus settings work the same way, so if you've styled Short Text you already know most of this editor. What's new is everything a longer message needs — four field styles made for writing in (including a note card and lined paper), a Height that can grow with the text, a label that can sit in a tab on top of the field, and a Character counter section.

Two settings change what appears on the page, not just how it looks: Counter style can hide the counter, and Help text display replaces the store-wide Help Text Display Mode for every option using the template.

Three states, not two

A text field has nothing to select, so its third state is focus — the field the customer is currently typing in. The field's Background (or Fill), Border and Text colors are set separately for Idle, Hover and Focused, each under its own heading on the same pane.

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.

Paragraph Text has its own templates

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

What's different from Short Text

	Short Text	Paragraph Text
Field style	Outlined / Filled / Underline	Outlined / Filled / Note card / Lined paper
Filled	A tinted box with no border	A faint tint with a line along the bottom — Border width and Border set that line — and its own Fill color per state
Corners	Global / Pill / Square / Custom, Custom radius 6px	Global / Square / Custom (no Pill), Custom radius 8px
Spacing	Padding and height together	Padding only — Height sets the height
Height, Customers can drag to resize	—	New, under Field style
Label position	Above / Left	Above / Beside / Tab, with a Tab color for Tab
Space between label and field	4px	8px, and not shown for Tab
Tooltip text size, Tooltip max width	Settings	Fixed at 14px and 250px
Character counter	—	New section
Letter spacing	Setting	—
Typeface	—	New, under Text
Background — Focused	#FFFFFF, the same as Idle	A faint tint of your button color (#FCFCFD)
Focus	Focus ring on/off, Focus ring color, Focus ring width	Focus style Ring or Glow — focus can't be turned off — Focus color, Focus width
Disabled opacity	Setting	—
Last section	Focus, error & disabled	Focus & error

Field Style

The structural choice — pick it first, since it decides which of the settings below appear.

Setting	Options (default)	What it controls
Field style	Picture cards: Outlined (default) / Filled / Note card / Lined paper	The overall look of the field
Accent bar (Note card only)	Color (your theme button color; #2563EB)	The bar down the left edge of the card
Line color (Lined paper only)	Color (worked out from your theme; #E5E7EB)	The rules under each line of text
Corners	Picture cards: Global (default) / Square / Custom	Corner rounding of the field, in every field style
Corner radius (Custom corners only)	Number, 0–40px (8px)	Exact corner rounding
Spacing	Picture cards: Comfortable (default) / Compact	The padding inside the field
Border width (Outlined, Filled, Lined paper)	Slider, 0–4px (1px, from your theme border width)	Border thickness — on Filled, the thickness of the bottom line
Shadow (Outlined, Filled, Lined paper)	Dropdown: None (default, from your theme input shadow) / Subtle / Medium / Strong	Drop shadow under the field

In-app help:

• Field style: Outlined draws a border around the field. Filled is a tinted box with a line along the bottom. Note card is a raised card with an accent bar. Lined paper draws a rule under every line of text.
• Accent bar: The bar down the left edge of the note card. It turns the error color when validation fails.
• Line color: The rules drawn under each line of text.
• Corners: Global uses your store's corner radius, so it looks square when that radius is 0 — pick Square or Custom for a specific shape.
• Spacing: Sets the padding inside the field. Compact suits forms with many fields.
• Border width: On Filled this is the thickness of the bottom line.

What each Field style looks like

Field style	The field	Settings it uses
Outlined	A box in your Background color with a border on all four sides	Border width, Shadow, Background, Border
Filled	A faintly tinted box with a line along the bottom only. Only the top corners are rounded; the bottom corners stay square so the line runs straight	Border width (the line), Shadow, Fill, Border (the line)
Note card	A raised card in your Background color with a 4px Accent bar down the left edge and no border. It always has its own soft card shadow	Accent bar, Background
Lined paper	A bordered box with a rule under every line of text, like a notebook page. The rules scroll with the text and stay spaced to the text size	Line color, Border width, Shadow, Background, Border

With Note card, Border width, Shadow and the Border colors are hidden — the accent bar and the card shadow are the look. With Filled, the Background colors are replaced by Fill colors.

Comfortable spacing puts 12px of padding above and below the text and 14px at the sides; Compact puts 8px and 12px. Spacing doesn't set the height — Height does, below.

"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 Square or Custom when you want a specific shape regardless of the global value. There's no Pill option: a fully rounded end doesn't suit a field several lines tall.

Size

Setting	Options (default)	What it controls
Height	Picture cards: Small / Medium / Large / Grow with text (default)	How tall the field is
Customers can drag to resize (Small, Medium, Large)	Toggle (on)	Whether customers can drag the field's bottom corner to change its height

What each Height looks like:

Height	The field
Small	3 lines tall. Longer text scrolls inside the field
Medium	5 lines tall, then scrolls
Large	8 lines tall, then scrolls
Grow with text	Starts 4 lines tall and grows a line at a time as the customer types, up to 12 lines; after that it scrolls. It shrinks back when text is deleted, and has no drag handle

Lines are counted at the field's own Font size — each line is 1.5 times the font size — so a bigger font makes a taller field, and on phones the Mobile font size rescales the height too. With the defaults (14px text, Comfortable spacing, a 1px border), a Medium field is about 131px tall.

With Customers can drag to resize on, customers can drag a fixed-height field taller, or shorter down to two lines. Turn it off to keep the field at exactly the height you chose. The drag handle is the customer's own browser's, so whether it appears depends on the browser; where there's none, longer text scrolls inside the field.

Grow with text in browsers that can't auto-size

Growing with the text needs a browser that can size a field to its contents. In one that can't, Grow with text shows a 4-line field that customers can drag taller, up to 12 lines.

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) / Beside / Tab	Where the label sits relative to the field
Label width (Beside only)	Number, 60–320px (140px)	Width of the label column
Tab color (Tab only)	Color (worked out from your theme; #EFF0F1)	The background of the tab behind the label
Space between label and field (Above, Beside)	Slider, 0–24px (8px)	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 — on the tab, with Tab

In-app help:

• Label position: Beside places the label next to the field. When there isn't room for the label and a comfortable field — on phones, or in a narrow column like the option set preview — the label moves above the field. Tab joins the label to the top of the field like a folder tab; help text set to Above field sits above the tab.
• Label width: Use the same width on every Paragraph Text option so their fields line up.
• Tab color: The background of the tab behind the label.

What each Label position looks like:

Label position	Arrangement
Above	The label on its own line, above the field
Beside	The label in a column to the left of the field, its first line level with the field's first line of text. Help text set to Above field sits under the label, in the label column
Tab	The label inside a colored tab joined to the top of the field at its left edge, like a folder tab. The field's top-left corner is squared off so the tab sits flush, and the tab's top corners follow your Corners setting. A long label wraps inside the tab. Help text set to Above field sits above the tab

There's no Space between label and field for Tab — the tab is always joined to the field.

Beside labels move above when there isn't room

Beside keeps the label next to the field only while there's room for the label and a field at least 200px wide. On screens 768px wide and below — and on any screen when the column the option sits in is narrower than the label width, the gap and 200px — the label, help text and error message stack above and below the field instead. With the defaults (140px label, 8px gap), that's a column under about 350px.

If the option has Hide Label from storefront turned on, a Tab template shows no tab and the field keeps its rounded corner, and a Beside template gives the field the full width.

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

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

The bubble's text is always 14px and the bubble is at most 250px wide — unlike Short Text, there are no size or width settings for it. With Tab, the "i" sits inside the tab after the label.

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

Help text set to Below field sits under the field and its counter.

Help text display overrides your store-wide setting

For every Paragraph Text 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.

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

Character Counter

The pane opens with a note: The counter shows only on options with a max length. Without one there is nothing to count. Set the limit on the option itself — see Max Length.

Setting	Options (default)	What it controls
Counter style	Picture cards: Below field (default) / Progress bar / Hidden	How customers see how much they've written
Counter color (Below field, Progress bar)	Color (worked out from your theme text color; #5F6774)	The count, and the fill of the progress bar

In-app help:

• Counter style: Below shows "120 / 200" under the field. Progress bar adds a thin bar that fills as customers type.
• Counter color: Turns bold at 90% of the limit and switches to the error color when the limit is reached.

What each Counter style looks like:

Counter style	Under the field
Below field	A count such as "120 / 200", at the right
Progress bar	The same count, with a thin bar above it that fills from left to right as the customer types
Hidden	Nothing. The editor shows a note instead: Customers won't see a count. The field still stops at the max length.

How the count changes as the customer types (for a 200-character limit):

Characters typed	The count
0 to 179	"0 / 200" up to "179 / 200", in the Counter color — it shows from the start, before anything is typed
180 to 199 (90% or more)	Turns bold, still in the Counter color
200	"200 / 200" in bold and the Error color — the progress bar's fill turns the Error color too

The count is 80% of the field's Font size, never smaller than 12px, and uses the same font as the rest of your options.

Field Colors

Placeholder is set once and applies 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, Note card and Lined paper, Fill for Filled, and Border for Outlined, Filled and Lined paper. Text appears in every style.

Setting	Options (default)	What it controls
Placeholder	Color (your theme placeholder color; #6B7280)	The hint shown in the empty field — the option's Placeholder, or Enter your text... when it has none
Background — Idle (Outlined, Note card, Lined paper)	Color (your theme input background; #FFFFFF)	Field fill at rest
Fill — Idle (Filled)	Color (worked out from your theme; #F9F9FA)	Field fill at rest
Border — Idle (Outlined, Filled, Lined paper)	Color (your theme input border; #D1D5DB)	Border color at rest — on Filled, the bottom line
Text — Idle	Color (your theme input text color; #111827)	The typed text at rest
Background — Hover (Outlined, Note card, Lined paper)	Color (worked out from your theme; #F9FAFB)	Field fill under the cursor
Fill — Hover (Filled)	Color (worked out from your theme; #F7F7F8)	Field fill under the cursor
Border — Hover (Outlined, Filled, Lined paper)	Color (worked out from your theme; #9CA3AF)	Border color under the cursor
Text — Hover	Color (your theme input text color; #111827)	The typed text under the cursor
Background — Focused (Outlined, Note card, Lined paper)	Color (worked out from your theme; #FCFCFD)	Field fill while the customer types
Fill — Focused (Filled)	Color (worked out from your theme; #FCFCFD)	Field fill while the customer types
Border — Focused (Outlined, Filled, Lined paper)	Color (worked out from your theme; #2563EB)	Border color while the customer types
Text — Focused	Color (your theme input text color; #111827)	The typed text while the customer types

In-app help:

• Placeholder: The hint shown in the empty field.
• Border (Idle): On Filled this is the line along the bottom of the field.
• Border (Focused): Shown while the customer is typing. The focus style itself is set under Focus & error.

Hover colors start as your theme's input colors shifted slightly toward your text color; focused colors are shifted toward your button color. Text starts as your theme's input text color in all three states, so it only changes when you change it — set a different Hover or Focused Text if you darken that state's background.

Filled stays faint on purpose

Filled has its own Fill, a very light tint by default, so the placeholder stays readable on it. What keeps a Filled field visible on a white page is its bottom line — use Border and Border width to make it stand out, rather than darkening the fill.

Contrast warnings

Placeholder, Text, Label color, Help text color, Icon color, Tooltip text, Counter color, Accent bar, Focus color and Error color warn when they'd be hard to see against what's behind them — for example the field's Background or Fill in that state, the tab for a Tab label, or your page for the counter. The check follows your current Field style and Label position.

Text

How what the customer types is rendered.

Setting	Options (default)	What it controls
Typeface	Picture cards: Store font (default) / Serif / Typewriter	The font of the typed text and the placeholder
Font size	Number, 10–28px (14px)	Size of the typed text — and, through the line count, the field's height
Font weight	Regular (default) / Medium / Semibold / Bold	Weight of the typed text
Text alignment	Picture cards: Left (default) / Center / Right	Alignment of the typed text
Mobile font size	Number, 10–24px (empty — uses Font size)	Replaces Font size at 768px wide and below

In-app help:

• Typeface: Applies to what the customer types and the placeholder. Serif and Typewriter use fonts already on the customer's device.
• Font size: Below 16px, iPhones zoom the page when a customer taps the field. If you go smaller, set a mobile font size of 16px or more.
• Mobile font size: Optional size at 768px wide and below. 16px or more stops iPhones zooming in while customers type. Leave empty to use the same size everywhere.

Store font is the same font as the rest of your options. Serif is a classic book face such as Georgia or Times, and Typewriter a Courier-style face — both come from the customer's device, so no extra font has to load. The label, help text, counter and error message always keep the store font.

The space between lines is fixed at 1.5 times the font size, which is also what spaces the rules on Lined paper.

The default size makes iPhones zoom

Font size starts at 14px to match an unstyled Paragraph Text field, which is below the 16px iPhones need. If customers on iPhones will write in this field, set Mobile font size to 16px — the field's height grows to match, since it's counted in lines.

Focus & Error

Setting	Options (default)	What it controls
Focus style	Picture cards: Ring (default) / Glow	How the field shows it's the one being typed in
Focus color	Color (your theme button color; #2563EB)	The ring or glow color
Focus width	Slider, 1–5px (2px)	The ring's thickness, or the size of the glow
Error color	Color (#DC2626)	The message under the field, the field's border and the counter at its limit, when validation fails

In-app help:

• Focus style: Ring draws a crisp outline just outside the field. Glow surrounds it with a soft halo. Both stay visible for keyboard shoppers.
• Error color: Applies to the message under the field, the field's border and the counter at its limit. Turn on Show error state in Manage preview to see it.

What each Focus style looks like:

Focus style	While the customer is in the field
Ring	An outline in the Focus color, just outside the field with a small gap. The field's own shadow stays under it
Glow	A soft halo in the Focus color hugging the field. On Note card it's added around the card's shadow

The focus look shows whenever the customer is in the field, whether they clicked into it or reached it with Tab. There's no way to turn it off, and it still shows on a field with an error. The Focused colors from Field colors apply at the same time.

What a field with an error looks like:

Field style	The field
Outlined	Border in the Error color
Filled	Bottom line in the Error color, plus a thin Error color outline around the rest of the field
Note card	The Accent bar turns the Error color; the card keeps its shadow
Lined paper	Border in the Error color; the rules stay

The message under the field is drawn in the Error color too. A field showing an error keeps its Idle background (or fill) on hover.

Seeing the error state

A Paragraph Text option fails validation only when it's required and left empty on Add to cart. You don't have to reproduce that on a live storefront to style it: in Manage preview, turn on Show error state — see Sandbox & Live Preview.

On the Storefront

Typing and the Counter

• The field stops accepting text at the option's Max length, whatever the Counter style — even when the counter is Hidden
• The count shows from "0 / 200" before the customer types anything, and updates with every character. Some emoji count as two characters, as they do toward the Max length itself
• Screen readers don't announce the count
• A template changes only how the option looks: what the customer types reaches the cart exactly as before, and Required, Placeholder and Max length work as they did

Errors

A required Paragraph Text left empty shows your Option Required Message under the field — for an option labelled Gift message, "Gift message is required". It's drawn in the Error color, and the field takes the error look described above. The error clears as soon as the customer starts typing. Reaching the Max length is never an error — the field just stops accepting text.

Phones and Narrow Columns

• Mobile font size, when set, replaces Font size at 768px wide and below — and because heights are counted in lines, the field's height and the Lined paper rules rescale with it
• Label position: Beside stacks the label, help text and error above and below the field at 768px wide and below, and in any column too narrow for the label and a 200px field — see Label
• Tab and Above labels look the same on every screen size

In the Option Set Preview

When a template puts the label Beside or in a Tab, the option set editor's preview gives that option's edit buttons a strip of their own above it, so they don't cover the field or the tab. The preview's column is narrow, so a Beside label with the default width usually shows above the field there.

Options Without a Template

Paragraph Text options on Global styles look exactly as they did before templates existed: a 4-line field in your theme's input colors that customers can drag taller, with help text following the store-wide Help Text Display Mode. The field doesn't grow with the text. On an option with a Max length, a small grey count appears at the right under the field once the customer starts typing, written like "120 | 200".

Assigning a template — even one you haven't changed — switches the option to the template's look: by default a field that grows with the text, and a "0 / 200" counter from the start.

How to Style Paragraph Text

1. Open the Style Settings modal (see Customization Overview)
2. Click Types → Paragraph Text
3. Create a new template or click an existing one to edit it
4. Use the left navigation to jump between Field style, Label & help text, Character counter, Field colors, Text, and Focus & error
5. Pick a Field style and a Height first — the Field style decides which border, shadow and color settings appear
6. In Field colors, set each state's colors under its Idle, Hover and Focused heading
7. Click Manage preview to put your own label, placeholder, help text, max length and typed 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 Paragraph Text option, click Style Settings, and pick a template card (or Global styles). Then save the option set.

Related

• Paragraph Text (option type) — how to add a Paragraph Text option and set its Placeholder and Max Length
• Max Length — the limit the character counter counts against
• Types Settings — how templates work and how to assign one to an option
• Sandbox & Live Preview — build a test field with your own text 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 Paragraph Text 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
• Number Styling
• Telephone Styling