Theme Structure
Understand the file and folder anatomy of a Print Store theme.
Every Print Store theme is a folder containing master pages, stylesheets, JavaScript, images, and component templates. The folder is served by PrintNow's virtual path provider, making all files accessible at /{'{pn_theme_path}'}/ in your storefront URLs.
Folder Layout
A typical theme folder has the following structure:
theme-root/
├── PrintnowDisplay.master # Main layout (header, nav, sidebar, footer)
├── PrintnowDisplaySingle.master # Full-width layout (no sidebar)
├── PrintnowHomeDisplay.master # Home page layout with sidebar
├── PrintnowSidebarDisplay.master # Non-home page layout with sidebar
├── CategoryOverview.master # Main category page
├── CategoryOverview2.master # Alternate category layout
├── SubCategoryOverview.master # Sub-category / product listing
├── SubCategoryOverview2.master # Alternate sub-category layout
├── ProductDetails.master # Individual product page
├── ProductDetails2.master # Alternate product detail layout
├── BlogHome.master # Blog home page
├── BlogPost.master # Individual blog post
├── BlogCategory.master # Blog category listing
├── editor-logo.png # Logo displayed in Print Editor
│
├── bootstrap/ # Compiled Bootstrap assets
│ ├── css/
│ │ ├── bootstrap.min.css # Bootstrap CSS
│ │ └── img/ # Theme images referenced by CSS
│ └── js/
│ └── bootstrap.min.js # Bootstrap JS
│
├── bootstrap_theme/ # Bootstrap SCSS source (optional)
│ └── bootstrap/
│ ├── bootstrap.scss # Main SCSS entry point
│ ├── _variables.scss # Theme variable overrides
│ └── ... # Full Bootstrap SCSS source
│
├── assets/ # Images, fonts, icons
│
├── calculator/ # Calculator component template
│ └── default.html # Pricing calculator HTML
│
├── product-browser/ # Product browser component templates
│ ├── filter-panel.html # Sidebar filters (categories, attributes)
│ ├── gridlist.html # Grid/list product card
│ ├── inline.html # Carousel product card
│ └── product-view.html # Main product browser container
│
└── page-templates/ # Mustache page templates
├── my-account.mustache # My Account dashboard
├── order-options.mustache # Post-upload order options
├── products.mustache # All Products page
├── upload.mustache # File upload page
├── view-cart.mustache # Shopping cart (legacy)
└── view-cart-new.mustache # Shopping cart (current)Root Files — Master Pages
The .master files at the root are ASP.NET master pages that define the page layout structure. They form an inheritance hierarchy where specialized pages extend base layouts.
See Master Pages for the full hierarchy and customization details.
bootstrap/
Contains the compiled Bootstrap CSS and JavaScript files. PrintNow themes are compatible with Bootstrap 5. The css/img/ subfolder holds any images referenced by stylesheets (background images, icons, etc.).
Reference these files from your master pages using the {'{pn_theme_path}'} token:
<link rel="stylesheet" href="/{pn_theme_path}/bootstrap/css/bootstrap.min.css">
<script src="/{pn_theme_path}/bootstrap/js/bootstrap.min.js"></script>bootstrap_theme/ (Optional)
Contains the full Bootstrap SCSS source with your theme's variable overrides in _variables.scss. This folder is optional — it's included when themes need SCSS compilation for custom Bootstrap builds. The compiled output goes into bootstrap/css/bootstrap.min.css.
assets/
Static assets like images, fonts, and icons used by the theme. Organize this folder however suits your theme. Reference assets in your master pages and CSS using the {'{pn_theme_path}'} token.
calculator/
Contains the default.html template that controls the pricing calculator displayed on product and sub-category pages. The calculator is a large HTML template with Mustache-like variables for sizes, colors, quantities, options, turnaround times, and pricing totals.
The calculator template is activated by the CalculatorTemplate attribute on master pages:
<%@ Master ... CalculatorTemplate="default" %>See Calculator for template variables and customization.
product-browser/
Contains AngularJS HTML templates for the product browser widget. The product browser is the interactive product listing with filtering, sorting, pagination, and grid/list views.
| File | Purpose |
|---|---|
filter-panel.html | Sidebar with category navigation and attribute filters |
gridlist.html | Product card used in grid and list views |
inline.html | Product card used in the inline carousel view |
product-view.html | Main container with header, sort controls, pagination, and product grid |
See Product Browser for template details.
page-templates/
Contains Mustache templates (.mustache files) for specific storefront pages. These templates let you customize the layout and presentation of key pages without modifying master pages.
| Template | Page |
|---|---|
my-account.mustache | Customer account dashboard |
order-options.mustache | Post-upload/edit order review page |
products.mustache | All Products category overview |
upload.mustache | File upload page |
view-cart.mustache | Shopping cart page |
See Page Templates for all available variables.
The {pn_theme_path} Token
Throughout your theme files, use {'{pn_theme_path}'} as a placeholder for the theme's URL path. PrintNow replaces this token at runtime with the actual path to the active theme folder. This ensures asset URLs resolve correctly regardless of which theme is active.
<link rel="stylesheet" href="/{pn_theme_path}/css/custom.css">
<script src="/{pn_theme_path}/js/custom.js"></script>
<img src="/{pn_theme_path}/assets/logo.png" alt="Logo">Related Pages
- Master Pages — Hierarchy and customization of the .master files at the theme root
- Server Controls — ASP.NET controls used inside master page files
- Site Themes — Upload, edit, and manage theme folders in the admin
- Integrating HTML Themes — How to populate this folder structure from an HTML template