HTML

Your own HTML inside the option widget, for anything the other static types cannot produce.

A block where you write your own HTML, for anything the other static types cannot produce.

Use it last. A Paragraph, Pop-up modal, Size chart, or Tabs is easier to maintain and more likely to keep working when your theme changes. HTML you write yourself is yours to maintain.

What customers see

The HTML you wrote, displayed in the form.

Settings

Setting	What it does
Content	Your HTML, written in a code editor. Starts with a sample block.
Conditional logic	Show or hide the block.
HTML class / Column width	Styling hook and width.

When to use it

You want	Notes
A small table the rich-text editor cannot produce	For size tables use Size chart first — it is built for this
A badge, banner, or icon row in your own markup	Style it with a class and custom CSS rather than inline styles, so it stays maintainable
A layout the other types cannot express	Keep it simple; your theme's CSS also applies here
Content produced by another system	Paste the markup, but check it renders on mobile

When not to use it

• Formatted text. Use Paragraph, which gives the same result with an editor and nothing to maintain.

• A size table. Use Size chart, which has thirteen presets and a table editor.

• Several blocks of content. Use Tabs.

• Styling the widget. Use Settings > Design, or custom CSS with an HTML class. Do not rebuild parts of the widget in HTML.

• Collecting an answer. An HTML block collects nothing. A form field written here is not part of the option set, is not validated, and is not stored in the order. Use an input type instead.

Only paste markup you understand and trust. Content in this block is rendered directly on your product pages, so treat it like code added to your theme. Always check the result on a real product page and on a mobile device before going live.

Examples

A small badge row

<div class="gpo-badges">
  <span>Handmade</span>
  <span>3–5 day lead time</span>
  <span>Gift wrap available</span>
</div>

Styled with a .gpo-badges rule in custom CSS.

A short specification table

A two-column table of materials and measurements, where the content is fixed and is not a size chart.

A conditional notice

A styled notice block, displayed by conditional logic only when the customer selects an option with a long lead time.

Notes

• Available on the Advanced plan.

• Works in Shopify POS.

• The content can be translated for each storefront language, like other option content.

• Your theme’s CSS is applied to the block, so class names that conflict with existing theme classes may cause unexpected styling issues. To avoid conflicts, use a unique prefix for your class names.

• Test your content thoroughly on mobile. Fixed-width elements and wide tables are the most common causes of display issues.