FORM BASED CUSTOMIZATION

Form Based Customization Addon offers each and every element to edit in a single place. Your customers don’t have to roll the cursor over each element for editing. They can edit each object easily with the help of this feature. All you have to do is enable this feature from the backend.

Backend Configurations

Product Level Configuration

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]

Manage Layouts

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.

 

Store View

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.

For Apparel

As you can see each and every element is present in the Data tab like images, and text. [1] To edit the image just roll over the cursor to the particular image and the “Reset”, “Upload File”, “Edit” options will appear. [2]

 

  • Click on the “Reset” icon to reset the image if any edits are done on it.
  • Click on the “Upload file” icon to upload the new image file.
  • Click on the “Edit” icon to edit the 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. 

 

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. You can change the font style, size, stroke, Drop Shadow, Arc, Skew, and Object Position. [3]

 

Click on the Reset icon to reset the edits of the text. 

For Cards

Detail Page

 

If you have enabled “Form Based” from the Manage Layouts feature, then your customers can update the product information from the Product’s Detail Page itself. 

 

By Clicking on the Product Name and your customers will land on the Product’s Detail Page. Once they have landed on the page, then they can change the Text and Image details. 

 

Text

 

If you want to change the Text of the product, then click on the Edit icon from the Text tab. From the Text editor, your customers can change the Text, Font, Font size, Color, and apply stylings like Bold, Italic, and Underline[1]

 

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

 

If you have applied the Property Lock from the Manage Templates, then your customers won’t be able to edit the text properties of the product. [3]

 

If you have also applied Edit Lock from the Manage Templates, then your customers won’t be able to edit the text as well. [4]

 

Image

 

You can change the image by uploading a new one. By clicking on the Reset button, the default image will be loaded again.  [5][6]

 

You can also edit the other side of the product. [7]

For more customization, your customers can click on the “Design It” button.

 

 

As you can see each and every element is present in the Data tab like images, texts, and QR Code. [8] To edit the image just roll over the cursor to the particular image and the “Reset”, “Upload File”, “Edit” options will appear. [9]

 

  • Click on the “Reset” icon to reset the image if any edits are done on it.
  • Click on the “Upload file” icon to upload the new image file.
  • Click on the “Edit” icon to edit the 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. 

 

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. By clicking the Edit icon you can change the font style, size, stroke, Drop Shadow, Arc, Skew, and Object Position. [10]

 

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