New article
by Pedro Matanzo
·
There is a new way in liquid to access the order of sections.
**section.index** - the 1-based index of the section within its contextual location.
**section.index0** - the 0-based index of the section within its contextual location.
**section.location** - the location of the section (this can also be considered the context or scope of the section).
**What is section.location?**
Before exploring index properties, it's important to understand what location means. Sections can be rendered in a variety of locations. Most sections are rendered in the template, but many are also rendered within section groups:
A store mockup showing an ad and navigation within a header section group, the template with typical image/text sections, and a footer section group.
A common layout includes a header section group, the template (content for the layout), and a footer section group. When the section is inside the template, its section.location will be "template". When the section is inside a section group, its section.location will be the type of section group, which can be "header", "footer", "aside", or "custom.<name>".
Templates and section groups cover most section placements, but there is one last placement type, which is "static", for statically rendered sections:
Same layout, but now there is a separate section between the header section group and the template.
Static sections are outside of templates and section groups. If you have a legacy theme that still uses "content_for_index", the location will be "content_for_index".
**What are section.index and section.index0?**
Both index and index0 are integers representing the index or order of the section within its location. To be consistent with previous Liquid features, index is the 1-based index, while index0 is the 0-based index.
In other words, the index is reset within each location or context. For example, suppose we have a page with the following layout:
- Header group
- Advertisement section
- Navigation bar section
- Static section
- Template
- Image section with text
- Another image section with text
- Featured Articles Section
- Footer group
- Footer section
The location and indexes would be as follows:
| Section | Location | Index | Index0 |
|-------------------------|--------|--------|--------|
| Ad Section | Header | 1 | 0 |
| Navigation Bar Section | Header | 2 | 1 |
| Static section | Static | N/A | N/A |
| Image section with text | Template | 1 | 0 |
| Another image section with text | Template | 2 | 1 |
| Featured Articles Section | Template | 3 | 2 |
| Footer Section | Footer | 1 | 0 |
Warning! Both index and index0 are null in the following cases:
- For statically rendered sections.
- For sections rendered using the Section Rendering API.
- When rendering the Online Store Editor.
The Online Store Editor is optimized for fast rendering by re-rendering only the section that was updated. This means that if we were to provide the index, it would not be consistent. Therefore, both index and index0 will be forced to be null when rendering in the Online Store Editor. These new features should be used only for non-visual reasons, such as optimizing loading speed for real users.
**Examples of usage and code for the new section properties**
Before we begin, remember that we only need to apply lazy loading to images that are below the fold or not visible until interacted with (e.g. opening a menu). If an image will always be visible above or near the fold, it's best to eager load it. For example, your main product image should probably be eager loaded.
The use case for selectively applying eager or lazy loading is for sections that can be reused across different templates and section groups. Indexes will be null for all other sections.
**Lazy loading of an image based on section.index**
Remember that the default behavior of image_tag is to set lazy loading for images after the first three sections, currently. This example manually sets it to lazy loading after the first two sections to show how that behavior could be overridden:
```
{%- liquid
if section.index > 2
assign loading = "lazy"
else
assign loading = "eager"
endif
-%}
{{
section.settings.image
| image_url: width: 1080
| image_tag: loading: loading
}}
```
**Asynchronous CSS loading based on section.index**
Another issue we see on Shopify stores is layout shifts due to late CSS arrival, using the asynchronous CSS "trick". If you still want to use that trick, but limit it to sections further down the page so it doesn't affect Cumulative Layout Shift (CLS), you can use section
**section.index** - the 1-based index of the section within its contextual location.
**section.index0** - the 0-based index of the section within its contextual location.
**section.location** - the location of the section (this can also be considered the context or scope of the section).
**What is section.location?**
Before exploring index properties, it's important to understand what location means. Sections can be rendered in a variety of locations. Most sections are rendered in the template, but many are also rendered within section groups:
A store mockup showing an ad and navigation within a header section group, the template with typical image/text sections, and a footer section group.
A common layout includes a header section group, the template (content for the layout), and a footer section group. When the section is inside the template, its section.location will be "template". When the section is inside a section group, its section.location will be the type of section group, which can be "header", "footer", "aside", or "custom.<name>".
Templates and section groups cover most section placements, but there is one last placement type, which is "static", for statically rendered sections:
Same layout, but now there is a separate section between the header section group and the template.
Static sections are outside of templates and section groups. If you have a legacy theme that still uses "content_for_index", the location will be "content_for_index".
**What are section.index and section.index0?**
Both index and index0 are integers representing the index or order of the section within its location. To be consistent with previous Liquid features, index is the 1-based index, while index0 is the 0-based index.
In other words, the index is reset within each location or context. For example, suppose we have a page with the following layout:
- Header group
- Advertisement section
- Navigation bar section
- Static section
- Template
- Image section with text
- Another image section with text
- Featured Articles Section
- Footer group
- Footer section
The location and indexes would be as follows:
| Section | Location | Index | Index0 |
|-------------------------|--------|--------|--------|
| Ad Section | Header | 1 | 0 |
| Navigation Bar Section | Header | 2 | 1 |
| Static section | Static | N/A | N/A |
| Image section with text | Template | 1 | 0 |
| Another image section with text | Template | 2 | 1 |
| Featured Articles Section | Template | 3 | 2 |
| Footer Section | Footer | 1 | 0 |
Warning! Both index and index0 are null in the following cases:
- For statically rendered sections.
- For sections rendered using the Section Rendering API.
- When rendering the Online Store Editor.
The Online Store Editor is optimized for fast rendering by re-rendering only the section that was updated. This means that if we were to provide the index, it would not be consistent. Therefore, both index and index0 will be forced to be null when rendering in the Online Store Editor. These new features should be used only for non-visual reasons, such as optimizing loading speed for real users.
**Examples of usage and code for the new section properties**
Before we begin, remember that we only need to apply lazy loading to images that are below the fold or not visible until interacted with (e.g. opening a menu). If an image will always be visible above or near the fold, it's best to eager load it. For example, your main product image should probably be eager loaded.
The use case for selectively applying eager or lazy loading is for sections that can be reused across different templates and section groups. Indexes will be null for all other sections.
**Lazy loading of an image based on section.index**
Remember that the default behavior of image_tag is to set lazy loading for images after the first three sections, currently. This example manually sets it to lazy loading after the first two sections to show how that behavior could be overridden:
```
{%- liquid
if section.index > 2
assign loading = "lazy"
else
assign loading = "eager"
endif
-%}
{{
section.settings.image
| image_url: width: 1080
| image_tag: loading: loading
}}
```
**Asynchronous CSS loading based on section.index**
Another issue we see on Shopify stores is layout shifts due to late CSS arrival, using the asynchronous CSS "trick". If you still want to use that trick, but limit it to sections further down the page so it doesn't affect Cumulative Layout Shift (CLS), you can use section