1. Tracking Page Builder Guide

The Postflows tracking page builder lets you create a fully branded order tracking experience that lives on your Shopify store. Customers enter a tracking number or order number to see live shipment status, checkpoints, and order details - all in your brand's style. This article covers the builder interface and how to customize your tracking page.

Opening the builder

Go to Dashboard > Tracking in the sidebar.

Builder layout

The builder has three panels:

Panel	Location	What it does
Blocks / Variables	Left sidebar	Add blocks to the page; browse available template variables
Canvas	Center	Visual preview of your tracking page; drag to reorder blocks
Styles & Settings	Right sidebar	Customize global styles (colors, fonts, branding) and per-block settings

Available blocks

Blocks are the building components of your tracking page. Add, remove, and reorder them from the Blocks tab in the left sidebar.

Block	What it shows
Brand Header	Your company logo and name
Header	Page title and subtitle
Status Card	Current shipment status and summary
Timeline	Full checkpoint history in chronological order
Order Items	Products in the order with images, names, and quantities
Shipping Info	Origin and destination summary
Text Block	Custom text - supports template variables
Custom HTML	Advanced custom content
Divider	Horizontal separator line
Spacer	Vertical spacing
Footer	Company address, contact info

Search page blocks - The tracking page also has a search screen (shown before a customer enters their tracking info). It has its own block set: Search Form, Search Header, Brand Header, Text, Divider, Spacer, Custom HTML, Footer.

Default page structure

A new tracking page starts with this default layout:

Brand Header
Page Header
Status Card
Shipping Info
Text Block
Timeline
Order Items
Footer

You can reorder, remove, or add blocks to this structure.

Global styles

Use the Styles & Settings panel on the right to control the overall look of the page:

Setting	What it controls
Primary Color	Buttons, active states, accents
Secondary Color	Secondary text and icons
Background Color	Page background
Header Background Color	Background of the header area
Header Text Color	Text color in the header
Border Color	Card and element borders
Font Family	Typography across the whole page
Company Name	Brand name displayed in headers and footer
Logo	Upload an image or provide a URL

Per-block settings

Click any block on the canvas to select it. The right panel updates to show that block's settings:

Content - edit text, labels, and placeholder values
Style - override colors, sizing, and alignment for this block
Visibility - show or hide specific sub-elements within the block
Layout - change how content is arranged (list, grid, card, etc.)

Live preview

Click the Preview button (or press Alt + P) to see a full-screen preview of your tracking page.

Switch between viewport sizes in preview mode:

Press D for desktop view
Press T for tablet view
Press M for mobile view

Press Escape to exit preview.

Keyboard shortcuts

Shortcut	Action
`Alt + P`	Toggle preview
`Alt + S`	Save
`Delete` / `Backspace`	Delete selected block
`Escape`	Deselect block or close preview
`D` / `T` / `M` (in preview)	Desktop / Tablet / Mobile

Saving

Click Save or press Alt + S. Changes apply to your live tracking page immediately.

Note: Viewers (read-only role) cannot save changes. See Managing Team Members and Roles.

Was this helpful?

Still need help? Share an idea