{"id":12039,"date":"2023-01-13T18:46:11","date_gmt":"2023-01-13T13:16:11","guid":{"rendered":"https:\/\/magecomp.com\/support\/?post_type=manual_documentation&#038;p=12039"},"modified":"2023-01-13T18:46:11","modified_gmt":"2023-01-13T13:16:11","slug":"backend-customize-product-design","status":"publish","type":"manual_documentation","link":"https:\/\/magecomp.com\/support\/docs\/product-designer-magento-2\/backend-customize-product-design\/","title":{"rendered":"Backend Customize Product Design"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Admin can customize the product design and control the editing options from the backend.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">From the Admin Panel, go to <\/span><b>Catalog &gt; Products<\/b><span style=\"font-weight: 400;\">. Open your desired product in Edit mode. You will find a <\/span><b>Product Designer<\/b><span style=\"font-weight: 400;\"> tab. Expand it. It shows the main product image by default. If you want another image, click on Configure Images.<\/span><\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone wp-image-12041 size-full\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/product-designer-tab.png\" alt=\"product designer tab\" width=\"1266\" height=\"610\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/product-designer-tab.png 1266w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/product-designer-tab-300x145.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/product-designer-tab-1024x493.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/product-designer-tab-768x370.png 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/product-designer-tab-600x289.png 600w\" sizes=\"(max-width: 1266px) 100vw, 1266px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">You can select the image you want to customize or configure.<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-12042 size-full\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/configure-images.png\" alt=\"configure images\" width=\"1352\" height=\"606\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/configure-images.png 1352w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/configure-images-300x134.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/configure-images-1024x459.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/configure-images-768x344.png 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/configure-images-600x269.png 600w\" sizes=\"(max-width: 1352px) 100vw, 1352px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Here it provides an option to add, edit, clear, or cancel. You can also customize or configure options for product editing.<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-12040 size-full\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/product-designer-backend.png\" alt=\"product designer backend\" width=\"1277\" height=\"766\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/product-designer-backend.png 1277w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/product-designer-backend-300x180.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/product-designer-backend-1024x614.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/product-designer-backend-768x461.png 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/product-designer-backend-600x360.png 600w\" sizes=\"(max-width: 1277px) 100vw, 1277px\" \/><\/p>\n<p><b>Image Info<\/b><\/p>\n<p><span style=\"font-weight: 400;\">It shows detailed information about the product image.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12043 size-full\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/image-info.png\" alt=\"image info\" width=\"1270\" height=\"767\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/image-info.png 1270w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/image-info-300x181.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/image-info-1024x618.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/image-info-768x464.png 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/image-info-600x362.png 600w\" sizes=\"(max-width: 1270px) 100vw, 1270px\" \/><\/p>\n<p><b>Layer Mask<\/b><\/p>\n<p><span style=\"font-weight: 400;\">It allows you to add or edit the layer mask.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12044 size-full\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/layer-mask-configuration.png\" alt=\"layer mask configuration\" width=\"1276\" height=\"767\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/layer-mask-configuration.png 1276w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/layer-mask-configuration-300x180.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/layer-mask-configuration-1024x616.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/layer-mask-configuration-768x462.png 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/layer-mask-configuration-600x361.png 600w\" sizes=\"(max-width: 1276px) 100vw, 1276px\" \/><\/p>\n<p><b>Images<\/b><\/p>\n<p><span style=\"font-weight: 400;\">It allows you to add images from the system or library.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12045 size-full\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/images.png\" alt=\"images\" width=\"1271\" height=\"768\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/images.png 1271w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/images-300x181.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/images-1024x619.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/images-768x464.png 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/images-600x363.png 600w\" sizes=\"(max-width: 1271px) 100vw, 1271px\" \/><\/p>\n<p><b>Texts<\/b><\/p>\n<p><span style=\"font-weight: 400;\">It allows you to add custom text.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12046 size-full\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/texts.png\" alt=\"texts\" width=\"1273\" height=\"763\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/texts.png 1273w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/texts-300x180.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/texts-1024x614.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/texts-768x460.png 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/texts-600x360.png 600w\" sizes=\"(max-width: 1273px) 100vw, 1273px\" \/><\/p>\n<p><b>Images Configuration<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Configure image editing options from here<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12047 size-full\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/images-configuration.png\" alt=\"images configuration\" width=\"1275\" height=\"768\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/images-configuration.png 1275w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/images-configuration-300x181.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/images-configuration-1024x617.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/images-configuration-768x463.png 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/images-configuration-600x361.png 600w\" sizes=\"(max-width: 1275px) 100vw, 1275px\" \/><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Enable Photos Button &#8211;<\/b><span style=\"font-weight: 400;\"> This will show the Add Image button on the frontend product customization.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Disable Resize &#8211;<\/b><span style=\"font-weight: 400;\"> This will not allow customers to resize the images.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Disable Rotate &#8211;<\/b><span> This will not allow customers to rotate the images.<\/span><\/li>\n<\/ul>\n<p><b>Text Configuration<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Configure text editing options from here<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12048 size-full\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/text-configuration.png\" alt=\"text configuration\" width=\"1262\" height=\"734\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/text-configuration.png 1262w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/text-configuration-300x174.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/text-configuration-1024x596.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/text-configuration-768x447.png 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/text-configuration-600x349.png 600w\" sizes=\"(max-width: 1262px) 100vw, 1262px\" \/><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Enable Texts Button &#8211;<\/b><span style=\"font-weight: 400;\"> This will show Add Text button on the frontend product customization.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Disable Resize &#8211;<\/b><span style=\"font-weight: 400;\"> This will not allow customers to resize the text.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Disable Rotate &#8211;<\/b><span style=\"font-weight: 400;\"> This will not allow customers to rotate the text.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Disable background color selector &#8211;<\/b><span style=\"font-weight: 400;\"> This will not allow customers to change the background color of the text.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Disable text color selector &#8211;<\/b><span style=\"font-weight: 400;\"> This will not allow customers to change the font color of the text.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Maximum Character &#8211; <\/b><span style=\"font-weight: 400;\">Set the maximum number of characters to be added to a custom product design. By default, it allows customers to add an unlimited number of characters.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Fonts &#8211;<\/b><span style=\"font-weight: 400;\"> Select the fonts you want to show in the front end. By default, it allows all fonts.<\/span><\/li>\n<\/ul>\n<p><b>Library Configuration<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Configure library options from here<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12049 size-full\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/library-configuration.png\" alt=\"library configuration\" width=\"1273\" height=\"763\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/library-configuration.png 1273w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/library-configuration-300x180.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/library-configuration-1024x614.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/library-configuration-768x460.png 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/library-configuration-600x360.png 600w\" sizes=\"(max-width: 1273px) 100vw, 1273px\" \/><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Enable Add From Library Button &#8211;<\/b><span style=\"font-weight: 400;\"> This will allow customers to add images from the library.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Library Categories &#8211;<\/b><span style=\"font-weight: 400;\"> Select categories you want to show in the front end. By default, it allows all library categories.<\/span><\/li>\n<\/ul>\n<p><b>Prices Configuration<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Configure pricing options from here<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12050 size-full\" src=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/prices-configuration.png\" alt=\"prices configuration\" width=\"1274\" height=\"767\" srcset=\"https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/prices-configuration.png 1274w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/prices-configuration-300x181.png 300w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/prices-configuration-1024x616.png 1024w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/prices-configuration-768x462.png 768w, https:\/\/magecomp.com\/support\/wp-content\/uploads\/2023\/01\/prices-configuration-600x361.png 600w\" sizes=\"(max-width: 1274px) 100vw, 1274px\" \/><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Image Price &#8211; <\/b><span style=\"font-weight: 400;\">Set an additional price to be charged for the image.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Text Price &#8211; <\/b><span>Set an additional price to be charged for the text.<\/span><\/li>\n<\/ul>\n","protected":false},"author":1,"featured_media":0,"parent":12031,"menu_order":2,"template":"","manualdocumentationcategory":[4031],"manual_doc_tag":[],"class_list":["post-12039","manual_documentation","type-manual_documentation","status-publish","hentry","manualdocumentationcategory-m2-product-designer"],"_links":{"self":[{"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation\/12039","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation"}],"about":[{"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/types\/manual_documentation"}],"author":[{"embeddable":true,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation\/12039\/revisions"}],"predecessor-version":[{"id":12051,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation\/12039\/revisions\/12051"}],"up":[{"embeddable":true,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation\/12031"}],"wp:attachment":[{"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/media?parent=12039"}],"wp:term":[{"taxonomy":"manualdocumentationcategory","embeddable":true,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manualdocumentationcategory?post=12039"},{"taxonomy":"manual_doc_tag","embeddable":true,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_doc_tag?post=12039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}