Custom fields
The custom fields app allows you to add additional data to various elements of your website, including categories, brands, products, pages, blog posts and customers, and within your ShopWired account (for example for orders or quotes).
You can create different types of custom fields such as text fields, data lists, product lists, and date and time fields. These fields can be used for a variety of different purposes, from displaying extra information on your website to altering the functionality of your pages.
For example, you might use custom fields to show a specification table on your product pages:
Creating custom fields like 'colour' or 'screen size diagonal' allows you to enter and display relevant data for each product.
Custom fields can also be used to change functionality on your website, such as swapping an 'add to basket' button for an 'enquire now' button on product pages when a custom field is selected.
To install the app:
- Navigate to Apps
- Locate the Custom fields app
- Select
install this app
Configuring custom fields
Configuring custom fields
After installing the app, you can configure custom fields by navigating to Settings > Custom fields.
- Select
create custom field - Select an option from Item type setting, corresponding to the type of custom field you want to create:
- To use custom fields on quotes select
order - Custom fields of type
customercan be used on both normal and trade customer accounts
- To use custom fields on quotes select
- When configuring a custom field for either customers or orders, an additional setting will be displayed:
- For
customersuse the setting Make this field available for use on your website to allow the custom field to be used on your website by visitors creating or editing customer accounts - For
ordersuse the setting Make this field available for use on your website to add the custom field to your website's checkout (refer to the guidance on order custom fields for more information)
- For
- Configure a Name for the custom field
- The name will be used where the custom field is used on your theme files
- The name can only contain letters and the
_(underscore) character, without spaces
- Configure a Label (display name) for the custom field which will be displayed to you in your ShopWired account (labels can contain letters, numbers and spaces)
- Select the Type of custom field you are creating:
Textcustom fields are for text stringsTogglecustom fields are either selected or not selected (true or false)Choicecustom fields are a list of available values (that you configure) to choose from using aListcustom fields are a list of available values (that you configure) to choose from using a drop down settingDate pickercustom fields are for a date selectionDate & time pickercustom fields are for a date and time selectionValue listcustom fields allow you to configure a list of individual valuesProduct listcustom fields allow you to select products from all the products on your ShopWired account
- Depending on the selected Type (e.g. choice) you'll be asked to configure Values
- Use the Instructions setting to configure instructions for what type of data to enter into the custom field - this is optional but advisable if you have a lot of custom fields. The instructions are displayed within your ShopWired account (in a next to the custom field) and cannot be referenced on your website
Entering data for custom fields
Entering data for custom fields
To add data to a custom field:
- Navigate to the specific page in your ShopWired account
- For example, to add data to a product custom field you'll need to select to create or edit the product
- Locate the Custom fields section
- Enter the required data and save your changes
Where the type of data you're adding custom fields to (e.g. products) has an you can also add custom field data using the import system.
Using custom fields on your website
Using custom fields on your website
Data attached using custom fields is available through the corresponding .
For example, to return data in a custom field data attached to a product, use the product object, using the format product.custom_fields.X where X is replaced with the of the custom field.
Toggle
Toggle custom fields return either true or false depending on whether the setting is selected.
Value lists
Value list custom fields return an , for example:
{% for value in product.custom_fields.X %}
{{ value }}
{% endfor %}
You can use the , e.g. product.custom_fields.X[0], where 0 returns the first item in the array.
Product lists
Product lists custom fields return an of products selected, for example:
{% for custom_field_product in product.custom_fields.X %}
{{ custom_field_product.title }}
{% endfor %}
You can use the , e.g. product.custom_fields.X[0], where 0 returns the first item in the array, for example:
{% set product_id = product.custom_fields.X[0] %}
{% set alternative_product = product(product_id) %}
{{ alternative_product.title }}
Dates
Date and date & time custom fields return a for the selected date. You can modify the returned output using Twig's to modify the output.
Custom fields for customers
Custom fields for customers
Custom fields for customers can be configured to appear on the customer account creation and trade account creation forms on your website (only where you have selected the setting Make this field available for use on your website.
An array of custom_fields is available to return all exposed custom fields. Each item within the array has the following properties:
namethe name of the custom fieldtypethe type of custom field, e.g.,dateortogglelabelthe label of the custom fieldvaluethe value already entered for the custom field (used on account/edit) - this can be an array depending on typeallowed_valuesan array of available values, only available for certain types (choice or list custom field types)
Below is some sample code, which should be customised to fit your needs:
{% for field in custom_fields %}
<label>{{ field.label }}</label>
{% if field.type == 'toggle' %}
<input type="checkbox" name="{{ field.name }}" value="1" {% if field.value %} checked{% endif %}><br>
{% elseif field.type == 'choice' or field.type == 'list' %}
<select name="{{ field.name }}">
<option value="">Please select...</option>
{% for value in field.allowed_values %}
<option value="{{ value }}"{% if value == field.value %} selected{% endif %}>
{{ value }}
</option>
{% endfor %}
</select>
{% elseif field.type == 'date' %}
<input type="text" name="{{ field.name }}" value="{{ field.value|date('d/m/Y') }}">
{% elseif field.type == 'value_list' or field.type == 'product_list' %}
<input type="text" name="{{ field.name }}" value="{{ field.value[0] }}">
{% else %}
<input type="text" name="{{ field.name }}" value="{{ field.value }}">
{% endif %}
{% endfor %}
For a simpler implementation, you may wish to just output the name for use in an input field. In that case, use the variable custom_fields.X.form_field_name where X is the name of the custom field. For example:
<input type="text" name="custom_fields.X.form_field_name">
Order custom fields
Order custom fields
Order custom fields can be used on orders and quotes and have other functionality not applicable to other custom fields.
Order custom fields can be referenced on the order XML feed, order status emails, order invoice PDFs in addition to your website and within your ShopWired account.
Through the order object, custom field data for customers can be returned on orders (for example on order invoice PDFs, order confirmation emails, order status emails and on your website) by utilising the format order.customer.custom_fields.X.
Custom field data for customers is not stored within an order, therefore the custom field data returned for a customer through the order object will be the custom field data as it is now - and not the custom field data as it was at the time the order was created.
Use case examples
Use case examples
Custom fields offer versatile applications within your ShopWired account and on your website. Since they are accessed through Twig, you can leverage to dynamically modify your site.
Example use cases:
- To display additional structure information about your products (e.g. a specification table)
- To modify the display of products on your website (e.g. to replace the 'add to basket' button with an 'enquire for pricing' button)
- To display/hide pages on your website depending on the type of visitor (e.g. a regular visitor or a visitor logged into a trade account)
- To render a completely different layout for pages on your website (e.g. you could have 3 separate designs and layouts for product pages)
- To render different sets of recommended products for a particular product
- To create customised content blocks that only appear for specific visitor groups (e.g., show a special promotion banner only to logged-in visitors or visitors logged into trade accounts)
- To manage complex inventory scenarios by showing alternative products when stock levels are low for certain items
- To control visibility of certain product features or descriptions, displaying them only when specific criteria are met (e.g., showing a "limited edition" label only when a custom field is toggled)
