Sections and blocks

Every page in Kyoto is a stack of sections, and most sections are made of blocks. You add, hide, move and remove both in the theme editor's left sidebar. Nothing you do there changes your products or your other pages' content.

How to add a section or block

1. Open the theme editor and choose the page type from the menu at the top (Home page, Products, Collections and so on).
2. In the left sidebar, select Add section where you want it, then pick a section. Many sections offer several ready-made versions (for example Collection list: color fields or Collection list: round windows).
3. To add a block, open the section and select Add block inside it.
4. Drag sections and blocks by their handle to reorder them. Use the eye icon to hide one without deleting it.

Kyoto has 100 sections you can add and over 150 blocks. The complete list by page is at the end of this page.

Choosing sizes

Kyoto lets you choose the size of almost every part of a section. Size settings come in two forms:

• A slider with an exact range, such as Object size: 24 to 60 % or Text width: 280 to 720 px. Slide it or type the number.
• A choice of steps, such as Heading size: Small, Medium, Large, Extra large, Extra extra large, Maximum. Steps are tuned to look balanced on every screen width, so they are the quickest way to a good result.

Some sections and blocks group their size controls under a checkbox such as Adjust sizes and motion or Show more settings. Turn it on to see every size control; turn it off again and the part goes back to its balanced defaults while your choices are kept.

Sizes adapt to the screen. Sizes in px are the size on large screens; headings and display type shrink smoothly on smaller screens, and many sections have separate settings for phones (for example Height on mobile, Columns on mobile, Size on phones).

Size settings at a glance

Standard section settings

Most sections share these settings, so they are described here once.

Shared blocks

Blocks such as Text, Buttons, Image, Video, Icon with text, Quote, Group, Spacer, Seal, Sticker, Countdown, Accordion, Email signup, Contact form, Social media links and Custom liquid work the same in every section that accepts them. Their settings are in Shared blocks.

The Group block holds other blocks side by side or stacked, with its own spacing (0 to 96 px), border and color scheme. Use it inside Custom section to build layouts the other sections don't cover.

App blocks

Sections that show App blocks from apps you install in the list accept blocks from your apps. Add them with Add block > Apps. To place an app on its own, add the Apps section. Kyoto takes apps through app blocks and app embeds only (the App embeds panel of the theme editor), so as long as nobody has edited the theme code, removing an app leaves no code behind in the theme.

Every section by page

Each page below lists every section, what it is for, every size setting with its full range and default, the remaining settings, and the blocks it takes.