Workflow Transactional EmailWorkflow Transactional Email

Content blocks: product, discount, countdown, tracking and more

Version 1.17 adds thirteen content blocks and two layout blocks to the visual builder. Every text field in them takes Liquid, so a product title or a tracking number can come from the workflow through {{ variables.xxx }}, and the canvas shows each block rendered with your test variables.

Blocks made of parts

The product card, the discount box, the testimonial, the signature, the video and the order tracking block are built from the basic blocks you already know, the same way the Image + Text block is. Open one and the settings panel lists its parts: an image, a heading, a text, a price, a button. Click a part to edit it with the full settings of that block (image width and alignment, heading level, rich text formatting, button style and corner radius); use the eye icon to hide a part you do not need. Below the parts are the settings of the block itself, such as the card layout or the frame style.

Product

One product card. Parts: image (upload, or a link such as {{ variables.product_image }}), title, description (hidden until you switch it on), price with an optional compare-at price shown struck through, and a button. Link wraps the image and the title; the button has its own link. Layout puts the image above the text or next to it, with the image width and the vertical alignment for the row. Use it for a featured product in an order or win-back email.

Price

A price line on its own: the price in bold, an optional compare-at price struck through in front of it, size, color and alignment. It is the price part of the product card, available anywhere.

Product grid

Two or three cards per row from a list in your variables, the same way the line items table works. Point List at the variable (for example variables.products), then name the property that holds each field: title, price, compare_at_price, image, url. Each entry becomes a card with a button in the style and corner radius you choose; a missing image or link is simply left out. Fill the list from Flow with a Run code step or the order's line items.

Discount code

A code box with a heading, a description and a button as parts, in a dashed, solid or plain frame. Two ways to fill it:

  • A code that already exists: type it (or a variable). The button links to your store with the code applied at checkout unless you give it a link of its own.
  • Create a unique code for every email: the app creates a single-use code discount in your store when the email is sent, named PREFIX-XXXXXX, with the percentage or amount, validity in days, minimum subtotal and once-per-customer rule you set. The code appears in History with the send, and the email's Resend shows the same code. A marketing email gets one code per recipient.

Creating codes needs the Discounts permission, which the block asks for in place and you can withdraw on the Permissions page (Permissions: what the app can read from your store). The app only creates codes; it never reads, changes or deletes other discounts. A test email shows a placeholder instead of creating a code.

Countdown

A live countdown to a date and time. In the email it is an animated image the app renders when the email is opened, so it counts down in the inbox; a client that blocks images shows the text next to it. Ends at takes a date with time zone (2026-12-24T23:59:00+01:00) or a variable. Four styles: boxes, flip cards, minimal and text; three sizes; your own labels and colors; and a text that replaces the countdown once the time has passed.

Order tracking

Carrier and tracking number, a progress stripe, and two parts: a Track button (it opens the tracking link unless you give it another one) and a note such as the delivery estimate, hidden until you need it. Shipment status takes Shopify's status from Flow (IN_TRANSIT, OUT_FOR_DELIVERY, DELIVERED and the others) or a step number, and lights the steps up to it. The step labels are yours; two to six of them.

Star rating

Stars from a number ({{ variables.rating }}), rounded to whole stars, with the rest greyed, a text next to them and an optional link, for example to your review page. Pair it with a review request email.

Testimonial

A quote and an author line as text parts, plus an optional photo, as a card, with a colored accent bar, or plain.

A row of network icons (Instagram, Facebook, X, LinkedIn, YouTube, TikTok, Pinterest and more), with size and spacing. The same icons the footer uses.

Video

Email cannot play video, so this block shows the thumbnail part with a play button, linked to the video page, and an optional caption part below. Dark, light or brand-colored play button, thumbnail height and width. Outlook for Windows does not show the thumbnail behind the play button; the link still works.

Signature

A photo, a name (a heading) and the details (a text: job title, company, phone, email, website), with the photo round or square, on the left or above. The defaults use {{ shop.name }} and {{ shop.email }}.

Table

A small data table for order facts or specifications. Every cell takes a variable, the first row can be a header, rows can be striped.

View in browser

The usual "view this email in your browser" line. The link opens a web copy of that very email, rendered from the layout and the data of the send, for 30 days. A test email links to the layout with its test variables.

Columns

Two, three or four equal columns, each with its own blocks: three product cards side by side, or icons with a line of text under each.

Show if

A section that is only sent when a condition on your variables is true. Type the condition the way Liquid reads it: variables.total > 100, language == "de", variables.tags contains "vip". The canvas evaluates it with your test variables and dims the section when it would be left out. Put the blocks inside it as you would in a column.