Workflow DocumentsWorkflow Documents
Getting startedThe template editor

The template editor

Copy page

The HTML, CSS, Branding and Settings tabs, the live preview with sample data or a real order, product or customer, and the PDF preview.

The editor has the template on the left and a live preview on the right. This page explains each tab, the preview and how saving works.

Open it from Templates by selecting a template.

The four tabs

Tab What you edit
HTML The content of the document: HTML with Liquid
CSS The styles of the document
Branding Colors, fonts and font size for this template only
Settings Name, what the template renders, description, file name, main language, paper size, margin, orientation and whether the template is on

HTML

The HTML is the body of the page. You do not write the page frame, the page size or the fonts yourself: the app adds them from the template's settings and your branding. Print data with Liquid, see Template variables and Liquid.

The Variables card under the code explains the data of this template and lists every variable when you expand it.

CSS

Plain CSS for your HTML. Your branding is available as CSS variables such as var(--brand-primary) and var(--brand-border), so a change in Settings reaches the template without touching its CSS. For print layout, the usual CSS for paged media works, for example page-break-inside: avoid on a table row.

Branding

Colors, fonts and font size for this template only. A field you leave empty uses your brand: it shows the brand value as a placeholder or as Brand default. Reset to brand removes the template's own values. The logo and the company details always come from Settings. See Branding your documents.

Settings

Field What it does
Name The Generate document action in Shopify Flow finds the template by this exact name
Renders What one document is about: An order, A product or A customer
Description A note for yourself
File name The name of the PDF, with Liquid. ".pdf" is added
Main language The language this template is written in
Paper size, Margin, Landscape The page. See Paper size, margins and file name
Template is on When off, Flow and the API refuse to generate documents with it

The preview

The preview renders the template as you type, a moment after you stop. It shows the page in its real proportions, scaled to the width of the pane, including the margin.

Preview with chooses the data:

  • Latest order, Latest product or Latest customer - the newest one in your store. This is the default. A store without any shows sample data and says so.
  • A specific order, A specific product or A specific customer - enter the order number, the product title, or the customer's email or name.
  • Sample data - a made-up order, product or customer, useful when you do not want real data on screen.

Under the selector, the preview says what it is showing, for example Showing #1001.

If the template has an error, the preview shows the message with its line instead of the page. Fix the line and the preview comes back.

Preview PDF

Preview PDF renders the actual PDF from what is on screen, unsaved changes included, and opens it. Use it before you save a larger change: the PDF is the real result, with page breaks and fonts exactly as a workflow would produce them.

Previews are free. They do not count toward your plan and do not appear in the document history.

Saving

When you change anything, a save bar appears at the top with Save and Discard. Leaving the page with unsaved changes asks first.

A save is refused when the template does not render. The error is shown on the field it belongs to, so a workflow never meets a template that cannot produce a document.

The buttons at the top

  • Documents - the history, filtered to this template.
  • Add language - add a language to the template. See Templates in several languages.
  • Delete - delete the template permanently.

Once a template has more than one language, a language selector appears next to the tabs. It switches between the main language and each added language.

Next steps