> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.customeow.io/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Templates in CustoMeow ## Template types CustoMeow currently provides five template types: - **2D Preview Design** - **3D Preview Design** - **Mockup Design** - **Production Design** - **Production & Preview Design** ## Why are there so many templates? The templates support different use cases: | Template | When to use it | | ---- | ---- | | **2D Preview Design** | Customers only need a customization preview. | | **Production Design** | Only a production print is needed. | | **Production & Preview Design** | You need a flat preview plus a 300-DPI JPG production print. | | **Mockup Design** | You need both production artwork and a non-flat preview. | | **3D Preview Design** | You have uploaded a 3D model to Sketchfab. | Choose the template that best fits your business needs. ## Why are both preview components and design templates needed? **Relationship between preview components and templates:** A painting must have both a canvas and a frame before it can be displayed on a wall. - The painting is the preview. - The canvas is the template. - The frame is the preview component. - The wall is the customization feature on the product detail page. ## How do I choose a preview component and template? > **All production depends on the factory. Before creating a template, confirm the required production file with the factory to avoid wasted work.** - Format: PNG or JPG? - Parameters: what aspect ratio, dimensions, and DPI are required? - Is the color mode RGB or CMYK? - Does the image need to include the product? ## Preview components for each template Different templates work with different preview components, and their capabilities vary. ### 1. Preview ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/8632f226-5e36-4399-8525-d36eee34e74a.png?x-oss-process=image/format%2Cwebp) This component can import **2D Preview Design**, **Production Design**, and **Production & Preview Design** templates, and can enable moving and scaling of custom layers. > **Important:** Do not enable moving and scaling of custom layers for **Production & Preview Design**, which does not fully support it. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/266fa3b5-e72d-466a-89cd-ddda61b7c68d.png?x-oss-process=image/format%2Cwebp) ### 2. 3D Preview ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/8f13c431-b77a-4cfd-8006-1e3345bf0e61.png?x-oss-process=image/format%2Cwebp) It only imports 3D Preview Design and does not support moving or scaling custom layers. ### 3. Mockup Preview ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/332f94c7-a917-49e5-83e7-ed9bce266334.png?x-oss-process=image/format%2Cwebp) It requires both Mockup Design and Production Design, and does not support moving or scaling custom layers. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/40dbcc9b-c7ea-49c4-b55e-d06c94f524d3.png?x-oss-process=image/format%2Cwebp) In the screenshot, **1** is **Mockup Design**, and **2** is **Production Design**. ## Features of each template type ### 2D Preview Design Create it in the **Preview Design** menu. It cannot be referenced as Production Design in Workflow, generates only 72-DPI PNG files at the selected size, and does not support warp or perspective effects. ### Production Design Create it in the **Production Design** menu. It can be referenced as Production Design in Workflow. Its output format, color mode, aspect ratio, and DPI match the settings used at creation, and it does not support warp or perspective effects. ### Production & Preview Design Enable **Include preview design (Production & Preview)** when creating a Production Design. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/fa1f61e3-c801-421d-aa60-4cad15274491.png?x-oss-process=image/format%2Cwebp) #### Usage details After creating it, first design the **Production** section. Once finished, click **Next** in the upper-right corner to start designing the **Preview** section. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/40b6c139-0d59-42d5-9ed0-62620617271f.png?x-oss-process=image/format%2Cwebp) Before designing the **Preview** section, set its aspect ratio. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/ab124606-1c4e-42b1-88d0-913793a8ec01.png?x-oss-process=image/format%2Cwebp) Once inside, the layers in the **Production** section are automatically grouped. You can only move or scale the group as a whole, or hide individual layers within it; no other edits are available. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/42bca3de-d4d9-41a0-86a7-cd9a068ed955.png?x-oss-process=image/format%2Cwebp) Once you’ve finished designing the **Preview** section, click **Save** in the upper-right corner. To edit the **Production** section, click **Back** in the upper-left corner. Do not use your browser’s built-in Back button. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/ea1db11a-9f52-47fe-87f4-2d79c5a593cc.png?x-oss-process=image/format%2Cwebp) Customers see only the preview section. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/ffa654e0-9576-4e95-b689-98adf6486d01.png?x-oss-process=image/format%2Cwebp) Once an order is submitted, separate images are generated for preview and production. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/a5b241ad-f46d-45f7-90a7-158d8d69099a.png?x-oss-process=image/format%2Cwebp) ### Mockup Design It can be used for online customization and POD, supports warp and perspective effects, and must be used with **Production Design** in online-customization mode. Think of it as a **display model of a mug** and a **transparent sticker**. - The Mockup is like a mug model in a display case. It is used to show customers how the customized product will look, rather than for production. - The design area is like a transparent sticker on the mug. The customer’s text, uploaded images, and selected graphics are placed on this sticker and then displayed on the mug. The Mockup is the product model used to preview the result; the design area is the part of that model that holds the custom content. #### Mockup’s product image The Mockup product image should show an uncustomized product on a white background. For example: **Blanket** ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/4cb04881-bdfb-4256-a729-28861678fbb6.png?x-oss-process=image/format%2Cwebp) **Picture frame ornament** ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/fb609c08-017e-47e6-b6ff-00177be035b1.png?x-oss-process=image/format%2Cwebp) **Dress** ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/31dbdc8f-935f-4db4-bcb0-a8e0b0e03ca0.png?x-oss-process=image/format%2Cwebp) #### What is a design area? A design area should be created based on the product’s production artwork specifications, which should be confirmed with the actual manufacturer. For example, if a blanket’s production file is 1000 × 1300 px, 72 DPI, PNG, use the following settings when creating the design area. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/9f86a9c2-cb5d-4aa3-8e90-f3e4eff4c4c6.png?x-oss-process=image/format%2Cwebp) ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/fc3ee27f-5985-4f32-bb71-2e478bbcf790.png?x-oss-process=image/format%2Cwebp) #### How do I fit the design area to the product image? You can then adjust the design area’s visible range and apply distortion to make it fit the product image. Changing the visible range will not affect the settings configured in the previous step. **1.** Adjust the Visible Range **2.** Warp ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/041b56a9-d43e-40ce-bebd-2aa988effa60.png?x-oss-process=image/format%2Cwebp) Warp demonstration: [https://youtu.be/Px853BnNOOg](https://youtu.be/Px853BnNOOg) ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/c8d73db0-6873-4f4f-95ca-0ea73096f13e.png?x-oss-process=image/format%2Cwebp) ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/f91ce068-9e17-47d9-9ae0-59dca563949b.png?x-oss-process=image/format%2Cwebp) In addition to **Warp**, there are also **Perspective** and **Skew**. **Perspective** ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/d69121e5-1302-4a5e-90fd-3b746a6be3d4.png?x-oss-process=image/format%2Cwebp) ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/bd431892-e2d5-4169-8ca1-63889ed1b7d7.gif) ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/78d6b3dc-f78d-4c1a-8800-204b70143b47.png?x-oss-process=image/format%2Cwebp) ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/2dd2080d-c573-4778-a3f3-4b09bf6c6e86.png?x-oss-process=image/format%2Cwebp) **Skew** ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/dd75efda-4d17-4c13-8053-9313fd5950e4.gif) #### Replace the Design Area’s Display Image If it is difficult to adjust the Warp or Perspective angle during editing, you can manually upload the **production image** to replace the content displayed in the **design area**. **Before replacement** ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/b44486de-53ab-45f3-9d0f-dfb5d73fd40c.png?x-oss-process=image/format%2Cwebp) **Production image** ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/4cc7f52d-bd41-4eb6-8e08-3f2a53c1c2d6.png?x-oss-process=image/format%2Cwebp) **After replacement** ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/03b0f7d6-0072-4a2d-a57b-01801614376b.png?x-oss-process=image/format%2Cwebp) **Start warping** ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/090eac81-b991-4dd4-9504-041586dd81f4.png?x-oss-process=image/format%2Cwebp) ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/887022bb-56d9-4a32-84b2-74ee7b8c2f36.png?x-oss-process=image/format%2Cwebp) Once you’ve finished warping, click **Remove** to remove it. #### Add Mockup Preview Images If the Mockup has multiple preview images, click **Add Image**. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/14633c77-3b73-4ef9-8c9f-487be83d6e75.png?x-oss-process=image/format%2Cwebp) #### Copy a Design Area to Other Preview Images If multiple preview images share the same **design area**, select the configured design area and use the copy shortcut (**Ctrl + C / Cmd + C**) and paste shortcut (**Ctrl + V / Cmd + V**) to copy it to the other preview images, as shown below: ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/93dc43b0-a367-4d6a-80dc-8e7f6375aea6.gif) > **Note:** Conversely, clicking **Add New** creates a new design area; the design-area layer on the right will appear in a different color. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/8a5c88df-ef93-46fc-85ba-62394aab2690.png?x-oss-process=image/format%2Cwebp) #### Mockup Test Image **1.** Click the center canvas to upload a test image. Test images are not shown to customers. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/27e6ef60-abfb-4881-8245-243a9d892918.png?x-oss-process=image/format%2Cwebp) **2.** Check the preview. Previews update in real time as you upload test images. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/3cab16f8-812f-4054-82b5-1c3bb56b3636.png?x-oss-process=image/format%2Cwebp) #### Set the Fill Mode for the Design Area **Fill** ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/570a21c6-4b37-48e6-b758-4c0287df019c.png?x-oss-process=image/format%2Cwebp) ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/034aa675-4d0b-4086-8a28-61eadf33ca80.png?x-oss-process=image/format%2Cwebp) **Cover** ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/fa38272b-7107-4cff-ba6b-1b0b0dda7816.png?x-oss-process=image/format%2Cwebp) ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/7b8dcae9-0aaf-4c66-93a5-73990978a24e.png?x-oss-process=image/format%2Cwebp) **Contain** ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/7bf4714d-7a4d-4718-9209-881eab3add63.png?x-oss-process=image/format%2Cwebp) ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/d1ed9804-9414-428e-a757-995c50c6fdbd.png?x-oss-process=image/format%2Cwebp) #### Set Image Alignment ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/81cd3a62-f030-4600-8ee2-d91706d3ea21.png?x-oss-process=image/format%2Cwebp) ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/b2384f06-43c7-457c-904c-5c65fd9819c6.png?x-oss-process=image/format%2Cwebp) #### Safety line (bleed line) The safety line (bleed line) reminds customers not to place custom content outside it. It appears only on the customer-facing canvas and does not affect preview or production output. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/e88b427a-b461-4a1b-b6fa-bb4727d37303.png?x-oss-process=image/format%2Cwebp) ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/458906fb-18e7-497b-951a-8019f3d5ae91.png?x-oss-process=image/format%2Cwebp) #### Reference diagram Reference diagrams guide customers on the canvas. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/f22533d0-7f82-435c-8135-aa8c1694b137.png?x-oss-process=image/format%2Cwebp) ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/42694c75-7363-4b75-8dcc-e082e0d6bcd1.png?x-oss-process=image/format%2Cwebp) ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/9c0938e1-ee3a-4b20-8229-47653450c1f4.png?x-oss-process=image/format%2Cwebp) ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/772a2e39-9fe8-473a-8580-4eec0eb5fd3e.png?x-oss-process=image/format%2Cwebp) #### Enable fill color SVG After enabling **Enable fill color SVG**, customers can choose colors on the design page, without affecting production artwork. (Upload an SVG reference diagram to enable this option.) ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/99197bf5-143a-4ffe-b4e6-3fe00dfbc9ea.png?x-oss-process=image/format%2Cwebp) ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/7f61ff1a-52fd-45d1-842f-2117097dacc9.gif) > **Important:** Simply enabling this option is not enough. When integrating or publishing a product to your store, you must select and configure the color options. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/60219799-51f0-4616-8577-54cbd20bc74b.png?x-oss-process=image/format%2Cwebp) [How to Integrate a Customization Feature into a Product Detail Page (Chinese)](https://help.customeow.io/zh/article/5aac5l2v6k6p44cm5a6a5yi25yqf6io944cn6zug5oiq5yiw5lqn5zob6jc95zyw6ag177yf77yi5lqn5zob6km5oof6ag177yj-2ivrml/) The linked guide covers POD product integration. Refer to it for more detail. #### Bring to front ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/e5df8db9-388b-4258-bcf2-f946892d536f.png?x-oss-process=image/format%2Cwebp) Enabling **Bring to front** affects only the customer-facing design canvas, not production artwork. How it looks when enabled and an image is uploaded on the customer-facing page ↓ ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/dad4cade-62e6-45fd-b9c0-e4960068ef0c.png?x-oss-process=image/format%2Cwebp) How it looks when disabled and an image is uploaded on the customer-facing page ↓ ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/827ab0cf-0023-46a2-8bd0-fbb93382e1ec.png?x-oss-process=image/format%2Cwebp) #### Display Design Area Parameters ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/91d6ea24-7808-4360-8245-da0e09b1ff9d.png?x-oss-process=image/format%2Cwebp) #### How to Use It in Custom Product Mode In **Custom Product mode**, Mockup Preview can use only one preview image from **Mockup Design**, and you must import a **Production Design**. The production image is generated using the same parameters as the **Production Design**. **1.** After adding a Mockup Preview component, select **Import Mockup Design**. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/42f8e2c5-78ce-41fa-b593-3ef249eab0c6.png?x-oss-process=image/format%2Cwebp) **2.** Select a Mockup Design. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/e222084d-9866-46e8-956d-0a785f90c529.png?x-oss-process=image/format%2Cwebp) **3.** Select a Mockup preview image (only one can be selected). **4.** Select design areas (you can select multiple if there are several). ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/95430664-5080-42ac-944b-5155c0928c6e.png?x-oss-process=image/format%2Cwebp) **5.** Import a Production Design. If you selected multiple design areas in the previous step, add multiple Production Designs here. To use the same Production Design for multiple design areas, select **Replace all design areas with a production design**. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/558ffbf1-f527-40cb-8b17-a0df04318719.png?x-oss-process=image/format%2Cwebp) **6.** Click the Production Design. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/a969c84d-dcf7-498d-8a1b-bfbdef3c737e.png?x-oss-process=image/format%2Cwebp) **7.** Connect the component data to the Production Design layers. **8.** Save and preview. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/b3879d6a-440f-48a0-88e8-6d75e05900a4.png?x-oss-process=image/format%2Cwebp) ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/318ac9bb-e883-44fc-8754-004d34de7f27.png?x-oss-process=image/format%2Cwebp) The relationship between Mockup Design and Production Design in Mockup Preview can be understood simply as follows: One is the shell (**Mockup Design**), and the other is the texture (**Production Design**). The texture is applied to the shell. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/4d1dd60d-93bd-4981-ba55-ecb5f55da0e6.png?x-oss-process=image/format%2Cwebp) This lets you create a Mockup Design once and reuse it multiple times with different textures. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/794a290d-924b-4a41-8251-28e315e69a86.png?x-oss-process=image/format%2Cwebp) ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/89c79947-d815-4cc7-bcd9-d63cc2262e5e.png?x-oss-process=image/format%2Cwebp) ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/53a28769-9bf4-44e6-8627-b269f98c5822.png?x-oss-process=image/format%2Cwebp) ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/635bd343-60ba-40a2-98ac-78b26d8749b3.png?x-oss-process=image/format%2Cwebp) Likewise, a texture can be applied to different shells without reconnecting components and layers. Simply duplicate the feature and replace the shell. #### How to Reuse a Mockup in Custom Product Mode **1.** Duplicate the completed feature set. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/89511e29-a041-4322-86e4-ebdf8bb7ccbf.png?x-oss-process=image/format%2Cwebp) **2.** Edit the newly duplicated feature set. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/9eda1c6d-e43b-4091-8d96-e681768fc6e7.png?x-oss-process=image/format%2Cwebp) **3.** Click **Replace** (the replacement will not take effect unless you click it). ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/3412761a-d3da-4dbc-8775-4daaecc75c9c.png?x-oss-process=image/format%2Cwebp) **4.** Select the new Mockup. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/19c5e980-26e8-4aaa-b974-2aad4ea2dce7.png?x-oss-process=image/format%2Cwebp) **5.** Select the preview image and design area. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/7f4fb383-4106-42e4-8e8d-1c30a39678d2.png?x-oss-process=image/format%2Cwebp) **6.** After confirming, the connections between the components and Production Design layers will remain intact. Click **Preview & Save** to review the result. ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/a341e990-a8a2-4923-897b-424add06be7d.png?x-oss-process=image/format%2Cwebp) ![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/eea380ff-8246-4b6e-8929-a1cae41e0b2f.png?x-oss-process=image/format%2Cwebp) ### 3D Preview Design We recommend having a 3D designer create the model and upload it to Sketchfab, then referencing it in CustoMeow. > CustoMeow only references 3D models; it does not create or edit them. ## Further Reading ### Getting Started - [Connect Your Store](https://help.customeow.io/en/article/connect-your-store-9kzhxj/) - [Beginner Guide: Create Your First Customization Feature Step by Step](https://help.customeow.io/en/article/beginner-guide-create-your-first-customization-feature-step-by-step-3th848/) - [How to Integrate a Customization Feature into a Product Landing Page (Product Detail Page)](https://help.customeow.io/en/article/how-to-integrate-a-customization-feature-into-a-product-landing-page-product-detail-page-9b1ke5/) ### Advanced Features - [Use Component Conditions to Control Whether Components Are Shown or Hidden](https://help.customeow.io/en/article/use-component-conditions-to-control-whether-components-are-shown-or-hidden-1r2defw/) - [What Can Workflow Do?](https://help.customeow.io/en/article/what-can-workflow-do-3jwgks/) ### Add-on Pricing and Upselling - [What Is an Add-on Price Product?](https://help.customeow.io/en/article/what-is-an-add-on-price-product-959ka/) - [What Is an Upsell Product?](https://help.customeow.io/en/article/what-is-an-upsell-product-9pmt71/) - [Cart Binding for Add-Price and Upsell Products](https://help.customeow.io/en/article/cart-binding-for-add-price-and-upsell-products-bi7wjx/)