# Sections

## Sections

Each `li-settings` tag needs to be enclosed within a section. For this purpose, use the `li-section` tag, which can be applied to your Webflow sections. You have the flexibility to choose a name for it, with a maximum limit of 30 characters.

{% code title="Webflow" fullWidth="false" %}

```
li-section = Section Name
```

{% endcode %}

{% columns %}
{% column %}

<figure><img src="https://497333298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FheMDp56vLoqqIp7IZZ2W%2Fuploads%2FBZRJeneCbn1xZWwnApcj%2F653989b2f3a01a7ebf14a588_Bildschirmfoto%202023-10-25%20um%2023.33.21.webp?alt=media&#x26;token=58e74a08-9f83-4a3b-b0ba-6e247d5e3c96" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="https://497333298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FheMDp56vLoqqIp7IZZ2W%2Fuploads%2FSHZXHGRBiZGbDMwY9Cu3%2F65398aa05ed2be4556aae9cd_Bildschirmfoto%202023-10-25%20um%2023.37.02.webp?alt=media&#x26;token=83fee70c-bc5c-47c4-b3ec-3e719d1b8267" alt=""><figcaption></figcaption></figure>

{% endcolumn %}
{% endcolumns %}

#### Section Categories

For a better overview in the Shopify Editor, you can add a section to a category by adding the attribute li-section:category. The value of this attribute will then be the name of the category.

{% code title="Webflow" fullWidth="false" %}

```
li-section:category = Category Name
```

{% endcode %}

<figure><img src="https://497333298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FheMDp56vLoqqIp7IZZ2W%2Fuploads%2F2o1ySTOSR7vPokhpVxiF%2Fcategorys.png?alt=media&#x26;token=27676ee3-1c9e-4fb9-bfc7-0264f8facbe3" alt=""><figcaption></figcaption></figure>

## **Section Groups**

[Section groups](https://shopify.dev/docs/storefronts/themes/architecture/section-groups) are typically used for the header and footer. They are JSON data files that define a list of sections and app blocks along with their settings. Merchants can add, remove, and reorder these sections within the theme editor.

Simply add the `li-section-group` attribute to a `<div>` element and place your sections inside it — for example, the Navigation section.

{% code title="Webflow" fullWidth="false" %}

```
li-section-group = Section Group Name
```

{% endcode %}

{% hint style="warning" %}

* Section groups are not allowed inside the `li-content-for-layout` element
* Section groups cannot have the same name as other section
* Changes made to the section group will be reflected on all pages where the group is used
  {% endhint %}

To define the type of a section group, use the `li-section-group:type` attribute. This helps Shopify determine where the section group is used. Accepted values:

* `header`
* `footer`
* `aside`
* A custom type, in the format `custom.<name>`, where `<name>` is a unique identifier for your section group type.

{% code title="Webflow" fullWidth="false" %}

```
li-section-group:type = header
```

{% endcode %}

## **Enable or disable Sections in the Shopify Editor**&#x20;

**Enable**: If you want to show certain sections only on specific templates, you can use the tag modifier `li-section:on_templates`. In the value, list all the templates where the section should be shown, separated by commas. To show the section on all templates, just use `*`.

See the official [Shopify documentation](https://shopify.dev/docs/storefronts/themes/architecture/sections/section-schema#enabled_on) for more information on this topic.

{% code title="Webflow" %}

```
li-section:on_templates = page, product
```

{% endcode %}

You can do the same for section groups using the tag modifier. To target all groups, just use `*` in the value.

{% code title="Webflow" %}

```
li-section:on_groups = footer, header
```

{% endcode %}

**Disable**: If you want to hide certain sections on specific templates, use the tag modifier `li-section:off_templates`. List the templates (comma-separated) where the section should be hidden. To hide the section on all templates, use `*` in the value.

See the official [Shopify documentation](https://shopify.dev/docs/storefronts/themes/architecture/sections/section-schema#disabled_on) for more information on this topic.

{% code title="Webflow" %}

```
li-section:off_templates = page, product
```

{% endcode %}

You can do the same for section groups using the tag modifier. To target all groups, just use `*` in the value.

{% code title="Webflow" %}

```
li-section:off_groups = footer, header
```

{% endcode %}