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

# Template Color Module

> Let customers swap the product template image, such as T-shirt colours, from a colour palette inside the editor

<Frame>
  <img src="https://s3.amazonaws.com/helpscout.net/docs/assets/58f1ec6d2c7d3a52b42f8254/images/5b2cc84c0428632c466b380a/file-fVydUpramG.png" alt="A T-shirt design with a colour palette used to change the template colour" />
</Frame>

<Frame>
  <img src="https://s3.amazonaws.com/helpscout.net/docs/assets/58f1ec6d2c7d3a52b42f8254/images/617280729ccf62287e5ee87d/file-8N8khqHddz.png" alt="Template Color module shown in the editor toolbar" />
</Frame>

This module is targeted at Template based designs.

A template based design is one in which an image is required as a product template to give a visual effect of the actual product to the customer during the design process. For example, TShirts, Mugs, Phone Casing etc are all template based designs because they require a product template unto which the design is placed, but not printed in the final output. A business card is NOT a template based design since we really don’t need an actual business card to be displayed in the design window.

This module basically allows users to change the template image at design time without going outside of the editor. So for this example, we will consider a TShirt design where you will like the customer to try out different T-Shirt colors from your store to see which is best for their design by simply clicking on a color pallet.

Here is how the final module will appear in the designer:

<Frame>
  <img src="https://s3.amazonaws.com/helpscout.net/docs/assets/58f1ec6d2c7d3a52b42f8254/images/61727df02b380503dfdfd0aa/file-u0QPjV7bUC.png" alt="The finished Template Color module with its colour swatches" />
</Frame>

And how it's positioned within the designer:

<Frame>
  <img src="https://s3.amazonaws.com/helpscout.net/docs/assets/58f1ec6d2c7d3a52b42f8254/images/617280729ccf62287e5ee87d/file-8N8khqHddz.png" alt="Where the Template Color module sits within the designer interface" />
</Frame>

How to configure this module:

<Steps>
  <Step title="Create a template based design">
    Create your template based design in the [Admin Area](https://pitchprint.net/admin/login).
  </Step>

  <Step title="Open the Modules tab">
    Click the Configure Design icon. In the popup window, click the Modules Tab.
  </Step>

  <Step title="Enable Template Colors">
    Enable Template Colors:

    <Frame>
      <img src="https://s3.amazonaws.com/helpscout.net/docs/assets/58f1ec6d2c7d3a52b42f8254/images/61727c329ccf62287e5ee869/file-J7WOISBnPU.png" alt="Template Colors switched on in the Modules tab of the design configuration" />
    </Frame>
  </Step>

  <Step title="Confirm the module fields appear">
    You'll see there is a Title text box, and a '+ Add New' button. If it doesn't show this, it means your particular design is not template based.
  </Step>

  <Step title="Name the module">
    Type in a title for the Module.
  </Step>

  <Step title="Add a colour variant">
    To create a new color simply click '+ Add New' button. In the variant, you have a color rectangle default to red and a number image icons, representing the number of pages in your design.
  </Step>

  <Step title="Set the variant colour">
    Click the red colored rectangle to set the color for this variant.

    <Frame>
      <img src="https://s3.amazonaws.com/helpscout.net/docs/assets/58f1ec6d2c7d3a52b42f8254/images/58ff048c0428634b4a329531/file-SGSxBp3MnH.png" alt="Colour picker opened from the variant's colour rectangle" />
    </Frame>
  </Step>

  <Step title="Assign a template image per page">
    You should now click each of the image icons to set the template image that will appear for that color variant.
    You can equally upload your picture from that panel and immediately assign it to the module.
  </Step>

  <Step title="Save the module">
    You can add as many color variants as desired and once finished, click the submit button to save.
  </Step>

  <Step title="Optionally tint the original template">
    We recently added a new feature which allows you to enable **tint original template**, If enabled, upload the white template into the design and save it. You can then select the colors you would like to use in the template color module. Simply click the **add new color** button to add additional colors. Please refer to the image below for reference. These colors will then be available for the user to choose from. This works the same as the setup above, but saves the admin time by removing the need to upload a separate shirt template for each color.

    <Frame>
      <img src="https://s3.amazonaws.com/helpscout.net/docs/assets/58f1ec6d2c7d3a52b42f8254/images/62908984b1102521e97ab7fc/file-ygpwYPPMFH.png" alt="Tint original template enabled with added colours in the module settings" />
    </Frame>
  </Step>
</Steps>

You have finished, check your store and the module should appear in the designer for that product.

An example product can be seen here: [hoodie template colour demo](https://wp.demo.pitchprint.io/product/hoodie-template-color-module/)

## Related articles

<CardGroup cols={2}>
  <Card title="Template Colour Designs" icon="image" href="/docs/tutorial/template-colour-designs">
    Learn what template-based designs are and how template images are swapped in the editor.
  </Card>

  <Card title="Swatch Module" icon="swatchbook" href="/docs/tutorial/swatch-module">
    Let customers switch a design's color theme, background and preview within the editor.
  </Card>

  <Card title="Color Palette" icon="palette" href="/docs/tutorial/color-palette">
    Create five-color complementary themes customers can sample to restyle a design.
  </Card>

  <Card title="All About Colors" icon="droplet" href="/docs/tutorial/all-about-colors">
    Understand PitchPrint's color system, including Hex, CMYK and SPOT values.
  </Card>
</CardGroup>


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