How To Add Custom Fields To Product Pages

Overview

Uses for custom fields might include:

• product-related freight information for oversized items 
• special features or benefits, such as certification logos

These custom fields can then be displayed on Product Detail or List View pages.
 

The process for adding custom fields to products is as follows: 

A) Create the new custom field.
B) Edit a product (or products) to include the new data.
C) Add the new product field widget to the Product Detail and/or Product List templates.

The guides below will outline the steps required to implement a custom product field.

Step-by-step guide

A) Create a New Custom Field:  

1. Login to the CMS. 
2. Navigate to 'Custom Fields'. 
3. Click 'Products'.
   
4. The page will load, displaying existing custom fields from the Products table.
5. Click the 'Add New Custom Field' button. 
6. Populate the Custom Field Details as specified: 
   • Field Name - a code to associate with this field in the database. Alphanumeric only, with no spaces or special characters.
   • Prompt - the field prompt/title which displays to Administrators on the Product Maintenance screen.
   • Help - additional information which displays to Administrators on the Product Maintenance screen.
   • Data Type:
     • Text - alphanumeric characters, including spaces, special characters, and html.
     • Integer - whole numbers
     • Decimal - numeric data including fractional components
     • DateTime - calendar dates and times
     • Boolean - 2 values, e.g. True/False
   • Allow Unlimited Text (for data type 'Text' only) - ticking this box removes the character limit from the field.
   • Length (for data type 'Text' only) - where unlimited data has NOT been allowed, this sets the maximum field length.
   • Display Type - the interface which displays to Administrators on the Product Maintenance screen. Options here will change depending on the Data Type selected earlier. Possibilities include TextBox, DropDownList, and DateTimePicker.
   • Mandatory - ticking this box makes the custom field required in Product Maintenance.
   • Active - ticked by default. Leave as is. 
     
7. Click 'Save' to create the custom field.

B) Edit a product (or products) to include this new data: 

1. Navigate to 'Catalogue' --> 'Product Maintenance'.
2. Search for the required product by Product Code or Description. 
3. Click the 'Edit' button against the product.
4. Scroll to the 'Custom Fields' section.
5. Edit the data as required.
   
6. Click 'Save'. 

C) Add the custom field widget to the Product Detail and/or Product List Item templates:

1. Navigate to 'Layouts' --> 'Templates'.
2. Scroll to the 'Product' section and click the 'Product Detail' or 'Product List Item' template as required (this example will use the Product Detail template).
3. Locate the appropriate zone for the custom field widget. The optimal location will depend on site layout, but common placements include 'Zone MainRight' or 'Zone Bottom'.
4. Click the 'Add Widget' button.
5. Select 'Product Field' from the drop-down list. 
6. Click the 'Add' button. 
7. Drag the widget to the desired sequence in the widget list, if required.
8. Click the 'Edit' button to configure options. A modal window will appear.
9. Configure the widget as required:
• Description - a descriptive reference for the Administrator on the layout page. This does not display on the front-end website.
• Layer - this widget can be rendered conditionally based on role or customer, or displayed under all conditions (All Pages).
• Product Field - select the new custom field from the drop-down list. The format will be the Field Name prefaced with 'CUS_'.
• Show Heading - tick this box to include a heading for this widget.
• Heading Text - the heading text displayed to the end user.
• Fallback Information - default text can be entered, to be displayed against products with no data in this field.
• Show Toggle - allows the content to be hidden by default, and displayed when the user clicks on the Heading.
• Show Inline Heading - allows the heading to be displayed in line with the field content (ignored when toggle is in use).
• Show On Mobile - when ticked, this field will display on mobile devices, when unticked the field will be excluded.
  
10. Click 'Save'.

The custom field widget will now render on the relevant product template.

Related articles

• Page:
  Change Placeholder Images