Layouts

What are layouts?

Layouts bring the flexibility from Shopify's Theme Customizer to the realm of custom fields.

A layout is a definition of which ACF sections to show in which sequence for an individual object

Layout functionality is available for objects within the following scopes:

• Products

• Collections

• Pages

• Blogs

• Articles

When to use a layout

Say you have defined a field structure for pages with 3 sections A, B and C each with their own fields for images, text, etc. One is a header with a gallery, the next is a header with images for two columns, etc. The sequence of the defined sections and fields determines how the fields are shown in the ACF editor:

Using layouts, it is possible to assign specific sections and a specific ordering of these sections to individual pages. This allows you to define a common "fits all" field structure and reuse this across different pages with each page's specific usage in mind.

The Liquid template assigned to a page must be designed to apply a given layout from ACF (see "Liquid access to layouts" below)

How to create a layout

Creating a layout is easily done from within the ACF editor. When editing custom field values for a certain object ("Page 1" in our example), click the "Turn layout mode on" button to enable the layout functions for that specific object.

While in "Layout mode", you can still edit data, but the normal editor controls to handle repeatable sections are replaced with controls for you to drag the individual sections to the preferred layout sequence as well as turn on or off their visibility. Layout mode is also indicated by a subtle change in the background color. So "Page 1" can now choose to show sections B and A (in that particular order) but not section C, if it's not relevant for this particular page:

When you click "Save" both changes in data as well as the layout are saved.

When no layout is defined for an object, all sections show in their default sequence and also as "not visible". You have to set at least one section as "visible" for a layout to be created

Selected sections can be excluded from being part of the layout editor. If you have one or more sections with fields that are more "static" in nature, you can check the "Exclude from layout" checkbox in the section definition

Liquid access to layouts

Layouts are stored in special shop-level Metafields. To make a Liquid template "layout-aware", you'll need to find the specific object's id within this Metafield and further filter by each section's visibility setting. This is the general format you can use - note that each scope's Metafield name is different, this example uses the layouts stored for pages using page.id for the 'where' condition:

{% assign sections = shop.metafields.acf_settings.page_layouts | where: "id", page.id | first | map: "sections" | where: "visible" %}

Adjust the Metafield name and the "id" parameter as needed for other scopes

This Liquid assignment will return an array of the visible section(s) defined for the current page, so you can loop them and display each section's fields as per your design:

{% for section in sections %}
  {% case section.name %}

    {% when "section_A" %}

       <h3>{{ page.metafields.accentuate.header }}</h3>

       {% comment %}
       if section A is repeatable, use the 'section.index' to access which occurrence has been selected
       {% endcomment %}

       <h3>{{ page.metafields.accentuate.header[section.index] }}</h3>

    {% when "section_B" %}

    {% when "section_C" %}

    {% endcase %}
{% endfor %}

With the above implementation, the template now respects both the sequence of sections for a certain page as well as their defined visibility.

Tip: you can inspect a page's layout using this:

{{ sections | json }}

Handling a large number of layouts for a scope

If you define a large number of layouts e.g. for products, you may run into Shopify's limit of 100,000 characters in a single Metafield.

Similar to ACF's handling of large sets of repeatable fields, you can enable "large sets" for layouts as well in the Settings dialog from the ACF dashboard. This setting is not enabled by default, because it requires a subtle change to your theme.

If any layouts have been saved with "large sets" enabled, the original Metafield no longer contains the actual data items but rather is a "reference object" with references to the actual data Metafields. So now there is a 2-step process in Liquid to find your layout for a specific product:

{% assign layout = shop.metafields.acf_settings.product_layouts | where: "id", product.id | first %}
{% assign sections = shop.metafields.acf_settings[layout.metafield][layout.index] | map: "sections" | where: "visible" %}