Welcome to the online platform's product customization feature!
This page allows you to easily design personalized products without any professional design skills. Simply select your preferred images, add them to the workspace by double-clicking or dragging and dropping, adjust their position and size, and make sure the images fully cover the red print area.
The preview area on the right will show you real-time product mockups in different scenarios—what you see is what you get.
Once you're satisfied with the design, save it to your shopping cart with one click, and you can then proceed to checkout and payment.
The entire customization process is completed right in your browser—no third-party software installation required.
The platform automatically handles all technical printing parameters, allowing you to focus on your creative design—hassle-free and efficient.
1. Page Overview
The customization settings page is divided into three main areas:
| Area | Description |
|---|---|
| Image Selection Area (Left) | Provides three image sources—"Model-Generated Images," "User-Uploaded Images," and "Favorites"—for you to choose the image you want to print. |
| Workspace (Center) | Displays the current customization canvas. The red outline indicates the print area. Here you can scale, rotate, and move your image to ensure it fully covers the red outline. |
| Preview Area (Right) | Shows real-time product mockups in different scenarios. Click on a thumbnail to view a larger version, then save to cart once satisfied. |
A product variant switcher is located at the top of the page, allowing you to switch between different variants (e.g., sizes, colors, materials) and make independent customization settings for each variant.
2. Selecting a Product Variant
At the top of the customization page, you can see the name of the currently selected product variant.
Click the variant dropdown menu or toggle buttons to browse all available variants for that product (e.g., size, color, material options).
When you switch variants, the workspace and preview area will update simultaneously to reflect the new variant's canvas and scene mockups. You'll need to adjust the image placement for the current variant.
Customization settings are saved independently for each variant—switching between them will not cause you to lose settings from previously edited variants.
3. Image Selection Area
The image selection area provides three image sources for you to choose from:
| Image Source | Description |
|---|---|
| Model-Generated Images | Recommended images generated by our AI or template library, ideal for quick selection. |
| User-Uploaded Images | Click the "Upload" button to select images from your local device (supports JPG, PNG, WebP, and other common formats). Uploaded images will appear in this list. |
| Favorites | Images you have previously favorited or saved, making them easy to reuse. |
Two ways to add an image to the workspace:
-
Double-click: Simply double-click on an image, and it will be automatically added to the center of the workspace.
-
Drag and drop: Click and hold an image, drag it to the central workspace, and release to add it.
💡 Tip: You can add multiple images to the workspace. Layer ordering adjustments (front/back) will be supported in future updates.
4. Workspace Operations
The workspace is your main design canvas where all adjustments to image position, size, and rotation are made.
-
Red Outline: Represents the actual print/cropping boundary. Ensure your image content fully covers this area; otherwise, the final printed product may have white borders or missing content.
-
Scaling: Select an image, then drag the control handles at its corners or edges to enlarge or reduce it.
-
Rotation: Select an image, then use the rotation handle (usually a circular handle above the image) or enter a rotation angle to freely rotate it.
-
Moving: Simply click and drag the image to reposition it anywhere on the canvas.
Pro Tip: You can add and adjust multiple images as many times as you like—all changes take effect in real time.
5. Preview Area & Saving
The preview area is located on the right side of the page to help you visualize the final design.
-
Real-Time Preview: Any adjustments made in the workspace (scaling, rotation, repositioning) are instantly reflected in the preview area, showing how the design looks in different scenarios (e.g., on walls, phone cases, T-shirts, etc.).
-
View Enlarged Image: Click on a thumbnail in the preview area to pop up a larger image window for a closer look at the details.
-
Save to Shopping Cart: When you're satisfied with the preview, click the "Save to Shopping Cart" button. The system will automatically save the current variant's customization settings (including image, position, scaling, rotation, and other parameters) and add the product to your cart. You can then confirm your order and complete payment in the cart.
Each variant's customization settings are saved independently. When you add to cart, the current variant's settings are included with the order item.
6. Key Advantages
We are committed to making the customization process simple, intuitive, and efficient. Compared to traditional design tools, this page offers three major advantages:
| Advantage | Description |
|---|---|
| Extremely Simple, Zero Learning Curve | Simply drag and drop images into the workspace and adjust them to cover the print area. All complex printing parameters (resolution, color mode, bleed lines, etc.) are handled automatically by the platform—no technical knowledge required from you. |
| What You See Is What You Get | The right-side preview area shows the final product in different scenarios in real time. You'll see the finished look as you make adjustments, avoiding the frustration of mismatched "design vs. actual product." |
| Online Design, No Installation Needed | Everything runs in your browser—no need to download or install any third-party design software. Just connect to the internet and start creating, anytime and anywhere. |
7. Frequently Asked Questions
Q1: Does the image have to fully cover the red outlined area?
A: Yes. The red outline represents the actual print and crop boundary. If the image does not fully cover it, the final product may have white edges or cropped content. You can scale or move the image to cover the entire red area.
Q2: Will I lose customization settings for other variants when I switch to a new one?
A: No. The system saves customization settings for each variant independently. You can switch between them without losing previously made edits.
Q5: Can I still modify my customization settings after saving to cart?
A: Yes. You can remove the customized item from your cart and re-enter the customization page to make changes, or click the "Customize" button directly in the cart to return to this page and continue editing.
Q6: How many images can I add to the workspace?
A: The platform generally does not impose a limit, but we recommend no more than 5 overlapping images to maintain printing quality and a clean design.