Advanced 2D product set up

About advanced set up

If you've already mastered setting up simple 2D products, the next step is enhancing their appearance further. By adding Extra setup layers, you can:

• Improve product previews for a more realistic experience.
• Show specific product or printing details.

In this knowledge base, you'll discover the full process of crafting an advanced 2D product template.

Before we get started

Before you start, prepare all the images necessary to set up the product. For the phone case, I will be using:

• Model Image
• Design preview mask
• Guidelines Layer
• Imprint Layer
• Top Layer

Make sure you have also prepared all other product-related information, such as the title, description, real-world scale dimensions, and print size.

Product installation

Follow the same steps as for basic 2D template product installation.

Model image update

1. First thing to do - upload your product image. To do so, click Change in the Model Image section
2. Then Select file.
3. Afterward, scroll down and Save the changes.

Product size and Print area

1. To see further customization options, click on Open Print Area Editor.
2. Enter product's real-world scale dimensions in Ruler Length.
3. Align the arrows to touch the sides of the product by clicking on them and scrolling to the appropriate positions.
4. Click Print Area.
5. Define the print size by either entering numbers or adjusting the size using the blue squares. It can be slightly larger than the object to avoid any graphic cuts.
6. To prevent accidental changes, lock the print area by selecting Click to lock print area.

Do not close the window. We will continue with the next layers.

Preview mask

Because the case features a camera hole, it's essential for users to avoid placing important graphics in that area, as they will be cut out. The Preview mask establishes the design's visibility boundaries. Anything positioned outside these boundaries will not appear in the product preview.

1. Click on the Design preview mask.
2. Select custom mask shape.
3. Upload mask by clicking Upload your SVG mask.
4. Resize the mask by entering values or adjusting its size using the orange squares.
5. To prevent unintentional adjustments, Click to lock mask.

The next step will be adding a Top layer.

Top layer

When displaying a design on the phone case, it may appear flat and unrealistic. To address this issue, you can use the Top layer. This layer includes essential shadows for a preview and won't be included in the final print export.

1. Click Add a top layer.
2. Upload your image.
3. Adjust the placement of the Top layer (its size cannot be changed; it will remain original)
4. To prevent accidental moves, lock the top layer by selecting Click to lock top layer.
5. To finish click X.
6. Save the changes.

NOTE: You can test each change by going to your Shopify product and clicking on Preview > Customize product.

Imprint layer

Some products contain non-editable elements, like the company's logo. In our app it is called the Imprint layer. When preparing those files, ensure artboard dimensions match the print area size, as edits won't be possible after upload. Upload the layer only in .pdf format.

1. To upload an imprint file click Select file in the Imprint section.
2. Save the changes.

Guidelines layer

If a product has a little more difficult shape, it's advisable to use the Guidelines. This will assist customers in designing a product without any cuts and serve as a recommendation for where to position graphics to achieve a visually appealing composition.

1. Click Open Guidelines Editor.
2. Click Graphics.
3. Add your prepared file or create guidelines using the online editor. NOTE: As you can see, the imprint layer is already visible.
4. If needed, adjust the image size by dragging the blue circles.
5. Since it aligns directly with the print area, you can use Centering tools to position it accurately.
6. Lock the image to prevent accidental user movements.
7. Decrease visibility - in this case, the customer will be able to see both the design template and guidelines layer simultaneously.
8. Save the changes.

Design templates

1. To enhance the presentation of your product, assign Design templates to showcase possible print examples. Learn how to prepare design templates here.
2. Set Default design template so that the product will already appear with a print.
3. Save the changes.

The design templates will be listed on the right:

Additional toolset

You can set an additional non-mandatory Toolset to enhance your user experience. In this instance, the product is dark gray, and it would be beneficial for the editor's window background to match. To achieve this:

1. Go to Preferences.
2. Click Add new toolset.
3. Change Tooset title.
4. Enter your color HEX code in Default background color input.
5. Check Visible in edit mode only.
6. Scroll down and Save it.
7. Go back to your Product.
8. In Toolset section choose your created toolset.
9. Save the changes.

The result: