{"id":2051,"date":"2022-08-09T10:25:38","date_gmt":"2022-08-09T10:25:38","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/magento-2-product-designer-extension-integration\/"},"modified":"2025-07-23T17:37:51","modified_gmt":"2025-07-23T12:07:51","slug":"magento-2-product-designer-extension-integration","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/magento-2-product-designer-extension-integration\/","title":{"rendered":"How to Integrate Product Designer with Magento 2"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Are you looking to sell personalized products in your store? Here is a complete guide on&nbsp;<em><strong>Magento 2 Product Designer Extension Integration<\/strong><\/em>&nbsp;that you can use to add a custom product designer to your Magento 2 store.  <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Online businesses face a lot of challenges to reach their success milestones, and one such challenge is meeting the customer\u2019s expectations. E-commerce has empowered customers to find and purchase the products they want. Today, customers\u2019 expectations have reached the pinnacle \u2014 \u2018they want to customize the products!\u2019 Selling customized products online has become a trend in the last few years. More and more businesses are offering product personalization facilities to their customers, including some popular brands such as Ray-Ban, Ralph Lauren, and Franklin Sports.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Customized products help businesses to take the personalized shopping experience to the next level. Online business owners can leverage personalized products in their stores to combat the fierce competition.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">According to&nbsp;<a href=\"https:\/\/www.statista.com\/statistics\/992635\/influence-of-customized-products-on-retailer-brand-choice-canada-by-generation\/\" target=\"_blank\" rel=\"noreferrer noopener\">Statista<\/a>, customers are more likely to purchase from a brand selling personalized products.&nbsp;Magento 2&nbsp;store owners can harness the benefits of personalized products by integrating the Magento 2 product designer extension by Meetanshi.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Reading this blog post will help you set up custom product designer Magento 2.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"whatis\">What is Magento 2 Product Designer Extension?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The<a href=\"https:\/\/meetanshi.com\/magento-2-product-designer.html\" target=\"_blank\" rel=\"noreferrer noopener\">&nbsp;Magento 2 product designer extension<\/a>&nbsp;adds the product customization functionality to the Magento 2 stores. The extension allows the customers to personalize the products on the Magento store by adding images, text, cliparts, and more. The Magento 2 store owners can use the extension to sell custom products such as t-shirts, pens, stationery items, etc. The customers can personalize the products and order them using the extension.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Some of the benefits of using the Magento 2 product designer extension are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>More Conversions:<\/strong>&nbsp;Offer product personalization in your Magento 2 store and increase conversions by offering customization options.<\/li>\n\n\n\n<li><strong>Increased AOV:<\/strong>&nbsp;Sell customized products in your Magento 2 store and charge extra product customization fees and enjoy the increased average order value.<\/li>\n\n\n\n<li><strong>Enhanced UX:<\/strong>&nbsp;Increase the user experience of your store by allowing the customers to personalize the products as they want!<\/li>\n\n\n\n<li><strong>Build Customer Loyalty:<\/strong>&nbsp;Allow the customers to design the products as they want using the Magento 2 product designer extension and build customer loyalty towards your store.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"steps\">Step-wise Guide to Magento 2 Product Designer Extension Integration<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step1\">Step 1: Extension Installation<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Follow these steps to install the extension in your store:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Extract the package and move the extension to the Magento 2 root directory via FTP.<\/li>\n\n\n\n<li>Run the following commands in the SSH:<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">For Magento version 2.0.x to 2.1.x \u2013<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>php bin\/magento setup:static-content:deploy<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">For Magento version 2.2.x &amp; above \u2013<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>php bin\/magento setup:static-content:deploy \u2013f<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>php bin\/magento cache:flush<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Magento 2 custom product designer extension has been successfully installed in your store.  <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step2\">Step 2: Basic Configuration<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Once you have installed the extension in your store, log into the admin panel, where you can find a separate Product Designer grid to configure the extension.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In your Magento 2 admin panel, go to&nbsp;<strong>Product Designer &gt; Configuration<\/strong>, and configure the following settings:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Product Designer:<\/strong>&nbsp;Enable the extension from here.<\/li>\n\n\n\n<li><strong>Fix Product Design Area:<\/strong>&nbsp;Select \u2018Yes\u2019 to define the area on the product for allowing customization.<\/li>\n\n\n\n<li><strong>Button Text to Start Design:<\/strong>&nbsp;Enter a button text that will be displayed to the customers to design the product.<\/li>\n\n\n\n<li><strong>Button Text to Edit Design:<\/strong>&nbsp;Enter a button text that will be displayed to the customers to edit the product.<\/li>\n\n\n\n<li><strong>Allowed Units to Define Product Size:<\/strong>&nbsp;Select all the measuring units that you want to use while defining the product size.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2022\/08\/Magento-2-Product-Designer-Configuration-700x269-1.png\" alt=\"Configure Magento 2 Product Designer Extension\" class=\"wp-image-51045\"\/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"step3\">Step 3: Text &amp; Font Settings<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Magento 2 product designer extension by Meetanshi allows the customers to add custom text to the products. The admin can enable the text functionality and configure it under the&nbsp;<strong>\u2018Text Settings\u2019<\/strong>&nbsp;section in the configuration.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Allow to Add Text:<\/strong>&nbsp;Select \u2018Yes\u2019 if you want to allow the customers to customize products by adding text.<\/li>\n\n\n\n<li><strong>Allowed Font Style:<\/strong>&nbsp;Select all the fonts that you want to allow the customers to use.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2022\/08\/Magento-2-Product-Designer-Extension-Integration-Text-Settings-700x212-1.png\" alt=\"Magento 2 Product Designer Extension Integration - Font Settings\" class=\"wp-image-51046\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can also manage the fonts that you want to add to the product designer. Go to&nbsp;<strong>Product Designer &gt; Manage Fonts<\/strong>&nbsp;grid, where you can add or delete fonts.<br><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2022\/08\/Magento-2-Product-Designer-Fonts-700x230-1.png\" alt=\"Magento 2 Product Designer - Fonts\" class=\"wp-image-51050\"\/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"step4\">Step 4: Image &amp; Clipart Settings<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The extension also supports customizing the products using images and clipart. Expand the&nbsp;<strong>Image Settings<\/strong>&nbsp;section in the configuration and configure the following settings:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Allow to Upload Image:<\/strong>&nbsp;Select \u2018Yes\u2019 if you want to allow customers to customize products by adding images.<\/li>\n\n\n\n<li><strong>Allow to Add Clip Art:<\/strong>&nbsp;Select \u2018Yes\u2019 to allow the customers to use clip art during product customization.<\/li>\n\n\n\n<li><strong>Max. Image Upload Size:<\/strong>&nbsp;Enter the maximum allowed image size in KBs.<\/li>\n\n\n\n<li><strong>Max. Number of Images Allowed:<\/strong>&nbsp;Enter the maximum number of allowed images.<\/li>\n\n\n\n<li><strong>Allowed Image Format:<\/strong>&nbsp;Select all the allowed image formats.<\/li>\n\n\n\n<li><strong>Reference Design Image Format:<\/strong>&nbsp;Select the file format for the reference image that will be generated by the extension.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2022\/08\/Magento-2-Product-Designer-Image-Settings-700x329-1.png\" alt=\"Magento 2 Product Designer - Image Settings\" class=\"wp-image-51052\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">The extension allows you to add clip arts from that backend, which will be provided to the customers during the customization. You can upload clip arts and manage the clip art categories from the backend.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The&nbsp;<strong>Product Designer &gt; Manage Clip Art Categories<\/strong>&nbsp;grid allows creating and deleting the clip art categories, which will be used in the product customization.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2022\/08\/Magento-2-Product-Designer-Manage-Clip-Art-Categories-700x186-1.png\" alt=\"Manage Clip Art Categories in Magento 2 Product Designer\" class=\"wp-image-51053\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Go to&nbsp;<strong>Product Designer &gt; Manage Clip Art<\/strong>, where you can find all the clip art images. Here, you can add new clip art images and assign their categories.<br><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2022\/08\/Magento-2-Product-Designer-Add-Clip-Arts-700x368-1.png\" alt=\"Magento 2 Product Designer Add Clip Arts\" class=\"wp-image-51057\"\/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"step5\">Step 5: Set Product Customization Pricing<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The extension allows the store admin to set the pricing for the product customization. Go to the&nbsp;<strong>\u2018Price Settings\u2019<\/strong>&nbsp;section to configure the price settings for product customization in Magento 2.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can set the product customization pricing in the following three ways:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Free<\/li>\n\n\n\n<li>Fixed<\/li>\n\n\n\n<li>Per Object<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2022\/08\/Magento-2-Product-Designer-Price-Settings-700x138-1.png\" alt=\"Magento 2 Product Designer - Price Settings\" class=\"wp-image-51059\" style=\"width:840px;height:auto\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Configure the pricing as you want and hit the&nbsp;<strong>\u2018Save Config\u2019<\/strong>&nbsp;button to save the settings.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step6\">Step 6: Enable Product Customization<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Once you have configured the extension, it is time to enable the product customization functionality for the products in Magento 2. In order to do that, go to&nbsp;<strong>Catalog &gt; Products<\/strong>&nbsp;and edit the product for which you want to offer the customization facility, and expand the&nbsp;<strong>Product Designer Options<\/strong>&nbsp;section to configure the following settings:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Allow Product Designing:<\/strong>&nbsp;Select \u2018Yes\u2019 to allow the customers to design the product.<\/li>\n\n\n\n<li><strong>Unit Type:<\/strong>&nbsp;Select the measurement unit for defining the product dimensions.<\/li>\n\n\n\n<li><strong>Width:<\/strong>&nbsp;Enter the width of the product in the selected measurement unit.<\/li>\n\n\n\n<li><strong>Height:<\/strong>&nbsp;Enter the height of the product in the selected measurement unit.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2022\/08\/Magento-2-Product-Designer-Enable-for-Products-700x129-1.png\" alt=\"Enable Magento 2 Product Designer Extension for Products\" class=\"wp-image-51061\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Click on the&nbsp;<strong>\u2018Save\u2019<\/strong>&nbsp;button at the top-right corner to allow product customization in Magento 2.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"frontend\">Magento 2 Product Designer in Frontend<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Once the Magento 2 product designer extension integration is successful, the customers will be able to give a personal touch to the products in your store. The extension will allow the customers to customize the products as per the backend configuration.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2022\/08\/Magento-2-Product-Designer-in-Frontend-700x344-1.png\" alt=\"Magento 2 Product Designer in Frontend\" class=\"wp-image-51064\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">The extension also generates a reference image which is helpful during the order process for the store owners. Moreover, the extra charges for&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/benefits-of-e-commerce-product-customization-personalization\/\" target=\"_blank\" rel=\"noreferrer noopener\">product customization<\/a>&nbsp;are applied during the checkout.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Want to try product personalization yourself? Have a look at our Product designer&nbsp;<a href=\"https:\/\/meetanshi.in\/m2d21\/index.php\/product-designer.html\" target=\"_blank\" rel=\"noreferrer noopener\">demo<\/a>. If you stuck somewhere or want the help in configuring the extension, follow Magento 2 Product Designer&nbsp;<a href=\"https:\/\/meetanshi.com\/docs\/magento-2\/Product-Designer\/\" target=\"_blank\" rel=\"noreferrer noopener\">user guide<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Offering product personalization to the customers in your eCommerce store can help you stand out from the competition. In Magento 2, you can offer such a facility by using the Magento 2 product designer extension. Also if the product designer integration involves changes in the Magento admin panel or customization that could cause <a href=\"https:\/\/meetanshi.com\/blog\/magento-product-save-button-not-working-in-admin-how-to-fix\/\">issues with the product save button<\/a>, so be careful during the integration process. This blog post covers all the steps required for the Magento 2 product designer extension integration.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><div class=\"meetanshi-cta\">\r\n<div class=\"cta-content-wrapper\">\r\n<span>Magento 2 Product Designer<\/span>\r\n<p>Offer the web to print feature &amp; let the buyer personalize the products<\/p>\r\n<a href=\"https:\/\/meetanshi.com\/magento-2-product-designer.html\" target=\"_blank\" class=\"btn-primary\">Try it Out<\/a>\r\n<\/div>\r\n<div class=\"cta-image-new\">\r\n<img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/magento-2-product-designer.png\" alt=\"Magento 2 Product Designer\">\r\n<\/div>\r\n<\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Are you looking to sell personalized products in your store? Here is a complete guide on&nbsp;Magento 2 Product Designer Extension Integration&nbsp;that you can use to&#8230;<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-2051","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2051","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=2051"}],"version-history":[{"count":6,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2051\/revisions"}],"predecessor-version":[{"id":19313,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2051\/revisions\/19313"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=2051"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=2051"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=2051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}