Skip to content

Layout and content

Four types display something without asking the customer anything: Heading, Paragraph, Divider and HTML.

They exist because a long option set becomes unreadable without them. Fourteen fields in a row is a wall; the same fourteen under three headings is a form.

A static type has no answer. That is not a restriction bolted on — it is what the type is:

  • Nothing is added to the cart line, so nothing appears on the order.
  • No pricing rule can be attached. The pricing form is not offered for these types at all.
  • They cannot be required, and they cannot be the target of a conditional rule’s condition — there is no answer to test.

They can be shown and hidden by a conditional rule, which is often the point: a paragraph of sizing guidance that appears only when Made to measure is chosen.

A section title placed between fields.

Use headings to break an option set into the stages a customer thinks in — Size, then Finish, then Personalisation. Keep them short; they are signposts, not sentences.

Limit: 500 characters, which is far more than a heading should ever need.

Explanatory text between fields.

This is where guidance belongs that a field’s own help text cannot hold: how to measure, what your lead time is, what Rush actually means. Put it directly above the field it explains, not at the top of the set where it will be skimmed past.

Limit: 500 characters. If you need more than that, you probably need an HTML block or a link to a page.

A horizontal rule.

Use a divider where a heading would be too loud — separating two related groups that do not each need a title. If you find yourself adding a divider directly above every heading, remove them: the heading already does that work visually.

Custom markup between fields, for anything the other three cannot express — a sizing table, an image, a link to a care guide.

Requires the Professional plan.

Markup is parsed with the browser’s own parser and rebuilt from an allowlist, so nothing survives that is not on it. This is checked twice: once when you save, where you are told what was removed, and again in the browser before it renders.

Allowed elements:

a abbr b blockquote br code dd div dl dt em
h2 h3 h4 h5 h6 hr i img li ol p pre s small
span strong sub sup table tbody td th thead tr u ul

Allowed attributes:

Where Attributes
Any allowed element class, title, dir, lang
<a> href, target, rel
<img> src, alt, width, height, loading

Everything else is dropped: <script>, <style>, <iframe>, <object>, <embed>, <form>, every on* event handler, and javascript:, vbscript: and data:text/html URLs.

style is not allowed, deliberately. An option set has its own custom CSS box for styling, and inline style is the usual vehicle for floating an element over the add-to-cart button.

Limit: 4,000 characters.

  • Host images somewhere stable and fast. They load on the product page, which is the one page where speed converts. Shopify’s own Files section is a reasonable home.
  • Use h2–h6, never h1. The product title is the page’s h1; a second one confuses screen readers and search engines alike.
  • Give every <img> an alt. It is allowed precisely so you can.
  • Style with class plus the option set’s custom CSS, not inline style — see Theme styling.

A made-to-measure blind, ordered so a customer never has to scroll back:

Heading Measurements
Paragraph Measure the recess, not the old blind. Width first, then drop.
Number Width (cm)
Number Drop (cm)
Divider
Heading Finish
Color swatch Fabric
Dropdown Chain side
Divider
Heading Before you order
HTML A care-and-cleaning table

Four of the eleven rows are static, and they are the reason the other seven read as three decisions instead of seven questions.