Articles on: 🎨Custom Product Designer Studio

Add Product Color Variants for Personalization

Learn How to Add Color Variants for Personalization. You can add color variants to your personalized products, allowing customers to choose a color and personalize it by adding text or uploading images. This makes it easy for them to customize the product exactly how they want!


Steps:


  1. Product Configuration: Click on Configure Personalization Products ➜ Click On the Add Product Button.


  1. Selection of Product: Select the product ➜ Click on the Add button.



  1. Personalization Option:- Select Personalization type➜ Click on the Customize Button


  1. Edit Side: You can edit the product side details, such as name and canvas image type. Click on the Side 1 ➜ Click on the three dots (⋮) ➜ Click on Edit Side.



Note: This feature will only work if the product variant option is named "color" or "colour" in the admin panel.





  • Canvas Image type: Choose the variant images from the list to display the matching color variants of the selected image on the frontend.
  • Choose the Image. .automatically: Select images that match each color for this side. The product image will update automatically based on the color the customer selects during personalization. Select the Colour Name âžœ Select the image according to the selected colour âžœ Click on Upadte button
Note: Colors with images will only be displayed if they are added to the product images in the admin panel.



  1. Save the Settings: After clicking the Update button, Background Label will be enabled automatically ➜ Click the Save Button.

  1. Background Label: Go to the frontend ➜ Select the product ➜ click the customize button ➜ Click on Background Label


Result:

Select any colour — it will be applied and displayed on the canvas instantly.


Note: You can’t change the canvas image type of the other sides directly. It’s set based on the first side. To update it, change the canvas image type on the first side.


If you encounter any issues or require further assistance, don't hesitate to reach out for help..:)












Updated on: 26/07/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!