You can also enable this feature for each individual product. Navigate to the Catalog ➤ Products, you will get the list of the Products. Now, open the product in the Edit mode and go to the Product Designer section. [1]

Now enable the Form Based on Product Detail Page feature. [2]

Navigate to the PRODUCT DESIGNER → Manage Layouts to enable the Form Based Customization Addon. [1]

By clicking on the Manage Layouts, you will get the list of created layouts for different products. 

Now, by clicking on the “Edit” option of any layout, you will be redirected to the edit page of the layout. [2]

After landing on the edit page, enable the “Data” feature for Frontend. Now enable the Form-Based feature if you want to offer it on the Product Detail Page. [3][4]

Once you enable the feature, click on the “Save” button to enable it on the Frontend. Let’s check how the Form Based Customization Addon works on the frontend.

When customers access the online store for shopping they can edit the product from the detail page itself. Your customers can also navigate to the product designer tool to design the products, they can design the product by adding the different objects/elements to the designer area.

The Data tab shows all these objects/elements added to the design area. Customers can easily edit these elements and can even change them. Let’s check how.

The Data tab will be available on the left side of the product designer tool.

If you have enabled “Form Based” from the Manage Layouts and at the Product Level, then your customers can update the elements from the Product’s Detail Page itself. 

Here you can view 3 different options Select, Design and Checkout.

Select Option

– By Clicking on the Select option, You can choose the different variants as well as any custom option added on that product will be displayed. [1]

– After that by clicking on the Design option you can change the Text and Images. You can also click on Go to Design button given on the bottom of the Select section.

Design Option

All the template details will be displayed under design section like text and images of the template.

Text

– If you want to change the text or their properties like Font, Font size, Color, and apply stylings like Bold, Italic, and Underline. [2]

– 3 records of text will be displayed, if more text are their in the template than pagination will be there.

– By clicking on the Reset button, the default text will load again. [3]

– If admin has applied the Property Lock from the Manage Templates while creating template, then you won’t be able to edit the text properties of that text. [4]

– If admin has applied Edit Lock,, then you won’t be able to edit the text. [5]

– If admin has applied  Position lock, which will lock position of text and images and you won’t be able to move them.

Image

– You can change the image by replacing with a new one and by clicking on the Reset button, the default image will be loaded again. [6]

– You can edit more thing on the product by navigating to designer tool Click on Design it button which is given on the bottom of the Design section. You will be redirected to designer tool. [7]

Now let’s see how form-based works on the Product designer tool.

On the Designer page, you can view each and every element is present in the Data tab like images, texts, and QR Code. [1]

To edit the image just roll over the cursor to the particular image and the “Reset”, “Upload File”, “Edit” options will appear. 

Click on the “Reset” icon to reset the image.

Click on the “Upload file” icon to upload the new image file.

Click on the “Edit” icon to edit properties of image. 

Once you click on the icon, the Edit panel will appear beside it. From here you can apply Image Effects, Image Filters, Skew, Object Position, etc.  [2]

To change the text, simply type the new content in the text field. You can also apply different styles to the text by clicking on the Edit icon. [3]

In the QR code, you can enter the content or any other information you want to show like the website. After entering the information, click on the small arrow to apply the QR code to the product. [4]