Themes
Site Themes
Create, edit, clone, and apply storefront themes that control the HTML, CSS, JavaScript, and images used on your customer-facing site.
Site Themes is where you manage the visual presentation layer of your storefront. Each theme is a folder of files -- HTML templates, CSS stylesheets, JavaScript, images, and ASP.NET master pages -- that together define how your storefront looks and behaves. You can maintain multiple themes, clone an existing theme to experiment with changes, and apply any theme to your storefront with a single click.
New themes are initialized from a default template that includes a starter storefront.css, default.skin, and a set of master pages. From there, you can customize every aspect of the storefront's appearance through the built-in code editor.
View Site Themes
- From your Unified Admin, go to Site Themes.
- The theme list displays all themes in a paginated grid sorted alphabetically by name.
- The In Use column shows a checkbox indicating which theme is currently applied to your storefront. Only one theme can be active at a time.
- Click Add Theme to create a new theme from the default template.
Theme List Columns
| Column | Description |
|---|---|
| Theme Name | Display name of the theme. Must be unique across all themes. The name "default" is reserved and cannot be used. |
| In Use | Checkbox indicating whether this theme is currently applied to the storefront. Only one theme is active at a time. |
| Action | Menu with Apply, Clone, Edit, Rename, and Delete options. |
Theme Actions
| Action | Description |
|---|---|
| Apply | Sets this theme as the active theme for your storefront. The previous theme is immediately deactivated and the new theme takes effect on the next page load. The ThemeMap record is updated (or created) to link the storefront to this theme. |
| Clone | Creates a complete copy of the theme, including all files and subfolders. The clone is named {original-name}-copy (or {original-name}-copy-1, -copy-2, etc., if a copy already exists). Use this to safely experiment without modifying a live theme. |
| Edit | Opens the built-in file manager where you can browse, create, edit, and manage all files within the theme folder. |
| Rename | Opens a dialog to change the theme name. The theme folder on disk is also renamed to match. The name must be unique and cannot be "default". |
| Delete | Permanently deletes the theme, its folder on disk, and any storefront-to-theme mappings. This action cannot be undone. A confirmation dialog appears before deletion. |
Edit Theme (File Manager)
Clicking Edit on a theme opens the file manager, a two-panel interface for managing the theme's file system.
Left Panel: A folder tree showing the directory structure. Click any folder to navigate into it. Only directories are shown in the tree.
Right Panel: The contents of the currently selected folder, displaying each file and subfolder with sortable columns.
File List Columns
| Column | Description |
|---|---|
| Name | File or folder name. Click a folder to navigate into it. Click a text-based file (HTML, CSS, JS, XML, etc.) to open it in the code editor. |
| Size | File size displayed in human-readable format (B, KB, MB). Blank for folders. |
| Type | File type derived from the extension (e.g., "CSS file", "PNG image", "File folder"). |
| Date Modified | Last modification timestamp (MM/DD/YYYY hh:mm:ss AM/PM). |
| Action | Per-file menu with Rename and Replace options. Replace is only enabled for image files (PNG, SVG, JPG, JPEG). |
File Manager Actions Menu
| Action | Description |
|---|---|
| New Folder | Creates a new subfolder in the current directory. Opens a dialog to enter the folder name. |
| New File | Creates a new empty file in the current directory. Opens a dialog to enter the file name with extension. |
| Download | Downloads the selected files and folders as a ZIP archive. Select items using the checkboxes, then click Download. Use the header checkbox to select all. |
| Delete | Deletes the selected files and folders. Select items using the checkboxes first. A confirmation dialog appears before deletion. |
| Back | Navigates up one level in the folder hierarchy. |
Code Editor
Clicking a text-based file opens a full-screen Monaco code editor dialog. The editor provides syntax highlighting for HTML, CSS, JavaScript, XML, and other text formats.
| Element | Description |
|---|---|
| File path | Displayed in the header showing the full relative path of the file being edited. |
| Save | Writes the current editor content back to the theme file. The file's original encoding (UTF-8, ASCII, etc.) is preserved. |
| Cancel | Closes the editor without saving changes. |
| Fullscreen toggle | Expands the editor to fill the entire browser window, or exits fullscreen mode. |
Add a New Theme
- Click the Add Theme button.
- A dialog opens prompting for a theme name.
- Enter a unique name and click Save. The name is sanitized (special characters are removed).
- PrintNow creates a new theme folder initialized with the default template files (starter CSS, skin, and master pages).
- The new theme appears in the list but is not applied until you explicitly click Apply.
Associations
Print Store
| Area | Effect |
|---|---|
| Storefront appearance | The applied theme controls all visual aspects of the customer-facing storefront. The StorefrontIdentity resolves the active theme for each request, and the ASP.NET virtual path provider serves files from the theme's folder. Changes to theme files take effect immediately on the next page load. |
| Master pages | Theme folders contain ASP.NET master pages (.master files) that define the storefront's page layout, header, footer, and navigation structure. |
| CSS and styling | The storefront.css file in the theme controls all storefront styling. Additional CSS and JavaScript files can be added to the theme folder and referenced from master pages. |
| Category templates | Category page rendering uses templates served from the active theme folder. |
| Product browser widget | The product browser control loads its templates from the active theme. |
| User Groups | User groups can be assigned a specific theme via the themeid field, allowing different customer segments to see different storefront designs. |
| Organizations | Organizations have a ThemeId field that can override the storefront-level theme for members of that organization. |
| FTP access | Theme files can also be managed via FTP accounts configured in Domain Tools. This is the recommended approach for large-scale file uploads and downloads. |
Related Pages
- Theme Development Overview — Introduction to how themes work in Print Store
- Theme Structure — Files and folders inside each theme
- Integrating HTML Themes — Convert an HTML template into a theme you can upload here
- General Settings — Storefront-level settings that affect theme behavior
- FTP Accounts — Upload theme files in bulk via FTP
- Store Clone — Copy an entire storefront including its theme
- User Groups — Assign different themes per user group
- Organizations — Override the storefront theme for organization members