Grouping replicator sets in Statamic

2025 UPDATE

We have updated this blog post to include the new features available up to 2025 since its original publication in 2020. Statamic has native support for grouping building blocks that eliminates the need for our custom solution. You can simply group Statamic fieldsets and use them as needed.

Using Statamic CMS

We want to make sure our clients can change their website content easily without messing up the site.

Our journey led us to discover Statamic, a top-notch CMS that works well with Laravel. Statamic is very flexible. It has a lot of features ready to use, but you can also change it a lot to meet the needs of any project because it’s built on Laravel.

In this article, we’ll talk about how to organize your sets in the Replicator Field to make them easier to use.

Simplifying the replicator field in Statamic

One of our recent projects was for a client with a very complex website that had over 90 different pages. The client built each page using a bunch of pre-made blocks they could get from the Control Panel (CP). Developers who know about Statamic are aware of the problems with the Replicator Field when you have a lot of sets. Showing all the sets at once makes a really long list that can be difficult to navigate.

Before we show our new grouping method, here’s a look at the huge number of sets we first saw:

In our project we had roughly 40+ sets and the above picture is a bit hard to read.

Grouping sets in a replicator field

So how can we group all of this? Natively Statamic doesn’t support this yet although an idea was already submitted to the ideas repo. Until there is an official way to group sets, let’s take a look at our solution.

To save some time, I will assume you already have a Statamic project running, in our case we use Tailwind CSS for styling but you are free to use anything you want.

Setting up the Blueprint configuration

In the page blueprint, we have the following configuration:

As you can see for now we only have one replicator field called blocks that we will add new sets into it.

Grouping sets

We start by grouping our sets, as you saw in the picture, we have Header Sections, Featured Sections, etc.. and for now, they are ordered as 1, 2, 3 etc. But, we will start by writing just the category name in our case it will be like this:

• Header Section

• CTA Section

• Featured Section

• Logo Cloud

• Testimonial Section

• Partner Section

• Gallery Section

Here we have only 6 categories, and inside them, we can have as many variations as we want. Usually, you might have 2-3 variations for each block depending on the scale of your website. So how do we target each file in these sets? In our case, we decided to go with the button group but you are free to use select for a more compact view.

Example: Configuring the CTA section

Here is a config for one of our sections, the CTA Section:

As you can see for our CTA Section we have a button group for each version, the values of each option represent one file in our template. Basically, cta_section_1 should be under partials/sets/cta_section/cta_section_1.antlers.html but we will touch on this a bit later. Note that there is a default value on our button group, this is to mitigate any error when used in a Live Preview window.

Also very important for your button group (or if you prefer select) to have a handle name of the version as we will use this in the frontend. Our CTA Section has a title, description and a link field.

You can go into more detail and add more fields for each CTA field and then trigger their visibility by the version value but that is up to you.

Organizing files in the frontend

Here is how we organize our files in the frontend, under resources/views/ we have a folder for sets. Under sets we have the following structure:

• cta_section

  • cta_section_1.antlers.html

  • cta_section_2.antlers.html

  • cta_section_3.antlers.html

• logo_cloud

  • logo_cloud_1.antlers.html

  • logo_cloud_2.antlers.html

  • logo_cloud_3.antlers.html

You can do this for all the block categories that you have and create different versions for each one of them.

Please note that the root folder is the name of the handle, and the file names should be based on the options that you provided under versions in the config above.

Displaying sets in the frontend

To display each set in our frontend, we have to go to resources/views/pages/show.antlers.html and add the following code:

A cleaner and user-friendly interface

And now in our replicator for each section we only have the name of the category:

This is way cleaner and more user-friendly than what we had before.

In our control panel, every section is neatly displayed and you can select different versions for each section in a simple way. Here is what our CTA Section looks like with 3 versions:

Check the code and look at a basic example repo here.

Bring Your Ideas to Life 🚀

Kickstart Your Statamic Project with the #1 Statamic Agency

Are you planning a new Statamic project or thinking about migrating your WordPress site to Statamic? Learn more about our expertise as a renowned Statamic development agency.