> ## Documentation Index
> Fetch the complete documentation index at: https://learn.catalogbuilderapp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Template Builder Overview

> Discover the Template Builder in CatalogBuilderApp: craft personalized templates, custom page layouts, and reusable component presets.

The **Template Builder** is CatalogBuilderApp's advanced visual design environment. It empowers you to design, build, and customize completely personalized catalog templates from the ground up—defining master page layouts, component structures, typography systems, and color palettes that automatically adapt to your products.

<Frame caption="Template Builder Visual Canvas (Structure Mode) — Light & Dark Modes">
  <img className="block dark:hidden rounded-lg shadow-md" src="https://mintcdn.com/catalog-builder-app/WM5IbA1Yr9_r85uY/images/template-builder/overview-light.png?fit=max&auto=format&n=WM5IbA1Yr9_r85uY&q=85&s=78c2c8be8ed9135acb54c42a3b954135" alt="Template Builder Light Mode" width="1024" height="710" data-path="images/template-builder/overview-light.png" />

  <img className="hidden dark:block rounded-lg shadow-md" src="https://mintcdn.com/catalog-builder-app/WM5IbA1Yr9_r85uY/images/template-builder/overview-dark.png?fit=max&auto=format&n=WM5IbA1Yr9_r85uY&q=85&s=ea9c235af93ac9389dcc6e4790f94ee3" alt="Template Builder Dark Mode" width="1024" height="709" data-path="images/template-builder/overview-dark.png" />
</Frame>

***

## Universal Access: Open Template Mode From Any Catalog

In CatalogBuilderApp, templates are not rigid external files. **Every catalog has direct access to the Template Builder** through the unified editor interface.

<Note>
  **Switch Modes Anytime**: You can toggle between **Catalog Mode** (managing inventory and content) and **Structure / Template Mode** at any moment using the segmented pill control at the top of the screen:

  `[ ⊞ Structure ]` ⟷ `[ 🕮 Catalog ]`
</Note>

When you click **Structure**, the editor seamlessly transforms into the Template Builder:

* **Zero Data Loss**: Your existing products, descriptions, and catalog texts are preserved while you edit the underlying master structure.
* **Real-Time Dynamic Tokens**: The canvas displays placeholder tokens (such as `[Catálogo: titulo]`, `[Catálogo: slogan]`, and `[Catálogo: cantidad de productos]`) showing exactly where catalog information will populate.
* **Instant Propagation**: Any layout changes, color palette tweaks, or font updates you save in Structure mode automatically reflect across all pages when you switch back to **Catalog** mode.

***

## Why Use the Template Builder?

While CatalogBuilderApp includes a rich gallery of pre-built professional templates, the Template Builder gives you total creative freedom to build tailored publications aligned with your brand identity:

<CardGroup cols={2}>
  <Card title="Personalized Master Templates" icon="paintbrush">
    Define unique page dimensions, margins, decorative vector elements, background accents, and bespoke branding guidelines.
  </Card>

  <Card title="Custom Page Layouts" icon="layer-group">
    Design dedicated layouts for every stage of your catalog: cover pages, table of contents, single-product feature pages, multi-product grids, and contact back covers.
  </Card>

  <Card title="Reusable Component Presets" icon="cubes">
    Build modular product card presets, price tags, badge containers, and image frames once. The engine automatically repeats them for every product.
  </Card>

  <Card title="Global Theme Tokens" icon="palette">
    Bind colors and fonts to global variables. Changing a primary theme color or body font updates every element across the entire catalog instantly.
  </Card>
</CardGroup>

***

## Workspace Tour

The Template Builder interface provides professional design tools organized into three functional zones:

### 1. Left Control Panel: Structure & Hierarchy

* **Theme Colors**:
  * Centralized palette containing **Primary**, **Secondary**, **Background**, and **Subtle Text** color tokens.
  * Add custom global colors with the `+` button to keep your design strictly on-brand.
* **Theme Fonts**:
  * Configure global typography pairings: **Display Font** (for bold titles and headings, e.g., *Playfair Display*) and **Body Font** (for readable descriptions and prices, e.g., *Inter*).
* **Page Layouts Tree**:
  * Add new page types using the **+ Add Page** dropdown button.
  * Expand each layout (such as *Portada*, *Índice*, or *1 Product Page*) to inspect and manage its layer hierarchy:
    * Text elements, titles, and dynamic slogans.
    * Vector shapes, divider lines, and decorative rectangles.
    * Image dropzones and dynamic product count tags.
  * Drag and drop layers to adjust stacking order (z-index) and nesting.

### 2. Interactive Canvas & Bottom Vector Dock

The central workspace delivers a live editing canvas:

* **Dynamic Token Placeholders**: Visual placeholders clearly indicate where catalog metadata and product fields will dynamically appear.
* **Navigation Controls**: Switch between template pages using the pagination dots and navigation arrows (`<`, `>`).
* **Floating Bottom Vector Dock**: A streamlined toolbar with vector creation and annotation tools:
  * **Text Tool (`T`)**: Insert custom static text or dynamic tag fields.
  * **Geometric Shapes**: Draw rectangles, rounded containers, ellipses, and horizontal/vertical divider lines.
  * **Layout Splitters & Grids**: Insert multi-column containers for product grids.
  * **Component Preset Slot**: Place reusable product card containers.
  * **Vector Pen & Bezier Curves**: Craft custom vector illustrations and dividers.
  * **Custom Image Upload**: Insert brand logos, watermarks, or background graphics.

### 3. Right Panel: Inspector & Page Settings

Selecting any page or element activates the contextual inspector on the right:

* **Layout Tabs**: Toggle between **PAGE**, **LAYOUT**, and **SETTINGS**.
* **Page Visibility Toggle (`SHOW PAGE`)**: Turn the switch on or off to include or exclude a specific page layout from the final catalog publication.
* **Layout Type Selector**: Assign the page classification (e.g., *Cover Page*, *Table of Contents*, *Products Page*, or *Back Cover*).
* **Element Properties**: When an element is selected on the canvas, inspect and tweak its coordinates, dimensions, typography, border radius, fill color, and stroke settings.

### 4. Top Header Bar

* **Catalog / Template Name**: Click to rename your template directly in place.
* **Mode Toggle Pill**: Smoothly switch between **Structure** and **Catalog** modes.
* **Zoom Capsule**: Adjust canvas zoom smoothly (`- 69% +`) for precise alignment.
* **History (Undo / Redo)**: Revert or reapply actions with full state tracking.
* **Save Status Indicator**: Live status indicator (`Saved`, `Saving`, `Unsaved`).
* **Theme Switcher**: Toggle the interface between Dark and Light mode.
* **Save Changes Button**: Persist all template modifications to your catalog.
* **Publish**: Export the catalog as a digital Flipbook or vector PDF.

***

## How Templates Power Your Products

The Template Builder operates hand-in-hand with the Catalog Editor's **Products** and **Layout** tabs:

1. In the **Template Builder**, you define how a product card looks (image placement, title font, price badge, SKU tag).
2. In the **Products Tab**, you assign layout priorities to your inventory (**COMPLETA** / Full Page, **MEDIA** / Half Page, or **CUADRÍCULA** / Grid).
3. The catalog engine automatically merges your actual inventory with the template's component presets—generating balanced, professional pages without manual copy-pasting.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.