With the Add Preview feature, you can create multiple previews for a single template.

Each preview works independently, allowing you to:

  • Change backgrounds

  • Adjust positioning and scale

  • Show or hide elements

  • Create different visual experiences from the same template

 

Important

Currently, this feature is available for Shopify stores only and applies exclusively to Templates.

 

How to set up multiple previews in the template

  1. Open the Customily App
  2. Go to the Templates tabTemplate.png
  3. Click to edit the desired templateEdit template.png
  4. Navigate to Step 2 of the template setup
  5. You will see the canvas displaying the Default Preview. You can rename this preview if needed.
  6. Click the “+” (Add Preview) button to create a new previewDefault preview.png
  7. Once added, you can choose to show or hide specific elements depending on the selected previewBack preview.png

Multiple Preview Use Cases

Add lifestyle and/or design zoom previews

Multiple previews are ideal when you want to display the same design in different visual contexts.

Step 1: Design Setup

The template includes the main design.

Step 2: Preview Setup

Create multiple previews to showcase different visual presentations:

  • Preview 1: Plain Product Mockup
    Shows the product on a clean background (standard product view).

  • Preview 2: Lifestyle Mockup
    Displays the same product applied to a lifestyle image (e.g., model wearing the t-shirt).

  • Preview 3: Design Zoom
    Focuses solely on the artwork.

test2.gif

Separate the front & back previews

For products that include multiple print files (for example, front and back designs), here’s how previews can be built:

Step 1: Design Setup

  • Step 1 can include multiple files (e.g., Front File and Back File).

Step 2: Preview Setup

  • Step 2 allows you to create multiple previews depending on how you want to display those files.

You can configure previews in different ways:

Single-file previews
Each preview shows only one file (while hiding the others).
Example:

  • Preview 1: Front design only
  • Preview 2: Back design only
test1.gif

Summary preview
A single preview showing all files together (the traditional setup we typically use).

Combination approach
You can mix both strategies.
Example:

  • Preview 1: Front only
  • Preview 2: Back only
  • Preview 3: Combined front + back summary
test3.gif

This flexibility allows you to control exactly how customers visualize multi-file products.

Important

All personalization details for every file must remain visible in the Option Set at all times.

Do not condition personalization options to appear or disappear based on the selected preview. If options are hidden depending on the preview selection, required customization details may be missing when the product is added to the cart.

 

Share

Was this article helpful?

0 out of 0 found this helpful
Have more questions? Submit a request