Modal

Show a button on the product page that opens a pop-up with your content — a size guide, care instructions, or a policy — without taking up space until a customer asks for it.

Overview

Modal is a static option type. On the storefront it renders as a single button; clicking it opens a pop-up containing content you write in the admin. The customer reads it and closes it — nothing is selected, submitted, or added to the cart.

You write the content in one of two editors, and you can switch between them at any time: the Rich text editor (the same one Rich Text uses) or the HTML Block editor (the same one HTML Block uses). Because they're the same editors, anything that improves those types reaches Modal too.

Use Modal for:

• Size guides and measurement tables
• Care and washing instructions
• Shipping, returns, and policy detail
• Long instructions you don't want on the page by default
• Anything that would push the add-to-cart button too far down

Key characteristics:

• Static content (no customer input captured)
• Cannot be marked as required — it submits nothing
• No pricing and no value is added to cart
• Content is written in Rich text or HTML Block, whichever you pick
• Images are not supported in modal content
• Label can be shown or hidden on the storefront
• Cannot trigger a condition, but can be shown or hidden by one

Modal, Accordion, or Tabs?

All three hide content until a customer asks for it. Accordion and Tabs keep the content on the page and expand it in place. Modal takes it off the page entirely and opens it over the top, which suits longer content — a full size chart — that would disrupt the page layout even collapsed.

Configuration

Basic Settings

Setting	Description
Label	Option name (shown in admin and optionally on the storefront, above the button)
Hide Label from storefront	If enabled, only the button is shown

No "Required" checkbox

Modal is display-only — it submits no value, so the Required checkbox is hidden for this type, the same as for Spacing, Divider, Heading, Accordion, Tabs, Rich Text, and HTML Block.

Modal Settings

Setting	Options (default)	What it controls
Button label	text, max 255 characters (empty)	The text on the storefront button that opens the modal. Required. In-app help: The text on the button that opens the modal.
Modal title	text, max 255 characters (empty)	The heading inside the modal. Optional. In-app help: Shown as the heading inside the modal and announced to screen readers.
Content editor	Rich text / HTML Block	Which editor the content is written in. Only one is active at a time. In-app help: Switch editors any time — each one keeps its own content.
Content	rich text or HTML (empty)	What the modal shows. Required for the selected editor

Advanced Settings

Setting	Description
Internal Label	Admin-only identifier (replaces label in the options list)
Help Text	Additional guidance shown under the button (based on display mode)
CSS class / CSS ID	Your own selectors on this option's container — see CSS Class & CSS ID

The Two Content Editors

Content editor is a two-button switch above the content field. Pick the one that suits what you're writing:

Editor	Best for	Limit
Rich text (default)	Formatted content written with a toolbar — headings, bold, lists, links, colored text	1,000 visible characters
HTML Block	Tables, custom classes, inline styles — anything the toolbar doesn't cover	8,000 characters of markup

Everything on the Rich Text and HTML Block pages applies here — the same toolbar, the same allowed tags and attributes, the same sanitizing, the same character counters.

Switching editors never loses your work

The two editors keep separate content. Switching from Rich text to HTML Block shows an empty HTML Block the first time; switching back shows your Rich text content exactly as you left it. Both drafts are saved, and only the content of the selected editor is validated and rendered on the storefront.

That's also why an over-long draft parked in the editor you're not using still blocks the save — the stored content is capped either way. The error appears on the editor that's on screen and names the other one, so you know which to switch to and shorten.

Images aren't supported in modal content

Neither editor allows <img>, in a modal exactly as in a standalone HTML Block. If your content contains an image, a warning appears while you edit — Images are removed from modal content when it is saved. Use text or a table instead. — and the image is removed when you save. Inline CSS using url(...) is dropped the same way, so background images don't work either.

Scripts, event handlers, and unsafe HTML are stripped on save and again when the storefront renders — the same two-layer protection HTML Block and Rich Text get.

Validation

Message	Cause
Enter a button label.	Button label is empty or whitespace-only
Button label must be 255 characters or fewer.	Button label is over 255 characters
Modal title must be 255 characters or fewer.	Modal title is over 255 characters
Add content for the selected editor.	The active editor's content is empty or whitespace-only
This content is too long. Shorten it to save.	The active editor's content is over its limit
Your Rich text content is over 8,000 characters. Switch to the Rich text editor and shorten it.	The inactive Rich text draft is over the stored cap
Your HTML Block content is over 8,000 characters. Switch to the HTML Block editor and shorten it.	The inactive HTML Block draft is over the stored cap

The Modal title is optional — a modal with no title opens with just the close button in the header, and screen readers fall back to the button label for its name.

How to Add a Modal

1. Navigate to Option Sets and open your option set
2. Click Add Option
3. Select Modal from the Option Type modal (it's under the Static category)
4. Enter a Label, or enable Hide Label from storefront to show only the button
5. Configure Modal Settings:
   • Enter a Button label (e.g. "Size guide") — this is required
   • (Optional) Enter a Modal title
   • Choose a Content editor — Rich text or HTML Block
   • Write your Content, watching the character counter
6. (Optional) Click Advanced Settings for an Internal Label, Help Text, or a CSS class/ID
7. (Optional) Expand Style settings to assign a Modal template
8. Click Save in the contextual save bar

On the Storefront

The option renders as a button (with your Label above it, unless you hid it). Clicking the button opens the modal centered over the page, with the content behind it dimmed and lightly blurred.

A customer can close the modal three ways:

• The X in the modal header
• The Escape key
• A click on the dimmed backdrop

While the modal is open, the page behind it doesn't scroll, and keyboard focus stays inside the modal. When it closes, focus returns to the button that opened it.

Where the pop-up can't open

In Shopify POS, and in the rare browser with no support for the underlying dialog element, the content opens in place beneath the button instead of over the page. Everything else works the same — the same content, the same button, focus still returns to it on close.

Conditions

Modal cannot be selected as a condition trigger — it has no value for a rule to test, so it isn't offered in the rule picker. It can be the target of another option's condition, so you can show a size guide only when a certain size is chosen, or hide a care guide for certain products.

See Setting Up Conditions.

Cart and Orders

Modal contributes no line-item property. Nothing about it appears in the cart, at checkout, or on the order — it's presentation only.

Use Cases

Size guide

Label: (Hidden) Button label: Size guide Modal title: Size guide Editor: HTML Block, containing a sizing table

Result: A compact link-sized button next to the size selector that opens a full measurement table, without pushing add-to-cart below the fold.

Care instructions

Label: (Hidden) Button label: How to care for this Modal title: Care instructions Editor: Rich text — a short heading and a bulleted list

Result: Care detail available on demand, written without touching markup.

Personalization guidance

Label: Personalization Button label: See engraving examples Modal title: Engraving guide Editor: Rich text — character limits, font notes, and a link to the full guide

Result: Context for the personalization fields below it, shown only to customers who want it.

Conditional policy note

Label: (Hidden) Button label: Final sale details Modal title: Final sale Editor: Rich text

Result: Paired with a condition, the button only appears when a customized option is selected.

Styling

Modal inherits styling from your theme and customization settings:

• Font: Uses your storefront typography from Templates
• Colors: Uses styling from Colors
• Spacing: Follows option spacing from Borders & Shapes

For deeper control — the trigger button's style and states, the modal's size, corners, shadow and spacing, the backdrop, the header and the open animation — create a dedicated Modal template. See Modal Styling.

The content inside the modal keeps the shared Rich Text and HTML Block styling, so a Modal template styles the frame around it, not the body text.

Best Practices

Write a button label that says what's inside:

• "Size guide" beats "Click here" — customers decide whether to open it from the label alone
• Keep it short; it's a button, not a sentence

Give the modal a title:

• It's optional, but it confirms what opened and is what screen readers announce
• Matching the button label is usually the clearest choice

Pick the editor before you write:

• Rich text for prose, lists, and links — no markup, 1,000 visible characters
• HTML Block for tables and custom styling — 8,000 characters of markup
• Either is fine to change later, but you'll be rewriting the content in the other editor

Reach for Modal when in-page content would crowd the page:

• A full size chart belongs in a modal; a one-line shipping note doesn't
• For content customers should see without clicking, use Rich Text or HTML Block
• For several short sections, Accordion or Tabs keep them in place

Troubleshooting

Can't save — "Enter a button label": Button label is required. Without it, the storefront would have nothing to click

Can't save — "Add content for the selected editor": The editor currently shown is empty. Content in the other editor doesn't satisfy this — switch to it, or write content here

Can't save — an error naming the other editor: A draft parked in the editor you're not using is over 8,000 characters. Switch to it and shorten it

My image disappeared: Expected — images aren't supported in modal content. Use a table or text instead

The button shows but nothing opens: Check the option isn't hidden by a condition, and that the content isn't empty

The pop-up opens in the page instead of over it: That's the POS and legacy-browser fallback described above

Related

• Rich Text — the editor Modal uses by default, also available as its own always-visible option type
• HTML Block — Modal's other editor, also available on its own
• Accordion and Tabs — hidden content that stays on the page
• Modal Styling — style the button, the modal, the backdrop and the header
• Hide Labels — controlling label visibility
• Internal Label — admin-only identification
• CSS Class & CSS ID — target this option from your theme CSS
• Setting Up Conditions — show or hide a modal conditionally