> ## Documentation Index > Fetch the complete documentation index at: https://docs.customei.com/llms.txt > Use this file to discover all available pages before exploring further. # Add a mockup preview > 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. ## Add your first one A template with no mockup shows an empty right-hand frame with the invitation right there in it. 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. Click **Add Mockup** in the empty frame, or open the **Mockups** panel from the tool rail on the left. 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. 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. 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. 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](/mockups/overview). ## A preview with no product photo 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. ## More than one preview 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. The strip of preview thumbnails below the Design Preview frame, showing one canvas print thumbnail and a plus button, highlighted. 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](/editor/mockup-settings). Getting the shirt front looking right doesn't disturb the mug. ## Editing the photo itself 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](/mockups/mockup-designer). ## Where to next What each canvas is for, and how they stay in step. Blending, surface warp, and switch animations. Set the print area on a product photo. Where your product photos live.