Page Templates

Reference for Mustache page templates that control the layout of key Print Store pages.

Page templates are Mustache HTML files stored in the page-templates/ folder of your theme. They control the layout and presentation of specific storefront pages — shopping cart, account dashboard, order options, and more. PrintNow renders these templates server-side, injecting data variables before sending the HTML to the browser.

Mustache Syntax

Page templates use Mustache syntax:

Syntax	Description	Example
`{{ variable }}`	Output a value (HTML-escaped).	`{{ Name }}`
`{{{ variable }}}`	Output raw HTML (unescaped).	`{{{ CmsContent }}}`
`{{ #section }} ... {{ /section }}`	Conditional block — renders if value is truthy. Also used for loops over arrays.	`{{ #Items }} ... {{ /Items }}`
`{{ ^section }} ... {{ /section }}`	Inverted block — renders if value is falsy or empty.	`{{ ^CartEmpty }} ... {{ /CartEmpty }}`
`{{ . }}`	Current item in a loop or section.	`{{ #Comments }}{{ . }}{{ /Comments }}`
`{{ ! comment }}`	Comment — not rendered in output.	`{{ ! if cart is empty }}`

my-account.mustache

Template for the My Account dashboard page (/my-account). Displays a welcome message and navigation cards for account sections.

Variables

Variable	Type	Description
`CmsContent`	HTML (raw)	CMS content configured for the My Account page. Use triple braces: `{{{ CmsContent }}}`
`userfirstname`	String	Logged-in customer's first name.
`userlastname`	String	Logged-in customer's last name.
`username`	String	Logged-in customer's username.
`MyOrdersTitle`	String	Label for the orders section (translatable).
`myordersurl`	String	URL to the orders page.
`myorderscount`	Number	Count of customer orders.
`MyOrdersExist`	Boolean	True if the customer has orders. Use as section: `{{ #MyOrdersExist }}`
`MyProjectsTitle`	String	Label for the projects section.
`myprojectsurl`	String	URL to the projects page.
`myprojectscount`	Number	Count of saved projects.
`MyProjectsExist`	Boolean	True if the customer has saved projects.
`MyImagesTitle`	String	Label for the images section.
`myimagesurl`	String	URL to the images page.
`myimagescount`	Number	Count of uploaded images.
`MyImagesExist`	Boolean	True if the customer has uploaded images.
`MyApprovalsTitle`	String	Label for the approvals section.
`myapprovalsurl`	String	URL to the approvals page.
`myapprovalscount`	Number	Count of orders pending approval.
`MyApprovalsExist`	Boolean	True if the customer has pending approvals.
`myinfourl`	String	URL to the account info page.

Example

<h4>Welcome, {'{{'} userfirstname {'}}'}!</h4>
{'{{{'} CmsContent {'}}}'}

<a href="{'{{'} myordersurl {'}}'}">
    My Orders
    {'{{'} #MyOrdersExist {'}}'}<span class="badge">{'{{'} myorderscount {'}}'}</span>{'{{'} /MyOrdersExist {'}}'}
</a>

view-cart.mustache

Template for the Shopping Cart page (/view-cart). Displays cart items with thumbnails, descriptions, quantities, pricing, and checkout actions.

Variables

Variable	Type	Description
`CartEmpty`	Boolean	True when the cart has no items. Use to show empty cart message.
`PageContent`	HTML (raw)	CMS content for the cart page.
`SubTotal`	String	Formatted cart subtotal.
`Items`	Array	Array of cart line items (see below).

Item Variables (inside `{'{{'} #Items {'}}'}`)

Variable	Type	Description
`ItemId`	Integer	Cart line item ID. Used by edit/delete buttons via `data-item` attribute.
`ProductId`	Integer	Product ID. Used for thumbnail URLs.
`Name`	String	Product name.
`Category`	String	Parent category name.
`Description`	HTML (raw)	Product description HTML.
`Quantity`	String	Order quantity.
`Price`	String	Formatted line item price.
`ProductType`	String	Product type label.
`Comments`	String	Customer comments/notes for this item.
`IsDataList`	Boolean	True if this item is a data list (mailing list).
`ListName`	String	Data list name (when `IsDataList` is true).
`ListCount`	Number	Number of records in the data list.
`Options`	Array	Selected product options. Each has `Name` and `Value`.
`ImageFee`	Boolean	True if a premium image fee applies.

Required CSS Classes

The view cart template uses special CSS classes that PrintNow's JavaScript binds to for button actions:

CSS Class	Action
`custom-delete`	Removes the cart item. Requires `data-item="{{ ItemId }}"` attribute.
`custom-edit`	Opens the item for editing. Requires `data-item="{{ ItemId }}"` attribute.
`custom-checkout`	Proceeds to checkout.
`custom-continue`	Returns to continue shopping.

order-options.mustache

Template for the Order Options page (/order-options). Displayed after file upload or editor, showing an order preview with the calculator, proof download, and approval checkbox.

Variables

Variable	Type	Description
`PageContent`	HTML (raw)	CMS content for the page.
`Id`	Integer	Product ID (used for thumbnail URL).
`Name`	String	Product name.
`Description`	String	Product description.
`Calculator`	HTML (raw)	Rendered pricing calculator. Use triple braces: `{{{ Calculator }}}`
`Comments`	String	Existing customer comments.
`NeedsApproval`	Boolean	True if the product requires approval before production.
`CanEdit`	Boolean	True if the item can be re-edited.
`ShowProof`	Boolean	True if a PDF proof is available for download.
`ShowComments`	Boolean	True if the comments field should be displayed.
`ticks`	String	Cache-busting timestamp for thumbnail URLs.

Required CSS Classes

CSS Class	Action
`custom-edit`	Returns to the editor to modify the design.
`custom-proof`	Downloads the low-resolution PDF proof.
`custom-approval`	Checkbox input for order approval confirmation.
`custom-comments`	Textarea for customer comments/notes.
`custom-cancel`	Cancels and returns to the previous page.
`custom-next`	Proceeds to the next checkout step.

products.mustache

Template for the All Products page (/products). Displays a grid of categories with their sub-category links and thumbnails.

Variables

Variable	Type	Description
`category`	Array	Array of category objects to display.

Category Item Variables (inside `{'{{'} #category {'}}'}`)

Variable	Type	Description
`id`	Integer	Category ID.
`name`	String	Category display name.
`subcategory`	Array	Array of sub-categories, each with `name` and `url`.

Example

{'{{'} #category {'}}'}
<div class="col-md-6">
    <div class="card mb-4">
        <div class="card-header">{'{{'} name {'}}'}</div>
        <div class="card-body">
            <img src="/thumbnails/c/{'{{'} id {'}}'}?width=400&height=400&fit=fill" alt="{'{{'} name {'}}'}" class="img-fluid" />
            <ul>
            {'{{'} #subcategory {'}}'}
                <li><a href="{'{{'} url {'}}'}">{'{{'} name {'}}'}</a></li>
            {'{{'} /subcategory {'}}'}
            </ul>
        </div>
    </div>
</div>
{'{{'} /category {'}}'}

landing-page.mustache

Template for Landing Pages (/your-landing-page-url). Controls the layout of landing pages created in Content > Landing Pages. If this template exists in your theme's page-templates/ folder, it replaces the default card-based layout for all landing pages.

Variables

Variable	Type	Description
`PageContent`	HTML (raw)	CMS content configured for the landing page. Use triple braces: `{{{ PageContent }}}`
`Children`	Array	All child items (categories, landing pages, and groups) sorted by display order. Each has `name`, `url`, `thumbnail.url`, and `isGroup`.
`Categories`	Array	Only the category-type children.
`Pages`	Array	Only the landing page-type children.
`Groups`	Array	Only the group-type children. Each group has a nested `children` array containing its own categories and landing pages.

Child Item Variables (inside `{'{{'} #Children {'}}'}`, `{'{{'} #Categories {'}}'}`, `{'{{'} #Pages {'}}'}`, or group `{'{{'} #children {'}}'}`)

Variable	Type	Description
`name`	String	Display name (category name, landing page title, or group name).
`url`	String	SEO-friendly URL to the category or landing page. Empty for groups.
`thumbnail.url`	String	Thumbnail image URL. Append `?width=200&height=200` for sizing.
`isGroup`	Boolean	True if the item is a group container. Use `{{ #isGroup }}` / `{{ ^isGroup }}` for conditional rendering.
`children`	Array	Nested child items (only present on group items).

Example

{'{{{'} PageContent {'}}}'}

{'{{'} #Children {'}}'}
    {'{{'} #isGroup {'}}'}
    <div class="group-panel">
        <h4>{'{{'} name {'}}'}</h4>
        <div class="row">
            {'{{'} #children {'}}'}
            <div class="col-md-4">
                <a href="{'{{'} url {'}}'}">
                    <img src="{'{{'} thumbnail.url {'}}'}?width=200&height=200" alt="{'{{'} name {'}}'}" />
                    <span>{'{{'} name {'}}'}</span>
                </a>
            </div>
            {'{{'} /children {'}}'}
        </div>
    </div>
    {'{{'} /isGroup {'}}'}

    {'{{'} ^isGroup {'}}'}
    <div class="col-md-4">
        <a href="{'{{'} url {'}}'}">
            <img src="{'{{'} thumbnail.url {'}}'}?width=200&height=200" alt="{'{{'} name {'}}'}" />
            <span>{'{{'} name {'}}'}</span>
        </a>
    </div>
    {'{{'} /isGroup {'}}'}
{'{{'} /Children {'}}'}

upload.mustache

Template for the File Upload page. Controls the layout of the print-ready file upload interface. This is a larger template with variables for file handling, size selection, and upload progress. Customize the upload.mustache file in your theme's page-templates/ folder.

Theme Structure — Where page-templates/ fits in the theme folder layout
Calculator — The pricing calculator embedded in order-options.mustache
Page Content — Manage the CMS content injected into page template variables
Landing Pages — Configure landing pages rendered by landing-page.mustache

Page Templates

On this page