Sections overview

How sections and blocks work in Index, the settings every section shares, and an index of every section and block with a link to its documentation.

Sections and blocks

A page in the theme editor is a list of sections. Add one with Add section between any two sections, drag sections to reorder them and use the eye icon to hide one without deleting it. Most sections contain blocks, such as the slides of a slideshow or the questions of a FAQ.

Sections can be added to any page template: the home page, product and collection templates, pages and the blog.

Settings every section shares

Most sections end with the same groups of settings:

• Color scheme: one of the six color schemes from Theme settings › Colors. See Color schemes.
• Section spacing: top and bottom padding, separately for desktop and mobile.
• Grid spacing (grid sections): turn on Use custom spacing to change the gaps between columns and rows in this section only. Otherwise the spacing from Theme settings › Layout is used.
• Hide on mobile and Hide on desktop: show a section only on one kind of screen. Mobile means below the width where the header switches to the mobile menu (Header › Switch to the mobile menu below).
• Animate on scroll: turns the reveal animation off for this section. The animation itself is set in Theme settings › Animations.
• Anchor ID: link to the section with #anchor-id, for example from a button at the top of the page that scrolls down to the FAQ.
• Show part of the next card (sliders): the next card shows in part and the edges fade, so it is clear that the row goes on.

Where to find each section

The sections are grouped by what they do:

Every section and block

The names below are the ones you see in the theme editor. Each links to its own page.