Custom Module Fields

Introduction

In this article, I'll explain how you can add Custom Fields to your Modules. Custom Fields allow you to store additional data within your Module Items that our standard fields may not be able to handle- such as a File, or Dropdown-multi (array).

Prerequisites

You have installed the new System Files release - version 2.6.1.0 or higher.
eCommerce version 1.2.0 or higher is required if adding to Custom Fields Products.

Edit Module Structure

Firstly, we'll need to add the new Custom Field to our Modules Structure. This is slightly different for the eCommerce Module- I'll example these separately.

Modules (Blog, Authors, FAQ, Events...)

Go to your Site's Dashboard and click the "Modules" dropdown on the left-hand-side menu. Then select the Module you'd like to add the Custom Field too.

From here, you should see an "Edit Module Structure" button:

eCommerce Products

If you're trying to add your Custom Field to a Product, go to your Site's Dashboard and click the "eCommerce" dropdown on the left-hand-side menu, then select "Products".

You'll see an "Edit Module Structure" button here:

Add your Custom Fields

Now, scroll to the bottom of the "Edit Module Structure" page- where you'll see the Custom Fields section.

From here you can a new Custom Field- give your Field a name and select the type of data it'll store. If you're adding multiple Custom Fields use the "Add new field" button.

Once finished, hit the "Save" button below.

Go back to the Module Items Page (use the "back" button on your browser) and Edit your Module items, adding the data to your Custom Fields.

Outputting Custom Fields

Locate the Layout you'll be outputting the Custom Fields from (Product List Layouts), these will be in Code Editor.

Within the item.liquid file you should have an "Insert field" dropdown on the top-right of the Code Editor- this is the suggested way to Include your Custom Field (as it will contain the recommended HTML for the type of data being outputted).

You can also include the Custom Fields using the Field name, here's how this looks for the Custom Fields I created above:

{{this['Custom Field 1']}}

{{this['Custom Field 2']}}