Overview
Analog keeps layout, spacing, type, and color in theme settings so you can control the design from the theme editor.
Analog keeps the main design decisions in theme settings. You control layout, spacing, type, and color from the theme editor. The defaults use the same scales and rules, so they work together without much adjustment.
Start with these three rules.
Pages are trees of sections and blocks
Every page is a stack of sections. Sections hold blocks, and some blocks hold more blocks. An accordion inside a Flex block inside a Custom section is normal. The same structure is used across the theme. See The section & block model.
Set globally, override locally
Set spacing, rounding, color, and type globally. Override a value on a section or block only when it needs to be different. The setting closest to the content wins. See Global settings & local overrides.
Sizes are steps on one scale
A size in Analog is one step on a 15-step scale. Each step has a phone, tablet, and desktop value. Use the same step at every breakpoint. Type sizes, gaps, page margins, and section spacing all use this system. See Scaling: size, space & rhythm.
Typography uses four font roles and shared type presets. Color uses a small set of color schemes. Set each system once and the elements that use it update together.
Pages are server-rendered Liquid. Alpine.js adds behavior on top, so the core shopping path works without JavaScript.
Start here
Core concepts: sections, blocks, settings, type, color, and scaling
Building: Pair sections, cards, the Custom section, backgrounds, and layout blocks
Features: header, search, product, collection, cart, and footer behavior
Developer platform: developer blocks, custom code, and events
Reference: Tailwind utilities, Alpine plugins, metafields, and TypeScript utilities
Last updated
Was this helpful?