Firstly, you need to enable the feature by navigating to Product Designer → Manage Layouts, you will get the list of various layouts. Open the layout in Edit mode. [1]

Now, enable the VDP field in the Data tab and click on the Save button to save the configuration. [2]

Now it’s time to assign the VDP field while creating the templates. 

Navigate to Product Designer → Manage Templates, you will get the list of created templates. Now open the template in Design mode. [1]

You will get the Assign VDP fields button, by clicking on the Data tab. Once you click on the button, you will get the Assign, Field Data, and Title fields. [2]

Enter the Title for the Field Data and assign it if you want to keep it customizable for your customers. For example, if the Name field data has be assigned as VDP fields, then your customers will be able to enter the respective name in the Name field. [3]

You can Select and Deselect all at once [3]. After assigning the VDP fields, click on the Save & Close button to save it. 

If you haven’t assigned any VDP field to the template then it will show an Alert message. Click on Assign to redirect to the VDP fields panel to assign the VDP Fields like below or click on the Cancel button to save the template without VDP fields. 

After all the backend configuration, let’s see how it works on the frontend[1]. Once the card product is opened, the VDP section will be available in the Data tab from the left panel. [2]

Now, by clicking on the VDP Data button, your customers will land on the Records panel. [3]

Here, your customers will get all the VDP fields to edit the values. Click on the Edit icon from the Action column and edit the values as per the requirement. [3]

Note: Your customers can also add multi-line text.

Your customers can add more records by clicking on the “Add Records” button [4]. They can also delete the records by clicking on the Delete icon or Remove All.  [5]

Note: Your customers will not be able to delete the default first field in the VDP data. [6] 

After adding the records, click on the Save & Close button [7]. Customers can also preview the different records by clicking on the Preview All button. [8]  [9]

Download the VDP Data in your system by clicking on the Download CSV. [10]

The VDP fields record will also be available while adding the product to the cart. 

Note: Your customers won’t be able to change the quantity of the card if they have entered multiple records. [11]

Your customers can also view the VDP Fields from the shopping cart by clicking on the Display Shopping Cart button. But they won’t be able to edit the records. [12]

Your customer has to browse and upload the image to apply the image in the product designer tool. Once they have uploaded the image it will display in the VDP section. Now by clicking on the Link to Data, the image will be assigned to the ID card. [1]

Once the image is uploaded, it will reflect in the VDP Data records and also you can preview it by clicking on the Preview All button. [2][3]

You can also add the data by uploading the CSV file. This feature makes it easier for the user to add multiple records easily within a few minutes. To view the format, you can download the sample file. [1] [2]

Once the file is downloaded, update your data in the file and upload it. 

Once you upload the file, you can see the newly added record in the VDP Data section. [3] 

Note: CSV file won’t be uploaded if any information is missing. 

You can view the order details of the ID cards by clicking on the View button from Sales → Orders. Now you are at the Order details page. Scroll down to the items ordered section and click on the View Design. [1]

Note: Once you click View Design, generating the image will take around 10 minutes.

You can view the designs of the product along with the uploaded images. [2]

BYI product designer tool also comes with various locks like Position, Edit, and Property Lock. Edit lock restricts the customer to edit and delete the element. Position lock restricts the customers to change the position of the element. Property Lock restricts your customers to change the properties of an element like color and opacity. [1]

With Edit Lock

If the edit lock has been applied on any element like company’s logo, then the respective filed will not be available as a VDP field.  [2]

Before Edit Lock 

Before Edit Lock Company Field is available in the VDP Fields panel. [3]

After Edit Lock 

After Edit Lock Company Field is not available in the VDP Fields panel. [4]

With Position Lock 

If the Position Lock has been applied on any element like the company’s logo [5], then your customers won’t be able to change the position of an element on the front end. [6]

With Property Lock  

If the Property Lock has been applied on any element like the company’s logo, then your customers won’t be able to change the property of an element on the front end. [7]

Other Element 

An element without the Property Lock will have the properties panel above. [8]

Element With Property Lock 

An element with the Property Lock won’t have the properties panel above. [9]

Now, Save the product template.