Liquid and HTML in your texts
Use Liquid and simple HTML in form and field texts: link your privacy policy, greet a logged-in customer or pre-fill a field with their email.
The texts of a form can contain Liquid and a small set of HTML. With Liquid a text can show your shop's name, greet a logged-in customer or pre-fill a field; with HTML it can carry a link, bold words or a list.
Shopify itself runs the Liquid when the form is loaded on your storefront, so the objects you know from your theme are available, for example shop, customer, localization and routes.
Where it works
| Text | Liquid | HTML |
|---|---|---|
| Form description, message after sending | Yes | Yes |
| Field label (also the Label on this form), help text | Yes | Yes |
| Heading and Paragraph blocks | Yes | Yes |
| Form title, button label | Yes | No, shown as plain text |
| Placeholder, default value, option labels | Yes | No, shown as plain text |
The same goes for the translations of these texts. See Languages.
Validation settings (lengths, minimum, maximum, pattern), option values and handles are not texts: Liquid is not run there.
Examples
Link your privacy policy
This is the label of the default field Privacy consent. The link points to the privacy policy of your store, which you manage under Settings > Policies in your Shopify admin.
I have read and agree to the <a href="{{ shop.privacy_policy.url }}" target="_blank">privacy policy</a>.If your store has no privacy policy there, the link has no address. Point it at your own page instead:
I have read and agree to the <a href="/pages/privacy" target="_blank">privacy policy</a>.Greet a logged-in customer
For example as the form's description or in a Paragraph block. A guest sees the second line.
{% if customer %}Hi {{ customer.first_name }}, how can we help?{% else %}How can we help?{% endif %}Pre-fill the email
Enter this as the Default value of an email field. A logged-in customer finds their address already filled in and can still change it; for a guest the field starts empty.
{{ customer.email }}Show your shop's name
For example as the message after sending.
Thank you for your message. The <b>{{ shop.name }}</b> team will get back to you.Allowed HTML
| What | Tags |
|---|---|
| Links | <a> |
| Bold, italic, underline, strikethrough | <b>, <strong>, <i>, <em>, <u>, <s> |
| Line breaks and paragraphs | <br>, <p> |
| Lists | <ul>, <ol>, <li> |
| Small text and spans | <small>, <span> |
- Any other tag is reduced to its text. Scripts and styles are removed entirely.
- A link's address can be an
https://orhttp://link, a path on your shop such as/pages/privacy,mailto:,tel:or#. A link with any other address is shown without an address. - Add
target="_blank"to open a link in a new tab. Other attributes are dropped.
What is checked when you save
- Broken Liquid is refused. A text whose Liquid cannot be read, for example an unclosed tag, is marked with the error and nothing is saved until you fix it.
- Some tags cannot be used. Tags that reach outside one text are refused:
layout,render,include,section,sections,capture,form,paginate,schema,javascript,stylesheet,styleandcontent_for.
Good to know
- A text for a logged-in customer is empty for a guest. Use an
ifaround it, as in the greeting above, when the text should read well for both. - Liquid runs when the form is loaded, not when it is sent. It cannot use what the visitor typed into the form.
- In lists inside the app, texts are shown without their Liquid and HTML.
- Submitted values are stored and sent to Shopify Flow as the visitor entered them. A pre-filled value is submitted like any other.
Next steps
- Fields and the field library - the fields and their texts.
- Languages - translate your texts.
- After sending: message, discount code and redirect - the message after sending.
