Cookies are used on this site to provide the best user experience. If you continue, we assume that you agree to receive cookies from this site. OK

Product designer software: personalize a mug

A personalized mug can be a perfect gift for many occasions. If you've built an online store with the Product designer software, you can easily offer your customers to create their own mug design and order a personalized product through a shopping cart.

This article is specially written for the Alt-team Flash Product designer users or users-to-be. It gives an instruction how to create a mug for personalization, design it in the customer area and includes some tips to print up the design.


How to create a mug for personalization


1. Log into your CS-Cart administration panel and go to Administration → Add-ons. Install the Product designer add-on.

2. Fill out the necessary fields in the Product designer general options.

Note: In the Product designer general options you set the default values. You can edit each of these values except "Flash objects width" and "Check for updates" in the Product designer settings for a certain product. "Flash objects width" is supposed to be the same for all products. It shows the width of the Product designer area in the storefront.

3. Product designer doesn't have a predefined collection of fonts, colors or cliparts. So, prepare Product designer for work:


While creating a color palette for a mug, remember about your printer possibilities. Your printer will probably be unable to print some colors carefully.

4. Create a product for personalization.

In the CS-Cart administration panel, go to Products → Products. Click the Add product button.

5. Fill out all necessary fields. Enter a product name, price, description, choose the category for this product (create a category first if you don't have any). Upload the main image for your product – the real image of a mug (with “your design here” sign or without it).

Important! Scroll down the page for the Extra section and set a value for the Product details layout field - "Product designer template". 

6. Press the Create button.

7. Click the Images tab and upload additional images of your mug. Customer will be able to add the design to these images.

For a mug it can be such images as the left side of a mug, the right side of a mug, the center of a mug and the mug full wrap (the whole printable surface of the mug will be covered).

Additional images


  • You can make the images of a mug in such photo editors as Adobe Photoshop or Gimp.
  • Or you can take pictures of a real mug (left and right), edit them in a photo editor and use them. For the full wrap design you can make a picture with a rectangular frame.

8. Once additional images are uploaded, press the Save button and on the editing product page go to the Product designer tab.

9. Check the Enable for this product checkbox.

10. You will see a page with the Product designer settings and tools. Read this article to find the detailed information about all Product designer settings and tools.

11. You need to set the necessary settings.

  • Choose the T-shirt mode.
  • Calculate the Ratio.
  • As we offer a full wrap design for a mug, the etalon product width should be the full wrap width of a mug. 

  • The best layout orientation for a mug with the full wrap design is Horizontal.
  • Set up the comfortable product side width and height.
  • Enable all necessary product designer tools.
  • See our mug settings below:

    Mug settings

12. Click the Add product side button every time you want to add a product side. Enter a product side name if necessary.

Add a product side

13. Click the Add canvas button to add a canvas to a product side.

After clicking the Add canvas button, click the Add basic canvas and you will see a canvas frame. It's possible to manipulate with the canvas with the help of this frame (move, lock, scale and edit canvas).

Add a canvas

Don't forget to add a canvas on every product side (click small preview images to choose a product side).

14. Use Product designer tools panel to choose the necessary font category and a color palette for fonts which will be available for your customers.

Choose a font categoty and color palette

15. Don't forget to press the Save button once any changes are done.

16. Click the Preview button in the top right corner of the Product designer tab page to preview a product in the customer area.

17. That's it, you've created a product for personalization.


Product designer storefront for customers


Once an administrator created a product for personalization and set up an active status for it, a product appears in the customer area in the assigned category.

By clicking on the product with enabled Product designer, customers will get to the page where they can create their own design.

Customers will be able to

  • use all product designer settings and tools (flip, arc, rotation, etc.) enabled by the administrator;
  • add/edit their own text;
  • add/edit cliparts;
  • upload their own images, resize them and use a corner radius tool for them if permitted by an administrator.

Here are the example designs any customer can create:

Front side of a mug

Mug front

Back side of a mug

Mug back

Full wrap custom design

Full wrap design

Please, note! Encourage your customers to use only high-quality photos with good resolution. If a customer uploads a photo with low resolution, it will be impossible to get a quality print. (Or you will have to edit the photo yourself in a photo editor). 


How to get a printable image


1. After a customer orders a mug with his own design, an order appears in the administration panel Orders-> View ordersClick View next to the order to be redirected to the order details page. On the order details page in the  General tab you can see a customer's billing and shipping address, billing and shipping information. Also, you can see the description of all design elements of the ordered product. 

2. Click the Product designer tab on the order details page and you will see the description of all design elements, the image/images of the ordered product and buttons: settings, Generate print image and Generate . pdf image.

3. Click the settings button and don't tick the Include product side image checkbox.

4. Press Generate print image to get .png image or Generate PDF to get .pdf image. Save the image to your computer.


How to print designs on mugs


The most popular process for mug design printing is dye sublimation.

For at-home printing you need to have a computer, special printer which can use sublimation inks, sublimation inks, transfer paper, scissors to cut your transfer, polyester coated mugs, heat tape, heat press for mugs.

There are informative YouTube videos in the Internet which show step by step mug sublimation process.


Buy blank mugs with a polyester coating on them (it's a necessary condition for printing within a sublimation process). White mugs are the best choice for a quality print. The whiter the mug, the better color reproduction you will get. You can also find white polyester-coated mugs with a colorful cant which makes them more attractive.




You can use a similar instruction excluding the last part (How to pint designs) to create customizable t-shirts, caps, bags, mouse pads, etc. If you have a product for personalization of different colors, you can create a color option for your product.




No posts found

New post