You can modify the custom template data to configure items at the product level on your website, such as adding extra functionalities to product pages and to the product type category.

We recommend that you don't modify your custom template unless you have in-depth knowledge of HTML and CSS; otherwise, we recommend that you hire an expert. Also, keep in mind that once you activate the Theme Editor, you will no longer receive theme updates.

Enabling custom template data

To be able to edit the custom template data:

1. Navigate to Settings > Workflow

   

2. Enable the Custom template data option by toggling the switch on.

   

3. Click Save.

The Custom Template Data section will appear.

From here, you can:

• Add a new variable by clicking Add new variable, entering the variable's Name, and using the checkboxes to select what pages the data field should appear on. Click Add.
  • You can have up to 10 variables.

  

• Edit an existing variable by clicking Edit. Change the variable's information and click Save.

  

• Delete a variable by clicking Delete and confirming its permanent deletion by clicking Delete in the pop-up.
  • You can't delete the first 3 variables (Data 01, Data 02, and Data 03).

  

Modifying custom template data

To modify the custom template data:

1. Navigate to Design > Theme Editor.
2. Click Advanced.

   

3. Click Edit code.

   

4. A pop-up will appear warning that editing code will delete your draft version, and you will no longer receive automatic theme updates. You can restore the original theme by reinstalling from the Theme Store, but your changes, theme settings, and theme images will be lost upon restoration. Click the checkbox next to I understand and wish to proceed, then click Edit code.

   

Add the lines below to the appropriate portions of the original theme code to call the custom template data fields.

{% if product.data_01 == 'link term' %}

If the data_01 line is populated, the HTML code here will be invoked:

{% else %}

If the data_01 line is not populated, the HTML code here (often the original code) will be invoked:

{% endif %}

These code lines create an IF-ELSE conditional section. If the Data_01 field on a product page in your Back Office is populated, the code in the IF-ELSE section will be used and then trigger the action defined by the link term; otherwise, the original code in the ELSE section will be triggered instead.

The link term can correspond to many different actions, such as adding labels to products or removing the Add to cart button from the product listing and product detail pages for specific items, for example.

Whenever you are done editing the theme codes, call the changes from the product settings:

1. In your back office, select Products > Products.
2. Select the product's name.

   

3. Click Custom Template Data.

   

4. Enter your link terms into the corresponding Value fields.

   

5. Click Save.

Example

You want to write HTML/CSS code to display a New label over the images of new products in your online store. This will allow you to determine at the product level when this code should be called.

Your code should be similar to the following:

IF-THEN section:

Insert the HTML code that will display a New label over the images of new products:

{% if product.data_01 == 'New' %}

ELSE section:

{% else %}

Original code that will be called when the Data 01 field is left blank:

{% endif %}

You have created the IF-THEN/ELSE conditional code section. If the Data 01 field for a given product contains the link term New, then the HTML code you added below the IF-THEN section will be applied at the product level. Otherwise, the original theme codes will remain active.