Skip to content

Sections overview

Sections are what a page is made of. Signal ships two families of them.

The lab-* sections are the content and marketing family — the hero, the mosaic, the countdown, the lookbook, the proof bars, the reference tables. They are the sections you add, reorder and delete freely, and they are what gives Signal its look. Every one of them has a preset, so every one shows up under Add section in the theme editor.

The commerce and system sections — product, collection, cart, header, footer, search, account, blog — are bound to a template and come preconfigured. They are documented further down this part of the sidebar.

These are tied to a template or to the layout, and are covered elsewhere in this sidebar.

AreaPages
ProductProduct page, Recommendations
CatalogueCollection, Collections list, Search
CartCart page, Cart drawer
Site frameSection groups, Header, Footer, Announcement bar
Content pagesBlog, Article, Page, Contact, Founder note, Timeline
Account & utilityCustomer accounts, Wishlist, Wishlist drawer, 404, Password, Apps

Nearly every lab-* section exposes the same two or three settings at the bottom of its panel. They are not repeated in the tables on each page unless the defaults differ.

SettingTypeWhat it does
Top spacingRange, 0–160 px, step 2Top spacing. It is the section’s own padding, not a margin, so a section on a colour plane carries its breathing room in that colour, edge to edge.
Bottom spacingRange, 0–160 px, step 2Bottom spacing, same mechanic.
Colour schemeSelect — default / plane-w / plane-dWhich ground the section sits on. Default is the coal page ground. Light (plane-w) flips the section onto the white plane and remaps the accent so text still passes contrast. Deep (plane-d) is the darker coal used to separate two dark sections.

Most sections default to 48 px top and bottom. Hero, Slideshow and Page masthead default to 0 so they sit flush under the header; Ticker defaults to 14.

A second shared setting is Image focal point (focal), on every section that crops a photograph: Top, Upper, Centre, Lower, Bottom. It decides what stays in frame when a wide image is cropped to a tall plate. Upper is usually right for anything with a face in it.

The homepage that ships with the theme is twenty sections long. It is a long page on purpose — a drop brand has to carry the story, the proof and the mechanics in one scroll — but it is also a menu. Delete freely.

  1. Hero — the headline and the one photograph that sets the season.
  2. Ticker — a marching line of short claims.
  3. Slideshow — full-bleed campaign shots.
  4. Product mosaic — the seven-plate signature layout.
  5. Promise bar → Collection plates.
  6. Drop countdown, twice — once as a banner, once as a panel.
  7. Editorial plate → Statement.
  8. Product rail → Split feature.
  9. Numbers → Reviews → Spec table.
  10. Dispatch → Image strip → FAQ → Stockists → Newsletter.
  1. In the theme editor, open the page you want to change.
  2. Click Add section in the left panel.
  3. Pick it from the list. Sections appear here only if they have a preset — every lab-* section does.
  4. Fill in its settings, then add or reorder its blocks.
  5. Drag the section to position it, and Save.

Promo popup and Age verification are rendered from the theme layout rather than from a template, so they are available on every page of the store — an age gate that only covers the homepage is walked straight past by anyone who lands on a product. You will find both at the bottom of the section list in the theme editor, on whichever page you happen to be editing. Both are off until you switch them on.