​
Introducing Product Personalizer

Welcome to the Product Personalizer! Product Personalizer is a powerful and versatile tool designed to help merchants offer a personalized customization experience for their customers. By integrating this module into your store, customers can create unique products by customizing them online according to their preferences. They can add text, images, choose colors, styles, and more to craft one-of-a-kind items. Whether your customers are browsing on a PC or mobile device, Product Personalizer ensures a seamless and consistent user experience. It includes a variety of configurable options that adapt to different product types and industry applications. With Product Personalizer, you can:
  • Enhance user engagement and boost conversion rates.
  • Expand the scope for personalized product designs.
  • Increase customer satisfaction and brand loyalty.
This guide will walk you through how to use Product Personalizer and get the most out of its features.
In this tutorial, Product Personalizer will be referred to as Personalizer.

​
Use on Desktop Devices

At the top right of the Personalizer, you can view and switch between all available product options, such as color, size, and more.
On the right side of the Personalizer, you can view and switch between the Print-Areas currently being customized. A product may include one or several Print-Areas, such as the front and back of a polo shirt. To learn more about Print-Areas, please visit Products tutorial.
On the left side of the Personalizer, you’ll find the tools for adding design elements to the canvas. There are several ways to add design elements. First is the Pictures section, which offers a collection of images provided by the merchant. To learn more about the Pictures feature, please visit Picture Collections tutorial.
  1. Select Pictures as your method for adding design element.
  2. In the Pictures panel that appears to the right of the button, choose your preferred image and add it to the canvas to begin designing.
The second way to add design elements is by using the Visuals section, where you can place a variety of fun vector graphics (such as stickers, emojis, and more) onto your design canvas. Visuals are design assets provided by the MockSpark platform. These assets are typically vector images, which means they can be scaled without losing quality. This makes them ideal for different printing needs and helps prevent issues like blurry or low-quality prints.
Because of how Visuals work, each Print-Area can contain up to three Visuals at a time.
  1. Select Visuals as your method for adding design element.
  2. In the Visuals panel that appears to the right of the button, browse and select your preferred visual to add it to the canvas.
In addition to the two methods mentioned earlier, you can also add text to your design canvas through the Text feature. We offer a variety of fonts for you to choose from.
  1. Select Text as your method for adding design element.
  2. In the Text panel that appears to the right of the button, choose your preferred font and add it to the canvas to begin designing.
If the previous methods for adding design elements don’t suit your needs, you can use the Uploads feature to add your own images to the design canvas. This could be photos you’ve taken yourself or images generated by other AI tools.
We support images in JPG, PNG, and WebP formats.
  1. Select Uploads as your method for adding design element.
  2. In the Uploads panel that appears to the right of the button, you can upload images by taking or selecting them from your current device. You can also upload images by scanning a QR code with your phone.
At the center of the Personalizer is our design area, also known as the canvas. When you select a text design element on the canvas, a control bar for that text automatically appears above it. This control bar allows you to customize various properties of the text, such as color, font, and size.
Double-clicking the text on the canvas lets you edit its content.
When you select an image design element on the canvas (excluding Visuals), a control bar automatically appears above it. This bar allows you to crop, flip, rotate, and perform other edits on the image.
Below the canvas, you’ll see an estimate of the image’s print quality. If you receive a Low resolution warning during the design process, it means you need to adjust your design to ensure better print quality.
When you select a visual design element on the canvas, such as a sticker or emoji, a control bar automatically appears above it. This bar allows you to flip, rotate, and make other adjustments to the visual.
Visual design elements do not show print quality warnings like image elements might.
When you right-click on a design element, you can duplicate or delete it. You also have the option to adjust its layer order within the current design or align it on the canvas.
In addition to manipulating individual design elements on the canvas, you can use the canvas control bar below the Personalizer to manage the entire canvas of the current Print-Area.
  1. Select Layer from the canvas control bar at the bottom of the Personalizer.
  2. In the Layer panel that appears, you can view, remove, and manually rearrange the order of the design elements by dragging them.
Steps to change the background color of the current canvas:
  1. Select Background from the canvas control bar at the bottom of the Personalizer.
  2. In the Background panel that appears, choose the color you want to apply.
If you want to Undo or Redo your actions, the canvas control bar at the bottom of the Personalizer offers these functions.
At the bottom left of the Personalizer is the preview window that displays the current design effect. When you move your mouse over this window, buttons for switching between preview images will appear.
The design preview images in the Personalizer are essentially product mockups created by the merchant. If the merchant has made only one mockup for this particular product specification, there will be just one preview image available here.
Once you’ve finished your design, click the Add to cart button at the top right corner of the Personalizer. A dialog box will appear, allowing you to enter the quantity of the customized product you wish to purchase. Additionally, if there are any issues such as undesigned Print-Areas or images with poor print quality, the dialog box will alert you. It’s recommended that you make adjustments to your design based on these alerts to ensure better print results.

​
Use on Mobile Devices

Personalizer is available for use on both desktop and mobile devices. When you access Personalizer on a mobile device, you’ll find a button in the center of the interface. Tap this button to add design elements to your canvas.
In the interface, tap Add Sticker to add visual design elements to your canvas.
Select a sticker that you like, then tap it to add it to your canvas.
Once you’ve added the sticker to your canvas, you’ll see it highlighted as the selected item. Additionally, a control panel will appear at the bottom of the canvas, allowing you to perform various actions on the sticker.
Tap the button in the center of the interface, then select Add Image to either add picture design elements to your canvas or upload your own image.
Add images provided by the vendor, known as Pictures. To learn more about the Pictures feature, please visit Picture Collections tutorial. Tap Pictures in the interface.
  1. Choose a picture collection that you prefer.
  2. Select a picture you like, then tap it to add it to your canvas.
Once you’ve added the picture to your canvas, you’ll see it highlighted as the selected item. Additionally, a control panel will appear at the bottom of the canvas, allowing you to perform various actions on the picture.
Above the canvas, you’ll see an estimate of the image’s print quality. If you receive a Low resolution warning during the design process, it means you need to adjust your design to ensure better print quality.
In addition to using vendor-provided Pictures, you can also Upload images from the photo gallery on your mobile device.
We support images in JPG, PNG, and WebP formats.
Tap Uploads in the interface.
Once you upload an image to your canvas, you’ll see it highlighted as the selected item. Additionally, a control panel will appear at the bottom of the canvas, allowing you to perform various actions on the image.
Above the canvas, you’ll see an estimate of the image’s print quality. If you receive a Low resolution warning during the design process, it means you need to adjust your design to ensure better print quality.
Tap the button in the center of the interface, then select Add Text to include text on your canvas.
  1. Enter the text you want to display in the multiline text box.
  2. Tap DONE to add the text to your canvas.
Please refrain from using emoji in your text, as this may lead to printing inconsistencies in actual production.
Once you’ve added the text to your canvas, you’ll see it highlighted as the selected item. Additionally, a control panel will appear at the bottom of the canvas, allowing you to perform various actions on the text.
At the bottom of Personalizer, you can view and switch between the Print-Areas currently being customized. A product may include one or several Print-Areas, such as the front and back of a polo shirt. To learn more about Print-Areas, please visit Products tutorial.
  1. After finishing the design for the current Print-Area, you can switch to other Print-Area of the product to continue designing.
  2. Once your design is complete, tap the Preview button located on the right side of the top bar in Personalizer to preview the final look of your design.
In the Preview interface, you can not only see your design but also view and switch between all available product options, such as color and size. Once everything is confirmed and looks good, tap the Add to Cart button at the bottom of the Preview interface to proceed.
After tapping the Add to Cart button, a dialog box will appear where you can enter the quantity of the customized product you wish to purchase. Additionally, if there are any issues such as undesigned Print-Areas or images with poor print quality, the dialog box will alert you. It’s recommended that you make adjustments to your design based on these alerts to ensure better print results.