> For the complete documentation index, see [llms.txt](https://help.pixfizz.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.pixfizz.com/getting-started/platform-overview.md).

# Platform Overview

### Platform Architecture

Pixfizz sits between the customer-facing storefront and the production environment. It connects personalization and order management into a unified workflow. The platform is modular — you can use the full stack end-to-end, or integrate just the personalization and fulfillment engines into your existing commerce platform via the API.

### Personalization Layer

The Personalization Layer is the most customer-facing part of Pixfizz. It is the set of tools and interfaces through which end customers configure, design, and personalise products before purchase — and it is significantly more capable than a standard product customiser.

**Two distinct interface modes**

Pixfizz offers two personalisation experiences depending on the product and storefront configuration:

* **Design Tool** — A full canvas-based editor where customers work with multi-page layouts, place and crop images, edit text, and interact with a structured template. Used for complex products like photo books, calendars, and multi-panel wall art.
* **Live Preview** — A lightweight, inline personalisation experience that lives directly on the product page. Customers upload images or make selections and see the result rendered on the product in real time, without leaving the page. Used for simpler products like prints, framed art, and gifts.

Both interfaces are fully mobile-responsive and designed to work across devices without any degradation in experience.

**Template-driven product definitions**

Every personalisable product is built on a Design, which defines the pages, layout structure, and visual elements that make up the editor experience. The Design is configured directly in the Pixfizz admin.

Each Design is paired with an XML definition that controls the production output behaviour of that product — specifically how pages are sized, grouped, and rendered into print-ready files. XML parameters include:

* **Physical dimensions** — pre-trimmed width and height of each production page
* **Bleed** — a visual indicator shown to customers in the Design Tool marking where the page will be trimmed. Supports asymmetrical values (top, bottom, left, right). Has no effect on the actual output file size.
* **Margin** — a safe-line guide displayed on top of any bleed value, helping customers keep important content away from the trim edge
* **Snap points** — custom alignment guides within the editor. By default elements snap to page edges and centre. Custom snap values override this entirely.
* **Output grouping** — the `output-name` parameter controls how production PDFs are grouped. By default, similarly sized pages are combined into a single multi-page PDF. Custom output names allow any pages to be grouped together regardless of size.
* **Gutter** — hides a defined amount of artwork between facing pages in the Design Tool, preventing customers from placing important content in the binding area
* **Hinge** — used on cover pages with a binding map, displaying a visible spine hinge and adjusting the editor's alignment centre point accordingly
* **Growing spine** — a binding filter that dynamically adjusts the cover spine width based on the number of pages in the book, defined via a page-count-to-spine-width map in the XML
* **Layflat spread guide** — adds a centre line to spread pages and activates quadrant-aware alignment for layflat binding products

**Granular element-level permissions**

One of the most powerful capabilities of the Personalization Layer is the permission system applied to individual design elements. Each element can be independently configured to control:

* Whether the customer can move, resize, or delete it
* Whether text is editable or locked
* Whether image areas accept customer uploads or display fixed assets only
* Which elements are visible to the customer versus used only in print file generation

This allows Pixfizz operators to build products ranging from fully open creative canvases to tightly controlled, brand-safe templates where the customer experience is entirely guided.

**Universal deployment**

The Personalization Layer runs identically regardless of the storefront technology:

* The native Pixfizz CMS with Shopper
* A Shopify storefront via the Pixfizz integration
* A custom-built frontend connected through the Pixfizz API

### Commerce Layer

The Commerce Layer handles storefront and checkout when Pixfizz is used as the full commerce platform.

* Storefront CMS with page management
* Product catalog and collection management
* Checkout and payment processing via gateway integrations
* Shipping and tax configuration
* Customer accounts and order history

> ℹ️ In Shopify + Pixfizz deployments (or custom API integrations), Shopify or your existing platform handles the Commerce Layer. The Pixfizz Commerce Layer is only active when using the full Pixfizz stack.

### Workflow Layer

The Workflow Layer manages what happens after an order is placed — the journey from order to production-ready output.

* Order ingestion (from Pixfizz checkout, Shopify webhooks, or external platforms via API)
* Artwork generation from personalized designs
* Asset delivery via FTP/SFTP
* OrderHub job creation, production routing, and production download

The typical production pipeline follows this flow:

1. Customer places an order
2. Personalization data is finalized
3. Artwork is generated from the design template
4. Production assets are delivered via FTP
5. An OrderHub job is created
6. Production team downloads the job via OrderHub Desktop
7. Order is fulfilled and delivered

### Website Layer

The Website Layer provides tools for building and managing storefront experiences on the Pixfizz platform.

* Shopper — a managed, customizable website template
* Custom frontend option for businesses with their own development resources
* Theme selection and brand identity configuration
* Domain and SSL configuration
* Site navigation and homepage layout management

> ℹ️ The Website Layer is only relevant when using the full Pixfizz stack. If you're using Shopify or another external platform, you manage your storefront there.

### How the Layers Connect

In a full Pixfizz deployment, all four layers are active and tightly integrated. A customer browses the storefront (Website Layer), personalizes a product (Personalization Layer), completes checkout (Commerce Layer), and the order flows automatically into production (Workflow Layer).

In an integrated deployment (Shopify, custom API, or marketplace), the external platform handles the Commerce and Website layers. Pixfizz provides the Personalization and Workflow layers — the customer personalizes their product through Pixfizz, and orders are routed to production through OrderHub.

This modularity means you can adopt as much or as little of the platform as you need, and expand over time.