# Layouts
### What are layouts?
Layouts bring the flexibility from Shopify's Theme Customizer to the realm of custom fields.
{% hint style="info" %}
A layout is a **definition** of which ACF sections to **show** in which **sequence** for an individual object
{% endhint %}
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.
{% hint style="info" %}
The Liquid template assigned to a page must be designed to apply a given layout from ACF (see "Liquid access to layouts" below)
{% endhint %}
### 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.
{% hint style="info" %}
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
{% endhint %}
{% hint style="info" %}
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
{% endhint %}
### 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:
```liquid
{% assign sections = shop.metafields.acf_settings.page_layouts | where: "id", page.id | first | map: "sections" | where: "visible" %}
```
{% hint style="info" %}
Adjust the Metafield name **and** the "id" parameter as needed for other scopes
{% endhint %}
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:
```liquid
{% for section in sections %}
{% case section.name %}
{% when "section_A" %}
{{ page.metafields.accentuate.header }}
{% comment %}
if section A is repeatable, use the 'section.index' to access which occurrence has been selected
{% endcomment %}
{{ page.metafields.accentuate.header[section.index] }}
{% 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:
```liquid
{{ 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](/metafield-definitions/large-sets.md), 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**:
```liquid
{% 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" %}
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://help.accentuate.io/the-editor/layouts.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.