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']}}
Related Articles
- Module Support
- eCommerce - Product List Layouts
- eCommerce - Product Detail Layouts
- Events Module - Edit Module Structure
- Events Module - Custom Fields
- Blog Module - Edit Module Structure
- Blog Module - Custom Fields
- FAQ Module - Edit Module Structure
- FAQ Module - Custom Fields
- Slider Module - Edit Module Structure
- Slider Module - Custom Fields
- Testimonials Module - Edit Module Structure
- Testimonials Module - Custom Fields