Theme Configuration - Repeating Fields

Repeating fields let you have a set of fields that you can create multiple sets of values for. An example usage could be to list out the social networks that the company uses to display on the website with a specific icon.

Repeating Fields

Field configuration

Like all the other theme configuration fields you would set up the repeating fields in the theme.json file. Remember that fields must be organized under at least one 

For our example here we're going to set up a set of repeat fields to store social networking information. We're going to have the following fields:

  • Social network name
  • URL
  • Icon

The Icon field is a select menu. In our template, we'll use that value to output the appropriate icon.  

Below is some sample code for the theme.json file to set up the repeating fields. In this example, we're also setting some default values for the name and icon fields. The default values end up creating six sets of fields by default.

Note - setting default field values is optional. If you don't want to do that then you can simply leave that part of the code out.

{
"name": "Custom",
"settings": {
"groups": [
{
"name": "Social Icons",
"description": "Set the links and icons to use for your social networks in the footer of each page.",
"fields": [
{
"name": "social",
"label": "Social Networks",
"type": "repeating",
"itemName": "Social Network",
"children": [
{
"name": "name",
"label": "Social network name",
"type": "text"
},
{
"name": "url",
"label": "URL to your page on this social network",
"type": "text"
},
{
"name": "icon",
"label": "Icon",
"type": "select",
"options": {
"facebook": "Facebook",
"instagram": "Instagram",
"linkedin": "LinkedIn",
"pinterest": "Pinterest",
"twitter": "Twitter",
"youtube": "YouTube"
}
}
],
"default": [
{
"name": "Facebook",
"icon": "facebook"
},
{
"name": "Instagram",
"icon": "instagram"
},
{
"name": "LinkedIn",
"icon": "linkedin"
},
{
"name": "Pinterest",
"icon": "pinterest"
},
{
"name": "Twitter",
"icon": "twitter"
},
{
"name": "YouTube",
"icon": "youtube"
}
]
}
]
}
]
}
}

Using in templates

You would use the repeating fields in your templates similar to how you would use a repeating field attribute.  The only real difference is the variable where the field values are stored.

All theme settings are accessed under the _core.theme.settings variable. In our example, our repeating field has the field name of social so its value are accessed at _core.theme.settings.social.  That variable will hold an array of values for each set of child fields.

Below is an example of outputting the social icons from our above example.

{% for social in _core.theme.settings.social %}
    <a href="{{ social.url }}" title="Follow us on {{ social.name }}" class="Footer-social"><svg class="Icon"><use xlink:href="#icon-{{ social.icon }}" /></svg></a>
{% endfor %}