2 min read

Create Your First Product Template #

Creating a product template is the fastest way to launch a customizable product with Product Designer App. A template contains a pre-designed layout that customers can purchase as-is or personalize by editing text, replacing images, or making simple design changes.

This Quick Start guide walks you through the basic workflow of creating your first product template and assigning it to an existing WooCommerce product.

Before you begin

This guide assumes that:

  • Product Designer App is installed and activated.
  • WooCommerce integration has already been configured.
  • A Product Base has already been created and connected to a WooCommerce product.

If you have not completed these steps yet, see the Product Base and WooCommerce Integration guides first.

Workflow Overview #

Creating a product template involves two simple steps:

Create Design Template
        ↓
Assign Template to WooCommerce Product
        ↓
Customers Customize or Purchase

Once assigned, customers can:

  • Purchase the design exactly as provided.
  • Edit text.
  • Replace photos.
  • Upload artwork.
  • Make simple design changes before ordering.

Step 1. Create a Design Template #

Navigate to:

WordPress Admin → Product Designer App → Templates

Click Add New Template.

A new design editor opens where you can create the template.

Configure Basic Information #

Enter the basic template information.

Typical settings include:

  • Template name
  • Description (optional)
  • Categories (optional)
  • Thumbnail image
  • Status

Use a clear name that describes the design.

Examples:

  • Birthday Mug
  • Business Card Modern
  • Wedding Invitation
  • Summer T-Shirt
  • Photo Canvas

Choose the Product Base #

Select the Product Base that this template will use.

The Product Base determines:

  • Product dimensions
  • Product views
  • Design areas
  • Printable regions
  • Product images
  • Color options
  • Available components

The template automatically inherits these settings.

Design Your Template #

Use the Design Studio to create your initial design.

You can add:

  • Text
  • Images
  • Clipart
  • Shapes
  • Backgrounds
  • QR codes
  • Dynamic elements (if supported)

Arrange and resize objects as needed.

A good template should look complete before the customer begins editing.

Prepare Editable Elements #

Decide which parts of the design customers should be able to customize.

Common editable elements include:

  • Names
  • Dates
  • Messages
  • Photos
  • Logos
  • Artwork

For example:

Happy Birthday
John Smith
July 15, 2026

Customers can later replace these values with their own.

Keep decorative elements such as frames, borders, and backgrounds locked when they should not be modified.

Save the Template #

After completing the design, click Save.

Your product template is now available inside Product Designer App.

Step 2. Assign the Template to a WooCommerce Product #

Next, connect the template to an existing WooCommerce product.

Navigate to:

WooCommerce → Products

Open the product that is already connected to your Product Base.

Locate the Product Designer App settings.

Under the Templates section, select the template you created.

Save or update the WooCommerce product.

The product is now linked with your design template.

Test the Product #

Visit the product page on your website.

Click the Customize, Personalize, or Design button (depending on your theme and configuration).

The Design Studio should open with your template already loaded.

Verify that:

  • The template loads correctly.
  • Text is editable where expected.
  • Images can be replaced.
  • Product colors work correctly.
  • All product views display properly.
  • The design stays inside the design area.

Place a Test Order #

Before publishing the product, complete a full purchase test.

Recommended testing includes:

  • Edit text
  • Replace an image
  • Add clipart
  • Change product color
  • Save the design
  • Add to cart
  • Complete checkout
  • Verify the generated print file

Testing the complete workflow helps identify setup issues before customers begin placing orders.

Example Workflow #

A typical workflow looks like this:

Create Product Base
        ↓
Connect Product Base to WooCommerce Product
        ↓
Create Product Template
        ↓
Assign Template to WooCommerce Product
        ↓
Customer Opens Design Studio
        ↓
Customer Personalizes Template
        ↓
Customer Places Order
        ↓
Generate Print File

Best Practices #

For the best customer experience:

  • Start with a finished-looking design.
  • Leave only the necessary elements editable.
  • Lock decorative graphics that should not be moved.
  • Use high-quality fonts and images.
  • Test every product color.
  • Verify all product views before publishing.
  • Always place a test order after creating a new template.

A well-designed template reduces design time for customers while encouraging personalization, resulting in a faster and more enjoyable purchasing experience.

What are your Feelings
Scroll to Top