ThemeWorking with Sections

Working with Sections

Sections are the building blocks of your store’s pages. Each one is a self-contained piece — a hero banner, a product carousel, an FAQ — that you add, remove, reorder, and configure in the theme editor. No code required.

Adding a section to a page

  1. In the Shopify admin, go to Online Store and click Edit theme on the Sideboard theme.
  2. Choose a page template from the dropdown at the top (Home page, Collection, Product, and so on).
  3. Click Add section in the left sidebar.
  4. Pick a section from the list to add it.
  5. Drag sections up or down to reorder them.
  6. Click a section to open its settings.

Section settings

Every section has its own settings. Depending on the section, these cover:

  • Content — text, images, the collection or products it shows
  • Layout — columns, alignment, spacing
  • Style — colors and fonts, which it inherits from your theme settings
  • Behavior — autoplay, animations, show or hide elements

The Section Reference lists every setting for every section, pulled directly from the theme.

Blocks

Some sections contain blocks — repeatable items inside the section. For example, each question in an FAQ is a block, each column in a multicolumn layout is a block, each image in a gallery is a block.

To work with blocks:

  1. Click the section in the editor.
  2. Click Add block (or Add [block type]).
  3. Configure the block’s settings.
  4. Drag blocks to reorder them within the section.

The header and footer appear on every page, so they’re edited separately from the rest. Click Header or Footer in the editor sidebar to configure them. The header area includes the announcement bar and the main header; the footer area includes the footer section.

Templates

Each type of page — home, product, collection, cart, and so on — uses a template that decides which sections appear and in what order. When you customize a page in the editor, you’re editing its template. You can also create alternate templates (for example, a second product layout) from the page dropdown using Create template, then assign them to specific products or collections.

Tips

  • Keep homepage section counts reasonable — very long pages with many heavy sections load slower.
  • Every section is responsive. Preview your layout on mobile using the device toggle in the editor.
  • The product section is heavy by design and is meant for product pages only.