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.

Webflow

li-section = Section Name

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.

Webflow

li-section:category = Category Name

Section Groups

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.

Webflow

li-section-group = Section Group Name

• 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

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.

Webflow

li-section-group:type = header

Enable or disable Sections in the Shopify Editor

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 for more information on this topic.

Webflow

li-section:on_templates = page, product

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

Webflow

li-section:on_groups = footer, header

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 for more information on this topic.

Webflow

li-section:off_templates = page, product

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

Webflow

li-section:off_groups = footer, header