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

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. Once you enable the feature, click on the “Save” button to enable it on the Frontend. [3]

 

Let’s check how the Form Based Customization Addon works on the frontend. 

 

Store View

When customers access the online store for shopping and 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

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

 

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. [4]