Pick a canvas size, lay out your artwork, and learn the layer numbers your option set will point at.
This walkthrough takes you from an empty canvas to a saved design template that’s ready to be personalized.
1
Start a new template
Go to Design Templates and click Create template.
Create template opens the canvas-size dialog.
2
Choose your canvas size
Pick one of the ready-made artboard sizes, or set your own width and height.
The canvas-size dialog. Presets on the left, custom size and name on the right.
Preset
Size
T-Shirt
14 × 16 in
Pants
12 × 14 in
Tote Bag
15 × 16 in
Mug Wrap
2550 × 1155 px
Phone Case
3 × 6 in
Sticker
4 × 4 in
Poster
16 × 20 in
Postcard
4 × 6 in
Business Card
3.5 × 2 in
For a custom size, type a width and height and pick your unit: pixels, centimetres, millimetres, or inches. If you work in a physical unit, set the DPI to match what your printer expects; 300 is the usual choice for print.Give the template a name you’ll recognise later, because you’ll be picking it from a list when you build the option set. Then click Create.
Use the size your printer asks for, not the size of the product photo. The canvas is what gets printed.
3
Get your bearings in the editor
The template opens straight into the design editor.
Tool rail · 2. Elements panel · 3. Design Template, what gets printed · 4. Design Preview, what the shopper sees · 5. Settings for whatever you select
The two canvases side by side are the part worth understanding:
Design Template is the artwork itself, at print size. This is what ends up on the product.
Design Preview wraps that artwork onto a photo of the real product, so you and your customer can see how it will look.
Anything you add while the Design Preview frame is selected stays on the preview only. It is never printed. If the Elements panel warns you that you’re editing the Design Preview, click the Design Template canvas first.
There’s more to the two frames than this: how the preview keeps up with your design, and what happens when it stops. See The design and preview frames.
4
Add your artwork
Open the Elements panel from the top of the tool rail and click what you want to add.
The Elements panel. Each entry has a ? that shows a short animation of what it does.
Element
Use it for
Text
Names, dates, messages, anything a customer types
Placeholder Image
A frame your customer fills with their own photo
Dynamic Image
A picture that swaps depending on what the customer picks
QR Code
A code built from a link the customer enters
Calendar
A date shown as a calendar page
Moon Phase / Star Map
The night sky on a date the customer chooses
Map
A location the customer searches for
Crossword / Word Search / Word Cloud
A puzzle or cloud built from words the customer types
String Art
A customer’s photo turned into thread wound between nails on a board
Select anything on the canvas and its settings (font, size, colour, position) appear in the panel on the right.
For a first template, one Text layer and one Dynamic Image layer is plenty. You can always add more later.
5
Check your layer numbers
Open the Layers panel from the tool rail. Every layer on your canvas is listed with a number next to it.
The Layers panel. Layer #14 is a text layer named Kid's Name.
This is the most important thing on the page. When you later tell an option set “put the customer’s answer here”, you point it at one of these numbers. An option connected to #14 writes into this exact text layer.Two habits will save you a lot of confusion later:
Name your layers. Double-click a layer name and type something you’ll recognise, such as Kid’s Name or Background photo. In the option set you’ll see the name next to the number.
Watch for repeats. Layer numbers are not always unique. In the screenshot above, three separate layers are called Kid’s Name, and elsewhere in the same template two layers share the number #3.
If two layers share a number, an option connected to that number may change the wrong one. When you pick the layer in the option set, Customei asks you which of the matching layers you meant. Choose carefully, and rename the layers so you can tell them apart.
6
Save
Click Save in the top right. The badge beside the template name switches to Saved once it’s stored.Your template is now ready to be used by an option set.
Turn your template into questions a shopper can answer.
Connect options to your design
Point an answer at the layer number you just checked.
The design and preview frames
Which canvas gets printed, and how the preview follows it.
Add a mockup preview
Show your artwork on a photo of the real product.
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"Customei","description":"Sell personalized, print-on-demand products on Shopify with a visual template designer, option sets, and a storefront widget.","colors":{"primary":"#171717","light":"#E5E5E5","dark":"#000000"},"logo":{"light":"https://mintcdn.com/nexlify/X0bpSwJw_2jGnOd6/logo/light.svg?fit=max\u0026auto=format\u0026n=X0bpSwJw_2jGnOd6\u0026q=85\u0026s=379b9582e45d368ae1ef5af3660b3d12","dark":"https://mintcdn.com/nexlify/X0bpSwJw_2jGnOd6/logo/dark.svg?fit=max\u0026auto=format\u0026n=X0bpSwJw_2jGnOd6\u0026q=85\u0026s=bc236d35fa0e7d52870f927f9b744bf5"},"favicon":"https://mintcdn.com/nexlify/yQUl5p09FuH64dDN/favicon.png?fit=max\u0026auto=format\u0026n=yQUl5p09FuH64dDN\u0026q=85\u0026s=423f5fc036bbe1a5797df2ef059062a3","appearance":{"default":"system"},"background":{"decoration":"gradient"},"navbar":{"links":[{"href":"mailto:[email protected]","label":"Support"}],"primary":{"type":"button","label":"Install on Shopify","href":"https://apps.shopify.com/"}},"footer":{"socials":{"x":"https://x.com/customei","github":"https://github.com/Nexlify-Hub"}},"styling":{"latex":true},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"nexlify","hasAudioNarration":false,"actualSubdomain":"nexlify","customDomains":["docs.customei.com"],"gitSource":{"type":"github","owner":"nexlify-hub","repo":"customei-docs","deployBranch":"main","contentDirectory":"","isPrivate":true,"mountPath":"","label":""},"entitlements":{"AI_CHAT":{"status":"DISABLED"}},"buildId":"6ae1c559201cdb70a521bdc8","clientVersion":"0.0.4124","searchFilterCounts":[{"language":"default","tag":"Documentation","count":52},{"language":"default","tag":"Option Sets","count":16},{"language":"default","tag":"Template Editor","count":13},{"language":"default","tag":"Libraries \u0026 Assets","count":4},{"language":"default","tag":"Translations","count":4},{"language":"default","tag":"Integrations \u0026 AI","count":3},{"language":"default","tag":"Mockups","count":3},{"language":"default","tag":"Preferences","count":3},{"language":"default","tag":"Design Templates","count":3},{"language":"default","tag":"Introduction","count":2}]},"assistantConfig":{"enableAskAiButton":false,"enableStarterQuestions":false,"enableContextualStarterQuestions":false,"enableAskAiSearchBar":true},"basePath":"","hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-rbac-roles","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"rbac-expansion","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"full-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-dual-write","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"approve-review-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-metadata","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"sso-setup-deadline-banner","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-serve","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"live-agents","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"googleFontsInlined":false},"customCss":[],"page":{"pagePath":"templates/create-a-template","slug":"/templates/create-a-template","pageMetadata":{"title":"Create a design template","description":"Pick a canvas size, lay out your artwork, and learn the layer numbers your option set will point at.","icon":"pen-ruler","href":"/templates/create-a-template"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Pick a canvas size, lay out your artwork, and learn the layer numbers your option set will point at.\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={a:`a`,code:`code`,em:`em`,li:`li`,p:`p`,strong:`strong`,tbody:`tbody`,td:`td`,th:`th`,thead:`thead`,tr:`tr`,ul:`ul`,..._provideComponents(),...props.components},{Card,CardGroup,Frame,Heading,OptimizedImage,Step,Steps,Table,Tip,Warning}=_components;if(!Card)_missingMdxReference(`Card`,true);if(!CardGroup)_missingMdxReference(`CardGroup`,true);if(!Frame)_missingMdxReference(`Frame`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!OptimizedImage)_missingMdxReference(`OptimizedImage`,true);if(!Step)_missingMdxReference(`Step`,true);if(!Steps)_missingMdxReference(`Steps`,true);if(!Table)_missingMdxReference(`Table`,true);if(!Tip)_missingMdxReference(`Tip`,true);if(!Warning)_missingMdxReference(`Warning`,true);return _jsxs(_Fragment,{children:[_jsx(_components.p,{children:`This walkthrough takes you from an empty canvas to a saved design template that’s ready to be personalized.`}),`\n`,_jsxs(Steps,{children:[_jsxs(Step,{title:`Start a new template`,children:[_jsxs(_components.p,{children:[`Go to `,_jsx(_components.strong,{children:`Design Templates`}),` and click `,_jsx(_components.strong,{children:`Create template`}),`.`]}),_jsx(Frame,{caption:`Create template opens the canvas-size dialog.`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/templates/templates-list.png?fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=ed5c1ec6d024ca994f96345d9552859c`,alt:`The Design Templates page with the Create template button highlighted in the top right.`,\"data-og-width\":`3840`,width:`3840`,\"data-og-height\":`2400`,height:`2400`,\"data-path\":`images/templates/templates-list.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/templates/templates-list.png?w=280\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=b006c02abc2c46880732b84195aec216 280w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/templates/templates-list.png?w=560\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=70bee44f1f1c3315bc846d41bf3d246e 560w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/templates/templates-list.png?w=840\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=b419abe6551b9fd4b0afb388ef93eeae 840w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/templates/templates-list.png?w=1100\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=e2b0d6e742f2b73aaa1010dbdada1f49 1100w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/templates/templates-list.png?w=1650\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=f033ed45d9ee895179f4853e5d3f45d8 1650w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/templates/templates-list.png?w=2500\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=61d1c7adea251cbd6c591e2985c1537e 2500w`})})]}),_jsxs(Step,{title:`Choose your canvas size`,children:[_jsx(_components.p,{children:`Pick one of the ready-made artboard sizes, or set your own width and height.`}),_jsx(Frame,{caption:`The canvas-size dialog. Presets on the left, custom size and name on the right.`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/templates/create-template-modal.png?fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=a1751782e8efe236f542b19fe191cdfd`,alt:`The Create new template dialog showing nine artboard presets (T-Shirt, Pants, Tote Bag, Mug Wrap, Phone Case, Sticker, Poster, Postcard, Business Card) beside Name, Size, Unit and DPI fields.`,\"data-og-width\":`2040`,width:`2040`,\"data-og-height\":`1150`,height:`1150`,\"data-path\":`images/templates/create-template-modal.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/templates/create-template-modal.png?w=280\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=5ad79e4eacadd904380e87bc53405c8f 280w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/templates/create-template-modal.png?w=560\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=5a06dc50f4d99409ce7747fa8944d92f 560w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/templates/create-template-modal.png?w=840\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=505f62cafe06fbb613b9a36f724f2180 840w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/templates/create-template-modal.png?w=1100\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=2c60adfbbdc356155bb39bc9a9915386 1100w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/templates/create-template-modal.png?w=1650\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=042c570f5256fed8ac43fb7b902a35cc 1650w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/templates/create-template-modal.png?w=2500\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=8c216663385ecda3656b493f11bc4ca4 2500w`})}),_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Preset`}),_jsx(_components.th,{children:`Size`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`T-Shirt`}),_jsx(_components.td,{children:`14 × 16 in`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Pants`}),_jsx(_components.td,{children:`12 × 14 in`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Tote Bag`}),_jsx(_components.td,{children:`15 × 16 in`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Mug Wrap`}),_jsx(_components.td,{children:`2550 × 1155 px`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Phone Case`}),_jsx(_components.td,{children:`3 × 6 in`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Sticker`}),_jsx(_components.td,{children:`4 × 4 in`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Poster`}),_jsx(_components.td,{children:`16 × 20 in`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Postcard`}),_jsx(_components.td,{children:`4 × 6 in`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`Business Card`}),_jsx(_components.td,{children:`3.5 × 2 in`})]})]})]}),_jsxs(_components.p,{children:[`For a custom size, type a `,_jsx(_components.strong,{children:`width`}),` and `,_jsx(_components.strong,{children:`height`}),` and pick your `,_jsx(_components.strong,{children:`unit`}),`: pixels, centimetres, millimetres, or inches. If you work in a physical unit, set the `,_jsx(_components.strong,{children:`DPI`}),` to match what your printer expects; 300 is the usual choice for print.`]}),_jsxs(_components.p,{children:[`Give the template a name you’ll recognise later, because you’ll be picking it from a list when you build the option set. Then click `,_jsx(_components.strong,{children:`Create`}),`.`]}),_jsx(Tip,{children:_jsx(_components.p,{children:`Use the size your printer asks for, not the size of the product photo. The canvas is what gets printed.`})})]}),_jsxs(Step,{title:`Get your bearings in the editor`,children:[_jsx(_components.p,{children:`The template opens straight into the design editor.`}),_jsx(Frame,{caption:`1. Tool rail · 2. Elements panel · 3. Design Template, what gets printed · 4. Design Preview, what the shopper sees · 5. Settings for whatever you select`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/templates/editor-tour.png?fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=1da6f72b6833a4b3b78a8aa93eced777`,alt:`The design editor with five numbered callouts: the tool rail, the Elements panel, the Design Template canvas, the Design Preview mockup, and the right-hand settings panel.`,\"data-og-width\":`3840`,width:`3840`,\"data-og-height\":`2400`,height:`2400`,\"data-path\":`images/templates/editor-tour.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/templates/editor-tour.png?w=280\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=9030b5f34457468bcc6c97c58c874103 280w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/templates/editor-tour.png?w=560\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=79b5645de5400fc2bbb5ddd4b78df6c1 560w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/templates/editor-tour.png?w=840\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=102ca95cbb623070e73e233ff79ea0f9 840w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/templates/editor-tour.png?w=1100\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=013279b845325d67c271e69c802c1843 1100w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/templates/editor-tour.png?w=1650\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=d2c5d29e8203c10fe4aefb5967b4a127 1650w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/templates/editor-tour.png?w=2500\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=abe71c8dd02e3b0d401c9cbbea3a136a 2500w`})}),_jsx(_components.p,{children:`The two canvases side by side are the part worth understanding:`}),_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Design Template`}),` is the artwork itself, at print size. This is what ends up on the product.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Design Preview`}),` wraps that artwork onto a photo of the real product, so you and your customer can see how it will look.`]}),`\n`]}),_jsx(Warning,{children:_jsxs(_components.p,{children:[`Anything you add while the `,_jsx(_components.strong,{children:`Design Preview`}),` frame is selected stays on the preview only. It is never printed. If the Elements panel warns you that you’re editing the Design Preview, click the `,_jsx(_components.strong,{children:`Design Template`}),` canvas first.`]})}),_jsxs(_components.p,{children:[`There’s more to the two frames than this: how the preview keeps up with your design, and what happens when it stops. See `,_jsx(_components.a,{href:`/editor/design-and-preview-frames`,children:`The design and preview frames`}),`.`]})]}),_jsxs(Step,{title:`Add your artwork`,children:[_jsxs(_components.p,{children:[`Open the `,_jsx(_components.strong,{children:`Elements`}),` panel from the top of the tool rail and click what you want to add.`]}),_jsx(Frame,{caption:`The Elements panel. Each entry has a ? that shows a short animation of what it does.`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/nexlify/px9BcsXyWZTo3XBt/images/templates/editor-elements.png?fit=max\u0026auto=format\u0026n=px9BcsXyWZTo3XBt\u0026q=85\u0026s=d23053f1a5cf031b5bef1766253b05cd`,alt:`The Elements panel highlighted, listing Text, Placeholder Image, Dynamic Image, Crossword, Word Search, Word Cloud, Calendar, Moon Phase, Star Map, Map, QR Code and String Art.`,\"data-og-width\":`3840`,width:`3840`,\"data-og-height\":`2400`,height:`2400`,\"data-path\":`images/templates/editor-elements.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/nexlify/px9BcsXyWZTo3XBt/images/templates/editor-elements.png?w=280\u0026fit=max\u0026auto=format\u0026n=px9BcsXyWZTo3XBt\u0026q=85\u0026s=2fb803d37ccacd5c898083ffcc18aee7 280w, https://mintcdn.com/nexlify/px9BcsXyWZTo3XBt/images/templates/editor-elements.png?w=560\u0026fit=max\u0026auto=format\u0026n=px9BcsXyWZTo3XBt\u0026q=85\u0026s=0d90ec2ff7ab2ef500defea760d4815d 560w, https://mintcdn.com/nexlify/px9BcsXyWZTo3XBt/images/templates/editor-elements.png?w=840\u0026fit=max\u0026auto=format\u0026n=px9BcsXyWZTo3XBt\u0026q=85\u0026s=6d9b7f669295c9c52871880131a1a999 840w, https://mintcdn.com/nexlify/px9BcsXyWZTo3XBt/images/templates/editor-elements.png?w=1100\u0026fit=max\u0026auto=format\u0026n=px9BcsXyWZTo3XBt\u0026q=85\u0026s=89eda1a550df88e81b5496d79b1af332 1100w, https://mintcdn.com/nexlify/px9BcsXyWZTo3XBt/images/templates/editor-elements.png?w=1650\u0026fit=max\u0026auto=format\u0026n=px9BcsXyWZTo3XBt\u0026q=85\u0026s=06fc74e546104551893fa55b15cecd6b 1650w, https://mintcdn.com/nexlify/px9BcsXyWZTo3XBt/images/templates/editor-elements.png?w=2500\u0026fit=max\u0026auto=format\u0026n=px9BcsXyWZTo3XBt\u0026q=85\u0026s=c5461fb3206bd4b926d39e82237a0b25 2500w`})}),_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Element`}),_jsx(_components.th,{children:`Use it for`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Text`})}),_jsx(_components.td,{children:`Names, dates, messages, anything a customer types`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Placeholder Image`})}),_jsx(_components.td,{children:`A frame your customer fills with their own photo`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Dynamic Image`})}),_jsx(_components.td,{children:`A picture that swaps depending on what the customer picks`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`QR Code`})}),_jsx(_components.td,{children:`A code built from a link the customer enters`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Calendar`})}),_jsx(_components.td,{children:`A date shown as a calendar page`})]}),_jsxs(_components.tr,{children:[_jsxs(_components.td,{children:[_jsx(_components.strong,{children:`Moon Phase`}),` / `,_jsx(_components.strong,{children:`Star Map`})]}),_jsx(_components.td,{children:`The night sky on a date the customer chooses`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Map`})}),_jsx(_components.td,{children:`A location the customer searches for`})]}),_jsxs(_components.tr,{children:[_jsxs(_components.td,{children:[_jsx(_components.strong,{children:`Crossword`}),` / `,_jsx(_components.strong,{children:`Word Search`}),` / `,_jsx(_components.strong,{children:`Word Cloud`})]}),_jsx(_components.td,{children:`A puzzle or cloud built from words the customer types`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`String Art`})}),_jsx(_components.td,{children:`A customer’s photo turned into thread wound between nails on a board`})]})]})]}),_jsx(_components.p,{children:`Select anything on the canvas and its settings (font, size, colour, position) appear in the panel on the right.`}),_jsx(Tip,{children:_jsxs(_components.p,{children:[`For a first template, one `,_jsx(_components.strong,{children:`Text`}),` layer and one `,_jsx(_components.strong,{children:`Dynamic Image`}),` layer is plenty. You can always add more later.`]})})]}),_jsxs(Step,{title:`Check your layer numbers`,children:[_jsxs(_components.p,{children:[`Open the `,_jsx(_components.strong,{children:`Layers`}),` panel from the tool rail. Every layer on your canvas is listed with a number next to it.`]}),_jsx(Frame,{caption:`The Layers panel. Layer #14 is a text layer named Kid's Name.`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/templates/layer-numbers.png?fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=ab4b9307a4703b0ccedc9484bbc0802d`,alt:`The Layers panel listing layers with numbers from #16 down to #2, with the row for #14 Kid's Name highlighted.`,\"data-og-width\":`3840`,width:`3840`,\"data-og-height\":`2400`,height:`2400`,\"data-path\":`images/templates/layer-numbers.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/templates/layer-numbers.png?w=280\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=d5091dc40129876ea07c2200cde24946 280w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/templates/layer-numbers.png?w=560\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=6838903f2714413c5b1840f9c55672a0 560w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/templates/layer-numbers.png?w=840\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=c2e09be7ab34f33b32a5f81673d57e66 840w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/templates/layer-numbers.png?w=1100\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=19d0ff06418eb7fdf7ef61025c87fd7b 1100w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/templates/layer-numbers.png?w=1650\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=3d0ba3201e17bfb23bc4b51e16d5843d 1650w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/templates/layer-numbers.png?w=2500\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=458dc2acf9ac4c7cb0f5ccb7c678b921 2500w`})}),_jsxs(_components.p,{children:[_jsx(_components.strong,{children:`This is the most important thing on the page.`}),` When you later tell an option set `,_jsx(_components.em,{children:`“put the customer’s answer here”`}),`, you point it at one of these numbers. An option connected to `,_jsx(_components.code,{children:`#14`}),` writes into this exact text layer.`]}),_jsx(_components.p,{children:`Two habits will save you a lot of confusion later:`}),_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Name your layers.`}),` Double-click a layer name and type something you’ll recognise, such as `,_jsx(_components.em,{children:`Kid’s Name`}),` or `,_jsx(_components.em,{children:`Background photo`}),`. In the option set you’ll see the name next to the number.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Watch for repeats.`}),` Layer numbers are not always unique. In the screenshot above, three separate layers are called `,_jsx(_components.em,{children:`Kid’s Name`}),`, and elsewhere in the same template two layers share the number `,_jsx(_components.code,{children:`#3`}),`.`]}),`\n`]}),_jsx(Warning,{children:_jsx(_components.p,{children:`If two layers share a number, an option connected to that number may change the wrong one. When you pick the layer in the option set, Customei asks you which of the matching layers you meant. Choose carefully, and rename the layers so you can tell them apart.`})})]}),_jsxs(Step,{title:`Save`,children:[_jsxs(_components.p,{children:[`Click `,_jsx(_components.strong,{children:`Save`}),` in the top right. The badge beside the template name switches to `,_jsx(_components.strong,{children:`Saved`}),` once it’s stored.`]}),_jsx(_components.p,{children:`Your template is now ready to be used by an option set.`})]})]}),`\n`,_jsx(Heading,{level:`2`,id:`keyboard-shortcuts`,children:`Keyboard shortcuts`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Shortcut`}),_jsx(_components.th,{children:`Does`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsxs(_components.td,{children:[_jsx(`kbd`,{children:`⌘`}),` `,_jsx(`kbd`,{children:`S`})]}),_jsx(_components.td,{children:`Save`})]}),_jsxs(_components.tr,{children:[_jsxs(_components.td,{children:[_jsx(`kbd`,{children:`⌘`}),` `,_jsx(`kbd`,{children:`⇧`}),` `,_jsx(`kbd`,{children:`S`})]}),_jsx(_components.td,{children:`Save and publish`})]}),_jsxs(_components.tr,{children:[_jsxs(_components.td,{children:[_jsx(`kbd`,{children:`⌘`}),` `,_jsx(`kbd`,{children:`Z`})]}),_jsx(_components.td,{children:`Undo`})]}),_jsxs(_components.tr,{children:[_jsxs(_components.td,{children:[_jsx(`kbd`,{children:`⌘`}),` `,_jsx(`kbd`,{children:`⇧`}),` `,_jsx(`kbd`,{children:`Z`})]}),_jsx(_components.td,{children:`Redo`})]}),_jsxs(_components.tr,{children:[_jsxs(_components.td,{children:[_jsx(`kbd`,{children:`⌘`}),` `,_jsx(`kbd`,{children:`D`})]}),_jsx(_components.td,{children:`Duplicate`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(`kbd`,{children:`delete`})}),_jsx(_components.td,{children:`Delete`})]}),_jsxs(_components.tr,{children:[_jsxs(_components.td,{\"data-numeric\":`true`,children:[_jsx(`kbd`,{children:`⌘`}),` `,_jsx(`kbd`,{children:`C`}),` / `,_jsx(`kbd`,{children:`⌘`}),` `,_jsx(`kbd`,{children:`V`})]}),_jsx(_components.td,{children:`Copy / paste`})]}),_jsxs(_components.tr,{children:[_jsxs(_components.td,{\"data-numeric\":`true`,children:[_jsx(`kbd`,{children:`⌘`}),` `,_jsx(`kbd`,{children:`⌥`}),` `,_jsx(`kbd`,{children:`C`}),` / `,_jsx(`kbd`,{children:`⌘`}),` `,_jsx(`kbd`,{children:`⌥`}),` `,_jsx(`kbd`,{children:`V`})]}),_jsx(_components.td,{children:`Copy / paste style`})]}),_jsxs(_components.tr,{children:[_jsxs(_components.td,{children:[`hold `,_jsx(`kbd`,{children:`⌘`})]}),_jsx(_components.td,{children:`Select more than one item`})]})]})]}),`\n`,_jsxs(_components.p,{children:[`In the layer list: `,_jsx(`kbd`,{children:`↑`}),` `,_jsx(`kbd`,{children:`↓`}),` move between layers, `,_jsx(`kbd`,{children:`→`}),` opens a group, `,_jsx(`kbd`,{children:`←`}),` closes it, and `,_jsx(`kbd`,{children:`enter`}),` renames the selected layer.`]}),`\n`,_jsx(Heading,{level:`2`,id:`where-to-next`,children:`Where to next`}),`\n`,_jsxs(CardGroup,{cols:2,children:[_jsx(Card,{title:`Option sets`,icon:`sliders`,href:`/optionsets/overview`,children:_jsx(_components.p,{children:`Turn your template into questions a shopper can answer.`})}),_jsx(Card,{title:`Connect options to your design`,icon:`link`,href:`/optionsets/connect-to-a-template`,children:_jsx(_components.p,{children:`Point an answer at the layer number you just checked.`})}),_jsx(Card,{title:`The design and preview frames`,icon:`clone`,href:`/editor/design-and-preview-frames`,children:_jsx(_components.p,{children:`Which canvas gets printed, and how the preview follows it.`})}),_jsx(Card,{title:`Add a mockup preview`,icon:`image`,href:`/editor/add-a-mockup`,children:_jsx(_components.p,{children:`Show your artwork on a photo of the real product.`})})]})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Create a design template","description":"Pick a canvas size, lay out your artwork, and learn the layer numbers your option set will point at.","icon":"pen-ruler","href":"/templates/create-a-template"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Keyboard shortcuts","slug":"keyboard-shortcuts","depth":2,"children":[]},{"title":"Where to next","slug":"where-to-next","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"subdomain":"nexlify","siteName":"Customei","title":"Create a design template - Customei","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-10-16T04:53:10.593Z","originalFileLocation":"templates/create-a-template.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"system\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Pick a canvas size, lay out your artwork, and learn the layer numbers your option set will point at.\">\u003cmeta data-mint-head name=\"application-name\" content=\"Customei\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/nexlify/eKa7qH6YJ3w-wU8z/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/nexlify/eKa7qH6YJ3w-wU8z/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/nexlify/eKa7qH6YJ3w-wU8z/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/nexlify/eKa7qH6YJ3w-wU8z/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/nexlify/eKa7qH6YJ3w-wU8z/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/nexlify/eKa7qH6YJ3w-wU8z/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/nexlify/eKa7qH6YJ3w-wU8z/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/nexlify/eKa7qH6YJ3w-wU8z/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/nexlify/eKa7qH6YJ3w-wU8z/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Create a design template - Customei\">\u003cmeta data-mint-head property=\"og:description\" content=\"Pick a canvas size, lay out your artwork, and learn the layer numbers your option set will point at.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Customei\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.customei.com/templates/create-a-template\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://nexlify.mintlify.site/_mintlify/api/og/v2?division=Design+Templates\u0026amp;title=Create+a+design+template\u0026amp;description=Pick+a+canvas+size%2C+lay+out+your+artwork%2C+and+learn+the+layer+numbers+your+option+set+will+point+at.\u0026amp;theme=c3c0732ca71c98277b8cb558\u0026amp;signature=70a73aafe8ace0c0359a75826c459e7ff36fa26ddf22f56dc02470c81d9bd234\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Create a design template - Customei\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Pick a canvas size, lay out your artwork, and learn the layer numbers your option set will point at.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://nexlify.mintlify.site/_mintlify/api/og/v2?division=Design+Templates\u0026amp;title=Create+a+design+template\u0026amp;description=Pick+a+canvas+size%2C+lay+out+your+artwork%2C+and+learn+the+layer+numbers+your+option+set+will+point+at.\u0026amp;theme=c3c0732ca71c98277b8cb558\u0026amp;signature=70a73aafe8ace0c0359a75826c459e7ff36fa26ddf22f56dc02470c81d9bd234\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/nexlify/eKa7qH6YJ3w-wU8z/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Customei\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#171717\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.customei.com/templates/create-a-template\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/templates/create-a-template.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.customei.com/#organization\",\"name\":\"Customei\",\"url\":\"https://docs.customei.com\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/nexlify/X0bpSwJw_2jGnOd6/logo/light.svg?fit=max\u0026auto=format\u0026n=X0bpSwJw_2jGnOd6\u0026q=85\u0026s=379b9582e45d368ae1ef5af3660b3d12\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.customei.com#website\",\"name\":\"Customei\",\"url\":\"https://docs.customei.com\",\"publisher\":{\"@id\":\"https://docs.customei.com/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.customei.com/templates/create-a-template#webpage\",\"url\":\"https://docs.customei.com/templates/create-a-template\",\"name\":\"Create a design template\",\"description\":\"Pick a canvas size, lay out your artwork, and learn the layer numbers your option set will point at.\",\"dateModified\":\"2026-10-16T04:53:10.593Z\",\"isPartOf\":{\"@id\":\"https://docs.customei.com#website\"},\"breadcrumb\":{\"@id\":\"https://docs.customei.com/templates/create-a-template#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.customei.com/templates/create-a-template#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Design Templates\",\"item\":\"https://docs.customei.com/templates/overview\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create a design template\",\"item\":\"https://docs.customei.com/templates/create-a-template\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.customei.com/templates/create-a-template#article\",\"headline\":\"Create a design template\",\"name\":\"Create a design template\",\"description\":\"Pick a canvas size, lay out your artwork, and learn the layer numbers your option set will point at.\",\"url\":\"https://docs.customei.com/templates/create-a-template\",\"mainEntityOfPage\":{\"@id\":\"https://docs.customei.com/templates/create-a-template#webpage\"},\"dateModified\":\"2026-10-16T04:53:10.593Z\",\"publisher\":{\"@id\":\"https://docs.customei.com/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.customei.com#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Customei\",\"publisher\":{\"@type\":\"Organization\",\"name\":\"Customei\"},\"provider\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","agentPointerHref":"/templates/create-a-template.md","siteName":"Customei","nav":{"global":null,"tabs":[{"tab":"Documentation","groups":[{"group":"Introduction","icon":"book-open","pages":[{"title":"Welcome to Customei","icon":"house","href":""},{"title":"How Customei works","icon":"diagram-project","href":"/introduction/how-it-works"}]},{"group":"Design Templates","icon":"palette","pages":[{"title":"Design templates","description":"What a design template is, and how one design can serve many products.","icon":"palette","href":"/templates/overview"},{"title":"Create a design template","icon":"pen-ruler","href":"/templates/create-a-template"},{"title":"Bring in a Photoshop file","description":"Turn a layered .psd into a design template, with your text still editable and your pictures saved into folders you can swap from.","icon":"file-import","href":"/templates/import-psd"}]},{"group":"Template Editor","icon":"pen-ruler","pages":[{"title":"The design and preview frames","icon":"clone","href":"/editor/design-and-preview-frames"},{"title":"Add a mockup preview","icon":"image","href":"/editor/add-a-mockup"},{"title":"Preview settings","icon":"sliders","href":"/editor/mockup-settings"},{"title":"Text content and style","icon":"font","href":"/editor/text-content-and-style"},{"title":"Fonts and font libraries","icon":"a","href":"/editor/fonts-and-font-libraries"},{"title":"Text color and stroke","icon":"palette","href":"/editor/text-color-and-stroke"},{"title":"Text shadow","icon":"clone","href":"/editor/text-shadow"},{"title":"Curved and warped text","icon":"bezier-curve","href":"/editor/curved-and-warped-text"},{"title":"Pictures and photos","icon":"image","href":"/editor/images-and-photos"},{"title":"Layers and arranging","icon":"layer-group","href":"/editor/layers-and-arranging"},{"title":"Moving around the canvas","icon":"up-down-left-right","href":"/editor/canvas-and-view"},{"title":"What customers can change","icon":"lock-open","href":"/editor/customer-permissions"},{"title":"Canvas size and print output","icon":"ruler-combined","href":"/editor/design-settings"}]},{"group":"Mockups","icon":"images","pages":[{"title":"Mockups","icon":"images","href":"/mockups/overview"},{"title":"The mockup designer","icon":"pen-nib","href":"/mockups/mockup-designer"},{"title":"Warp and realism","icon":"wand-magic-sparkles","href":"/mockups/warp-and-realism"}]},{"group":"Libraries \u0026 Assets","icon":"folder-open","pages":[{"title":"Assets","icon":"folder-open","href":"/assets/overview"},{"title":"Create a library","icon":"folder-plus","href":"/assets/create-a-library"},{"title":"Upload and import","icon":"upload","href":"/assets/upload-and-import"},{"title":"Your files","icon":"file","href":"/assets/files-manager"}]},{"group":"Option Sets","icon":"sliders","pages":[{"title":"Option sets","icon":"sliders","href":"/optionsets/overview"},{"title":"Create and manage option sets","icon":"rectangle-list","href":"/optionsets/create-and-manage"},{"title":"Build your options","icon":"list-check","href":"/optionsets/build-your-options"},{"title":"Text and number options","href":"/optionsets/text-and-number-options"},{"title":"Lists and swatches","icon":"grip","href":"/optionsets/lists-and-swatches"},{"title":"Custom swatches","icon":"swatchbook","href":"/optionsets/custom-swatches"},{"title":"Let customers upload files","icon":"cloud-arrow-up","href":"/optionsets/customer-uploads"},{"title":"Popups, maps and countdowns","icon":"puzzle-piece","href":"/optionsets/extra-options"},{"title":"Manage your values","icon":"list-check","href":"/optionsets/managing-values"},{"title":"Bulk edit values","icon":"table","href":"/optionsets/bulk-add-and-edit-values"},{"title":"Charge extra for a choice","icon":"tag","href":"/optionsets/value-price-add-ons"},{"title":"Groups and layout","icon":"folder-tree","href":"/optionsets/groups-and-layout"},{"title":"Show or hide options","icon":"eye","href":"/optionsets/conditional-logic"},{"title":"Connect options to your design","icon":"link","href":"/optionsets/connect-to-a-template"},{"title":"Options that keep themselves up to date","icon":"rotate","href":"/optionsets/keep-options-up-to-date"},{"title":"Check your work in the preview","icon":"display","href":"/optionsets/preview-your-options"},{"title":"Set up each product","icon":"box-open","href":"/optionsets/product-settings"}]},{"group":"Go Live","icon":"rocket","pages":[{"title":"Assign products and go live","icon":"rocket","href":"/go-live/publish-and-assign"}]},{"group":"Translations","icon":"language","pages":[{"title":"Selling in more than one language","icon":"language","href":"/translations/overview"},{"title":"Add your languages","icon":"flag","href":"/translations/languages"},{"title":"Words that must always translate the same","icon":"book","href":"/translations/glossary"},{"title":"Translate an option set","icon":"table-columns","href":"/translations/translate-an-option-set"}]},{"group":"Preferences","icon":"gear","pages":[{"title":"Where the design shows on your product page","icon":"store","href":"/preferences/storefront-display"},{"title":"Match the options to your store's look","icon":"brush","href":"/preferences/theme-styles"},{"title":"Cancel your plan or remove the app","icon":"triangle-exclamation","href":"/preferences/leaving-customei"}]},{"group":"Integrations \u0026 AI","icon":"plug","pages":[{"title":"Connecting other services","icon":"plug","href":"/integrations/overview"},{"title":"Tell your systems about new orders","icon":"bell","href":"/integrations/order-notifications"},{"title":"Let an AI assistant help you","icon":"wand-magic-sparkles","href":"/preferences/ai-access"}]}]}]},"basePath":"","title":"Create a design template - Customei","buildId":"dpl_8hoxaqFTU7hTr6A2fUraxAyjuiZo","deploymentId":"dpl_8hoxaqFTU7hTr6A2fUraxAyjuiZo","dynamics":["07c022d89b","a74be98ba7","a9bb46feb3"],"chunks":["Frame-Dmj010Ph.js","DynamicMarkdown-GHvayGOn.js","zoom-image-lightbox-8gCTkA22.js","lightbox-handle-r17bVUz3.js","Markdown-uxhlayGT.js","clsx-B35qUV0p.js","lib-DuNMoZ05.js","lib-B8HbPgcC.js","html-void-elements-mCSPHezU.js","dist-BvrGG8gU.js","katex-YMM-FMeD.js","marked.esm-CZWythHk.js","AssistantPageLink-CAf0yVYe.js"]}