Put a photo of the real product behind your artwork, and add as many preview angles as you need.
A mockup is a photo of the blank product you sell: an empty mug, a folded t-shirt, a framed canvas on a wall. Add one to your template and Customei lays your artwork onto it, so you and your shopper see the finished thing instead of a flat design file.
A template with no mockup shows an empty right-hand frame with the invitation right there in it.
An empty Design Preview frame. Add Mockup opens your mockup photos.
1
Open your mockups
Click Add Mockup in the empty frame, or open the Mockups panel from the tool rail on the left.
The Mockups panel. Your mockup photos, grouped by the library they came from.
2
Find the photo you want
Photos are grouped by the library they live in, and by category within it. Drag a row sideways or use the arrows to see more, and click Show All to open a whole group as a grid.If you have a lot of them, type in the Search box instead. Searching needs at least two characters.
3
Click it
One click adds the photo as a new preview frame and switches to it. Give it a few seconds the first time: the photo has to download before your artwork can be laid onto it.Clicking a photo you’ve already added doesn’t add it twice, it just switches to that preview.
4
Save
Preview frames are part of the template, so click Save in the top right to keep them.
Nothing in the panel? Your mockup photos come from your Assets, and you need at least one mockup library there. See Mockups.
The Blank mockup card at the top of the panel adds a preview frame with nothing behind your artwork.That sounds pointless until you have a design that is the whole product: a full-bleed poster, or a design where the customer’s photo covers everything. A blank preview gives you a frame to arrange and export from without a product photo getting in the way.
Most products deserve more than one angle: the front and the back of a shirt, the mug from both sides, the canvas on a wall and flat on. Add as many preview frames as you like.
One thumbnail per preview frame. + adds another.
The strip below the Design Preview frame is how you move between them:
Click a thumbnail to show that preview.
Drag thumbnails to reorder them. The order carries through to your product page, so put your best angle first.
Hover a thumbnail to reveal its remove button.
+ opens the Mockups panel to add another.
Each preview keeps its own arrangement and its own rendering settings. Getting the shirt front looking right doesn’t disturb the mug.
Your artwork sits on the photo according to instructions stored on the mockup: where the print area is, how the surface curves, which parts of the artwork to hide behind the product. None of that is edited here.To change it, open the ⋯ menu on a mockup card in the panel and choose Edit mockup. That opens the photo in the mockup designer, in your Assets. See The mockup designer.
What each canvas is for, and how they stay in step.
Preview settings
Blending, surface warp, and switch animations.
The mockup designer
Set the print area on a product photo.
Mockups
Where your product photos live.
{"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":"editor/add-a-mockup","slug":"/editor/add-a-mockup","pageMetadata":{"title":"Add a mockup preview","description":"Put a photo of the real product behind your artwork, and add as many preview angles as you need.","icon":"image","href":"/editor/add-a-mockup"},"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: \"Put a photo of the real product behind your artwork, and add as many preview angles as you need.\"\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`,em:`em`,li:`li`,p:`p`,strong:`strong`,ul:`ul`,..._provideComponents(),...props.components},{Card,CardGroup,Frame,Heading,Note,OptimizedImage,Step,Steps,Tip}=_components;if(!Card)_missingMdxReference(`Card`,true);if(!CardGroup)_missingMdxReference(`CardGroup`,true);if(!Frame)_missingMdxReference(`Frame`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!Note)_missingMdxReference(`Note`,true);if(!OptimizedImage)_missingMdxReference(`OptimizedImage`,true);if(!Step)_missingMdxReference(`Step`,true);if(!Steps)_missingMdxReference(`Steps`,true);if(!Tip)_missingMdxReference(`Tip`,true);return _jsxs(_Fragment,{children:[_jsxs(_components.p,{children:[`A `,_jsx(_components.strong,{children:`mockup`}),` is a photo of the blank product you sell: an empty mug, a folded t-shirt, a framed canvas on a wall. Add one to your template and Customei lays your artwork onto it, so you and your shopper see the finished thing instead of a flat design file.`]}),`\n`,_jsx(Heading,{level:`2`,id:`add-your-first-one`,children:`Add your first one`}),`\n`,_jsx(_components.p,{children:`A template with no mockup shows an empty right-hand frame with the invitation right there in it.`}),`\n`,_jsx(Frame,{caption:`An empty Design Preview frame. Add Mockup opens your mockup photos.`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/nexlify/EBsiKGUn8Q3bIChV/images/editor/preview-empty-state.png?fit=max\u0026auto=format\u0026n=EBsiKGUn8Q3bIChV\u0026q=85\u0026s=567ac604135b8b6bc7fed10bb2459b27`,alt:`The empty Design Preview frame showing an image icon, the text Add a mockup to preview your design on products, an Add Mockup button, and a Use a blank mockup link.`,\"data-og-width\":`1120`,width:`1120`,\"data-og-height\":`880`,height:`880`,\"data-path\":`images/editor/preview-empty-state.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/nexlify/EBsiKGUn8Q3bIChV/images/editor/preview-empty-state.png?w=280\u0026fit=max\u0026auto=format\u0026n=EBsiKGUn8Q3bIChV\u0026q=85\u0026s=3e9d845b4cb0b3931527326ba15bc53f 280w, https://mintcdn.com/nexlify/EBsiKGUn8Q3bIChV/images/editor/preview-empty-state.png?w=560\u0026fit=max\u0026auto=format\u0026n=EBsiKGUn8Q3bIChV\u0026q=85\u0026s=d611085b8f6cff26f464e21139c8a68b 560w, https://mintcdn.com/nexlify/EBsiKGUn8Q3bIChV/images/editor/preview-empty-state.png?w=840\u0026fit=max\u0026auto=format\u0026n=EBsiKGUn8Q3bIChV\u0026q=85\u0026s=c4417ec05e4bcab5d71aec01be3f0c96 840w, https://mintcdn.com/nexlify/EBsiKGUn8Q3bIChV/images/editor/preview-empty-state.png?w=1100\u0026fit=max\u0026auto=format\u0026n=EBsiKGUn8Q3bIChV\u0026q=85\u0026s=23ed61e84aa90d5ec8b49395911d3c25 1100w, https://mintcdn.com/nexlify/EBsiKGUn8Q3bIChV/images/editor/preview-empty-state.png?w=1650\u0026fit=max\u0026auto=format\u0026n=EBsiKGUn8Q3bIChV\u0026q=85\u0026s=b172e1e907e50f4284b77cb781086c81 1650w, https://mintcdn.com/nexlify/EBsiKGUn8Q3bIChV/images/editor/preview-empty-state.png?w=2500\u0026fit=max\u0026auto=format\u0026n=EBsiKGUn8Q3bIChV\u0026q=85\u0026s=e607407b339012945ea1a30042e88e54 2500w`})}),`\n`,_jsxs(Steps,{children:[_jsxs(Step,{title:`Open your mockups`,children:[_jsxs(_components.p,{children:[`Click `,_jsx(_components.strong,{children:`Add Mockup`}),` in the empty frame, or open the `,_jsx(_components.strong,{children:`Mockups`}),` panel from the tool rail on the left.`]}),_jsx(Frame,{caption:`The Mockups panel. Your mockup photos, grouped by the library they came from.`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/editor/mockups-panel.png?fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=7192348e5d30baee7b76bc0ab9bde7fa`,alt:`The Mockups panel open in the editor, showing a search box, a Blank mockup card described as no product photo behind the design, and rows of product photos grouped under mockup 1, Mockup 464303 and Image Selection 8 Mockup, each with a Show All link.`,\"data-og-width\":`3840`,width:`3840`,\"data-og-height\":`2400`,height:`2400`,\"data-path\":`images/editor/mockups-panel.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/editor/mockups-panel.png?w=280\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=2e6d001ef76a2a33a43ae1031fdb5dbf 280w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/editor/mockups-panel.png?w=560\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=deaa902ffb338eb2e671562bda22e7dc 560w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/editor/mockups-panel.png?w=840\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=a0083053e259cc08e7f6f576077e47ba 840w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/editor/mockups-panel.png?w=1100\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=95084f97d431aba4e3737aa7052db187 1100w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/editor/mockups-panel.png?w=1650\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=d99ebf93dd64619b1af8cf537bb39f3f 1650w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/editor/mockups-panel.png?w=2500\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=0105480361a7272ea42d895f4e6af8e4 2500w`})})]}),_jsxs(Step,{title:`Find the photo you want`,children:[_jsxs(_components.p,{children:[`Photos are grouped by the library they live in, and by category within it. Drag a row sideways or use the arrows to see more, and click `,_jsx(_components.strong,{children:`Show All`}),` to open a whole group as a grid.`]}),_jsxs(_components.p,{children:[`If you have a lot of them, type in the `,_jsx(_components.strong,{children:`Search`}),` box instead. Searching needs at least two characters.`]})]}),_jsxs(Step,{title:`Click it`,children:[_jsx(_components.p,{children:`One click adds the photo as a new preview frame and switches to it. Give it a few seconds the first time: the photo has to download before your artwork can be laid onto it.`}),_jsx(_components.p,{children:`Clicking a photo you’ve already added doesn’t add it twice, it just switches to that preview.`})]}),_jsx(Step,{title:`Save`,children:_jsxs(_components.p,{children:[`Preview frames are part of the template, so click `,_jsx(_components.strong,{children:`Save`}),` in the top right to keep them.`]})})]}),`\n`,_jsx(Note,{children:_jsxs(_components.p,{children:[`Nothing in the panel? Your mockup photos come from your `,_jsx(_components.strong,{children:`Assets`}),`, and you need at least one mockup library there. See `,_jsx(_components.a,{href:`/mockups/overview`,children:`Mockups`}),`.`]})}),`\n`,_jsx(Heading,{level:`2`,id:`a-preview-with-no-product-photo`,children:`A preview with no product photo`}),`\n`,_jsxs(_components.p,{children:[`The `,_jsx(_components.strong,{children:`Blank mockup`}),` card at the top of the panel adds a preview frame with nothing behind your artwork.`]}),`\n`,_jsxs(_components.p,{children:[`That sounds pointless until you have a design that `,_jsx(_components.em,{children:`is`}),` the whole product: a full-bleed poster, or a design where the customer’s photo covers everything. A blank preview gives you a frame to arrange and export from without a product photo getting in the way.`]}),`\n`,_jsx(Heading,{level:`2`,id:`more-than-one-preview`,children:`More than one preview`}),`\n`,_jsx(_components.p,{children:`Most products deserve more than one angle: the front and the back of a shirt, the mug from both sides, the canvas on a wall and flat on. Add as many preview frames as you like.`}),`\n`,_jsx(Frame,{caption:`One thumbnail per preview frame. + adds another.`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/editor/preview-frames-bar.png?fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=6e782b6accb1c665ebe9ddc822cd81e4`,alt:`The strip of preview thumbnails below the Design Preview frame, showing one canvas print thumbnail and a plus button, highlighted.`,\"data-og-width\":`460`,width:`460`,\"data-og-height\":`240`,height:`240`,\"data-path\":`images/editor/preview-frames-bar.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/editor/preview-frames-bar.png?w=280\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=3d67017a8494997915b0008ff2245625 280w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/editor/preview-frames-bar.png?w=560\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=c3b6ce2752daae4e59cc1888e24913ea 560w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/editor/preview-frames-bar.png?w=840\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=8efaec0fa8deea91aadc4c8cf9b94913 840w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/editor/preview-frames-bar.png?w=1100\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=a8b1441cbacba6d231a741db531c5c21 1100w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/editor/preview-frames-bar.png?w=1650\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=6a72a585d4176b92439641f3b09d4247 1650w, https://mintcdn.com/nexlify/0N0REbKbYlg6O2HE/images/editor/preview-frames-bar.png?w=2500\u0026fit=max\u0026auto=format\u0026n=0N0REbKbYlg6O2HE\u0026q=85\u0026s=f7652f2887d6637e2c1b2f31a3ff2113 2500w`})}),`\n`,_jsx(_components.p,{children:`The strip below the Design Preview frame is how you move between them:`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Click`}),` a thumbnail to show that preview.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Drag`}),` thumbnails to reorder them. The order carries through to your product page, so put your best angle first.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Hover`}),` a thumbnail to reveal its remove button.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`+`}),` opens the Mockups panel to add another.`]}),`\n`]}),`\n`,_jsx(Tip,{children:_jsxs(_components.p,{children:[`Each preview keeps its own arrangement and its own `,_jsx(_components.a,{href:`/editor/mockup-settings`,children:`rendering settings`}),`. Getting the shirt front looking right doesn’t disturb the mug.`]})}),`\n`,_jsx(Heading,{level:`2`,id:`editing-the-photo-itself`,children:`Editing the photo itself`}),`\n`,_jsx(_components.p,{children:`Your artwork sits on the photo according to instructions stored on the mockup: where the print area is, how the surface curves, which parts of the artwork to hide behind the product. None of that is edited here.`}),`\n`,_jsxs(_components.p,{children:[`To change it, open the `,_jsx(_components.strong,{children:`⋯`}),` menu on a mockup card in the panel and choose `,_jsx(_components.strong,{children:`Edit mockup`}),`. That opens the photo in the mockup designer, in your Assets. See `,_jsx(_components.a,{href:`/mockups/mockup-designer`,children:`The mockup designer`}),`.`]}),`\n`,_jsx(Heading,{level:`2`,id:`where-to-next`,children:`Where to next`}),`\n`,_jsxs(CardGroup,{cols:2,children:[_jsx(Card,{title:`The design and preview frames`,icon:`clone`,href:`/editor/design-and-preview-frames`,children:_jsx(_components.p,{children:`What each canvas is for, and how they stay in step.`})}),_jsx(Card,{title:`Preview settings`,icon:`sliders`,href:`/editor/mockup-settings`,children:_jsx(_components.p,{children:`Blending, surface warp, and switch animations.`})}),_jsx(Card,{title:`The mockup designer`,icon:`pen-nib`,href:`/mockups/mockup-designer`,children:_jsx(_components.p,{children:`Set the print area on a product photo.`})}),_jsx(Card,{title:`Mockups`,icon:`images`,href:`/mockups/overview`,children:_jsx(_components.p,{children:`Where your product photos live.`})})]})]})}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":"Add a mockup preview","description":"Put a photo of the real product behind your artwork, and add as many preview angles as you need.","icon":"image","href":"/editor/add-a-mockup"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Add your first one","slug":"add-your-first-one","depth":2,"children":[]},{"title":"A preview with no product photo","slug":"a-preview-with-no-product-photo","depth":2,"children":[]},{"title":"More than one preview","slug":"more-than-one-preview","depth":2,"children":[]},{"title":"Editing the photo itself","slug":"editing-the-photo-itself","depth":2,"children":[]},{"title":"Where to next","slug":"where-to-next","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"subdomain":"nexlify","siteName":"Customei","title":"Add a mockup preview - Customei","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-08-05T11:06:22.478Z","originalFileLocation":"editor/add-a-mockup.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=\"Put a photo of the real product behind your artwork, and add as many preview angles as you need.\">\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=\"Add a mockup preview - Customei\">\u003cmeta data-mint-head property=\"og:description\" content=\"Put a photo of the real product behind your artwork, and add as many preview angles as you need.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Customei\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.customei.com/editor/add-a-mockup\">\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=Template+Editor\u0026amp;title=Add+a+mockup+preview\u0026amp;description=Put+a+photo+of+the+real+product+behind+your+artwork%2C+and+add+as+many+preview+angles+as+you+need.\u0026amp;theme=c3c0732ca71c98277b8cb558\u0026amp;signature=0f7772a8869eca4acfecc85ceb7a1d661fe5f8889d4a0616fff3af02b791d1ac\">\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=\"Add a mockup preview - Customei\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Put a photo of the real product behind your artwork, and add as many preview angles as you need.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://nexlify.mintlify.site/_mintlify/api/og/v2?division=Template+Editor\u0026amp;title=Add+a+mockup+preview\u0026amp;description=Put+a+photo+of+the+real+product+behind+your+artwork%2C+and+add+as+many+preview+angles+as+you+need.\u0026amp;theme=c3c0732ca71c98277b8cb558\u0026amp;signature=0f7772a8869eca4acfecc85ceb7a1d661fe5f8889d4a0616fff3af02b791d1ac\">\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/editor/add-a-mockup\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/editor/add-a-mockup.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/editor/add-a-mockup#webpage\",\"url\":\"https://docs.customei.com/editor/add-a-mockup\",\"name\":\"Add a mockup preview\",\"description\":\"Put a photo of the real product behind your artwork, and add as many preview angles as you need.\",\"dateModified\":\"2026-08-05T11:06:22.478Z\",\"isPartOf\":{\"@id\":\"https://docs.customei.com#website\"},\"breadcrumb\":{\"@id\":\"https://docs.customei.com/editor/add-a-mockup#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.customei.com/editor/add-a-mockup#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Template Editor\",\"item\":\"https://docs.customei.com/editor/design-and-preview-frames\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Add a mockup preview\",\"item\":\"https://docs.customei.com/editor/add-a-mockup\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.customei.com/editor/add-a-mockup#article\",\"headline\":\"Add a mockup preview\",\"name\":\"Add a mockup preview\",\"description\":\"Put a photo of the real product behind your artwork, and add as many preview angles as you need.\",\"url\":\"https://docs.customei.com/editor/add-a-mockup\",\"mainEntityOfPage\":{\"@id\":\"https://docs.customei.com/editor/add-a-mockup#webpage\"},\"dateModified\":\"2026-08-05T11:06:22.478Z\",\"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":"/editor/add-a-mockup.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","icon":"palette","href":"/templates/overview"},{"title":"Create a design template","icon":"pen-ruler","href":"/templates/create-a-template"},{"title":"Bring in a Photoshop file","icon":"file-import","href":"/templates/import-psd"}]},{"group":"Template Editor","icon":"pen-ruler","pages":[{"title":"The design and preview frames","description":"Why the editor shows two canvases side by side, which one gets printed, and how the preview keeps up with your design.","icon":"clone","href":"/editor/design-and-preview-frames"},{"title":"Add a mockup preview","icon":"image","href":"/editor/add-a-mockup"},{"title":"Preview settings","description":"Make your artwork sit convincingly on the product, and choose how previews switch on the product page.","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":"Add a mockup preview - Customei","buildId":"dpl_8hoxaqFTU7hTr6A2fUraxAyjuiZo","deploymentId":"dpl_8hoxaqFTU7hTr6A2fUraxAyjuiZo","dynamics":["07c022d89b","a74be98ba7"],"chunks":["Frame-Dmj010Ph.js","DynamicMarkdown-GHvayGOn.js","zoom-image-lightbox-8gCTkA22.js","lightbox-handle-r17bVUz3.js"]}
