{"id":12057,"date":"2023-01-13T18:57:41","date_gmt":"2023-01-13T13:27:41","guid":{"rendered":"https:\/\/magecomp.com\/support\/?post_type=manual_documentation&p=12057"},"modified":"2023-01-13T18:57:41","modified_gmt":"2023-01-13T13:27:41","slug":"frontend-customize-product-design","status":"publish","type":"manual_documentation","link":"https:\/\/magecomp.com\/support\/docs\/product-designer-magento-2\/frontend-customize-product-design\/","title":{"rendered":"Frontend Customize Product Design"},"content":{"rendered":"

To customize a product, click the \u201cCustomize it\u201d button on the product page at the front end.<\/span><\/p>\n

\"customize<\/p>\n

You can change the product image from here.<\/span><\/p>\n

\"edit<\/p>\n

Add Image<\/b><\/p>\n

To add images to the product, use the option shown in the below image.<\/span><\/p>\n

\"add<\/p>\n

Add Text<\/b><\/p>\n

To add text to the product, use the option shown in the below image.<\/span><\/p>\n

\"add<\/p>\n

After you enter your text, you can change its position, edit it, delete it, and even add styling options.<\/span><\/p>\n

\"text<\/p>\n

You can change the text color, background color, and font style.<\/span><\/p>\n

\"text<\/p>\n

Add Image from Library<\/b><\/p>\n

To add ready-made images from the library, use the option shown in the below image. You can choose from a wide variety of categories.<\/span><\/p>\n

\"add<\/p>\n

Layers<\/b><\/p>\n

You can manage the product editing with layers.<\/span><\/p>\n

\"layers\"<\/p>\n

Social Share<\/b><\/p>\n

To share the custom image, use the option shown in the below image.<\/span><\/p>\n

\"share<\/p>\n

It provides options like Pinterest, Twitter, and Facebook.<\/span><\/p>\n

\"social<\/p>\n

Preview<\/b><\/p>\n

To preview your custom image design, use the option shown in the below image.<\/span><\/p>\n

\"preview\"<\/p>\n

Download<\/b><\/p>\n

To download your custom image, use the option shown in the below image.<\/span><\/p>\n

\"download\"<\/p>\n

Print<\/b><\/p>\n

To print your custom image, use the option shown in the below image.<\/span><\/p>\n

\"print\"<\/p>\n

Clear All<\/b><\/p>\n

To clear the product editing altogether, use the option shown in the below image.<\/span><\/p>\n

\"clear<\/p>\n

Close<\/b><\/p>\n

Use the close button to exit the product editing without saving.<\/span><\/p>\n

\"close\"<\/p>\n

Save<\/b><\/p>\n

Click the save button to apply changes and go back to the product page, as shown in the below image.<\/span><\/p>\n

\"save\"<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":12031,"menu_order":4,"template":"","manualdocumentationcategory":[4031],"manual_doc_tag":[],"class_list":["post-12057","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\/12057","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":2,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation\/12057\/revisions"}],"predecessor-version":[{"id":12075,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_documentation\/12057\/revisions\/12075"}],"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=12057"}],"wp:term":[{"taxonomy":"manualdocumentationcategory","embeddable":true,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manualdocumentationcategory?post=12057"},{"taxonomy":"manual_doc_tag","embeddable":true,"href":"https:\/\/magecomp.com\/support\/wp-json\/wp\/v2\/manual_doc_tag?post=12057"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}