Integrating HTML Themes

Step-by-step guide to converting a Bootstrap HTML template into a Print Store theme.

Any HTML Bootstrap template can be integrated into PrintNow. This guide walks through the process of converting a purchased or custom HTML template into a fully functional Print Store theme.

Prerequisites

A purchased or custom HTML Bootstrap template (Bootstrap 4 or 5 recommended)
An FTP client (e.g., FileZilla) configured for explicit FTP over TLS, or use the built-in Site Themes editor
Familiarity with HTML, CSS, and basic ASP.NET markup
Access to the Unified Admin with Site Themes permissions

The integration process involves wrapping your HTML template around PrintNow's required ASP.NET controls and content placeholders. The key file is PrintnowDisplay.master — the root master page that defines the storefront shell (header, navigation, main content area, and footer).

PrintNow provides a skeleton file that contains the minimum required code. You merge your HTML template's design with this skeleton to create a working theme.

Step-by-Step Integration

1. Review the Theme Structure

Start by understanding the Theme Structure and Master Pages documentation. Familiarize yourself with the master page hierarchy and available server controls.

2. Get an HTML Bootstrap Template

Search sites like ThemeForest for an HTML Bootstrap template. Purchase and download all files. Look for templates with:

Clean header/navigation structure
Responsive layout
Bootstrap 4 or 5 framework
Home page, product grid, and detail page layouts

3. Design Your Layout in HTML First

Work with the HTML template files locally before integrating into PrintNow:

Build out the header, home page content, and footer in a single HTML file
Get the design and layout exactly how you want it
Test responsiveness across screen sizes

4. Create a Header + Footer Shell

Save a copy of your HTML file with the home page center content removed. You want:

Header with navigation
Empty center content area
Footer

The home page content will be added later via the CMS.

5. Merge with the Skeleton Master Page

Take the skeleton PrintnowDisplay.master and wrap it around your HTML content. The skeleton provides the required ASP.NET directives and controls.

The key areas to merge:

Head section — Place your CSS references and meta tags before the cpHead placeholder:

<head runat="server">
    <%-- Your theme CSS --%>
    <link rel="stylesheet" href="/{pn_theme_path}/css/bootstrap.css">
    <link rel="stylesheet" href="/{pn_theme_path}/css/theme.css">
    <script src="/{pn_theme_path}/js/jquery.js"></script>

    <%-- Required: must be last in head --%>
    <asp:ContentPlaceHolder ID="cpHead" runat="server"></asp:ContentPlaceHolder>
</head>

Body section — Place the required invisible controls at the top of the form, then your header HTML, then the content placeholders, then your footer:

<body>
    <form id="form1" runat="server">
        <%-- Required invisible controls --%>
        <telerik:radskinmanager id="RadSkinman" runat="server" skin="Default" />
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <printnow:warnBeforeLogout runat="server" />

        <%-- YOUR HEADER HTML HERE --%>
        <header>
            <%-- Wire up PrintNow controls in your header --%>
        </header>

        <%-- Main content area --%>
        <asp:ContentPlaceHolder ID="cpMainBody" runat="server" />

        <%-- YOUR FOOTER HTML HERE --%>
        <footer>
            ...
        </footer>

        <%-- Required: just before closing form tag --%>
        <script src="/{pn_theme_path}/js/bootstrap.js"></script>
    </form>
</body>

6. Wire Up PrintNow Controls

Place PrintNow's server controls in the appropriate locations within your header HTML:

<%-- Search bar --%>
<asp:TextBox ID="search" runat="server" CssClass="form-control search"></asp:TextBox>
<pn:ButtonEx ID="searchButton" runat="server"
    Text="<i class='icon icon-search'></i>"
    CssClass="btn btn-default"
    CausesValidation="false" />

<%-- Welcome message --%>
<pn:WelcomeUser runat="server" MessageFormat="Welcome, {name}" />

<%-- Login/logout --%>
<printnow:AccountHeaderPane runat="server" />

<%-- Cart count --%>
<a href="/viewcart.aspx">
    <i class="fa fa-shopping-cart"></i>
    <pn:CartCount runat="server" EmptyWhenZero="True" />
</a>

<%-- Breadcrumbs --%>
<pn:Breadcrumb ID="breadcrumb1" runat="server" />

7. Avoid Duplicate Form Tags

Important: ASP.NET requires exactly one <form> tag with runat="server". If your HTML template has its own <form> tags, you must remove them or nest content differently. Duplicate form tags will cause rendering errors.

During development, you can temporarily hide the form controls section with CSS while building out the theme:

/* Temporarily hide form controls during development */
.form-controls-section { display: none; }

8. Set Up a Development Theme

In the Unified Admin, go to Site Themes
Clone an existing theme to create a working copy
Name it something like "development" or "my-theme-wip"

9. Upload Theme Files

Upload your theme files using one of these methods:

FTP: Create an FTP account in Domain Tools and upload via FileZilla or similar client
Site Themes Editor: Use the built-in file manager to upload files individually

Replace all files and directories in the theme folder with your new theme files.

10. Test and Iterate

Apply your development theme in Site Themes
Test the storefront front-end
Fix any rendering issues — common problems include:
- Missing form controls
- Duplicate <form> tags
- Broken asset paths (use {'{pn_theme_path}'} token)
- CSS conflicts with PrintNow's default styles
Repeat until the theme matches your HTML prototype

11. Add Home Page Content

Copy your home page content HTML into the Print Store CMS Default (home) page. The cpMainBody placeholder is where CMS content renders into the master page.

12. Customize Additional Master Pages

Once the main PrintnowDisplay.master is working, customize the other master pages as needed:

CategoryOverview.master — Category landing pages
SubCategoryOverview.master — Sub-category product listings
ProductDetails.master — Individual product pages
PrintnowDisplaySingle.master — Full-width pages

13. Customize Page Templates

Customize the Mustache page templates in the page-templates/ folder:

my-account.mustache — Account dashboard
view-cart.mustache — Shopping cart
order-options.mustache — Post-upload options

14. Customize Component Templates

Customize the product browser templates in the product-browser/ folder and the calculator template in the calculator/ folder.

15. Go Live

Once testing is complete:

Clone the development theme as a backup
Apply the final theme in Site Themes
Verify all pages render correctly in production

Tips

Back up first — Always duplicate your working theme before making changes
Work locally — Develop the HTML design on your desktop before uploading to PrintNow
Use FTP for bulk uploads — The Site Themes editor is good for individual file edits, but FTP is faster for uploading entire themes
Test across pages — Check the home page, category pages, product detail pages, cart, and checkout
Check mobile — Test responsive behavior on different screen sizes
Use browser dev tools — Inspect elements to debug CSS conflicts and missing controls

Skeleton Reference — The minimal master page code you merge with your HTML template
Site Themes — Where you upload, clone, and apply your integrated theme
Theme Structure — Files and folders expected in a complete theme
Master Pages — The master page hierarchy your theme needs to implement
Server Controls — ASP.NET controls to wire into your HTML layout
FTP Accounts — Set up FTP access for uploading theme files

Integrating HTML Themes

On this page