Skip to content
Signal Theme Docs

Introduction

Signal is a Shopify theme for brands that release product in drops — a dated run of a fixed number of units, sold until it’s gone, then retired. Everything in the theme leans into that: a countdown you point at the next release, a run counter under the add-to-bag button, an announcement bar for the drop date, and copy defaults that talk about runs rather than restocks.

It’s built on Online Store 2.0 and derived from Shopify’s Skeleton theme, so every page is composed from sections in the theme editor, and the product page is composed from theme blocks.

The design language

Section titled “The design language”

The theme’s visual system is called LAB. Four rules hold it together:

  • Coal grounds. The page sits on a near-black background (#272727), with a deeper plane (#1e1e1e) for the drop banner, mega menu panel and sticky bar.
  • White planes. Full-bleed white blocks — the hero type panel, the newsletter, the footer wordmark — interrupt the dark and carry the loudest type.
  • One accent. A single burnt orange (#d56a40) does all the signalling: hairlines, buttons, labels, the ticker. Nothing else competes with it.
  • Hard edges. No rounded corners, no soft shadows, no gradients. Condensed display type (Anton by default) set large, with Inter for everything you actually read.

You can repoint every one of those colors and both typefaces in theme settings — the structure survives a rebrand, which is the point of having a system rather than a look.

Who this is for

Section titled “Who this is for”
  • Merchants setting the theme up on a store. Start at Installation, then Quick start. Pages and templates is the step most people miss — the theme ships nine ready-made page templates that do nothing until you create a page and assign them.
  • Designers adapting it to a brand. The whole palette, both typefaces, the page margin, gutter, section rhythm and the motion strength are theme settings. Per-section color schemes let you alternate coal, white and deep planes down a page.
  • Developers extending it. Each section carries its own styles and behaviour, the product page reaches its product through closest.product so blocks nest freely, and the interactive layer is ES modules behind an import map with a small custom-element base class.

What’s covered

Section titled “What’s covered”
Installation Upload the ZIP, or push from the Shopify CLI.
Quick start The five steps from upload to a store that looks like the demo.
Theme editor tour Where everything lives in the customizer, including the parts that aren't on a page.
Navigation and menus The main menu, the mega panel, the mobile drawer and the footer menus.
Pages and templates The nine page templates and which page each one belongs to.
Demo content Collections, products, images and metafields the demo expects.

Conventions used in these docs

Section titled “Conventions used in these docs”
  • Inline code like free_shipping_threshold is a setting id — the name used in config/settings_schema.json, which is what you’d search for in the theme code.
  • File paths like sections/lab-hero.liquid appear only where a developer would need them.
  • Admin paths are written as Online Store → Themes → Customize.
  • Section names are given as they appear in the theme editor’s “Add section” list — for example Drop countdown, not lab-countdown.

Need help?

Section titled “Need help?”