Best practices
These pages collect the conventions that make a YouCan theme fast, customizable, and maintainable. They're drawn from the themes YouCan ships and from what the platform's Liquid and theme editor actually support.
Principles
Render on the server. Anything a customer needs to see, and anything a search engine needs to index, should come out of Liquid as HTML. Reach for JavaScript to enhance what's already rendered, not to produce it.
Let sellers customize, within limits. Every decision you hard-code is one a seller can't make, and every setting you expose is one they can get wrong. Expose the choices that matter for the theme's purpose, give them sensible defaults, and constrain the rest.
Build for mobile first. Most storefront traffic is mobile. Design and measure there before you widen the layout.
Keep the theme small. Each stylesheet, script, and font is a request the customer waits on. Ship what the page needs and nothing else.
Pages
| Page | Covers |
|---|---|
| Sections and blocks | How to split a page into sections and blocks, and how much to expose. |
| JavaScript and styles | Where theme assets live, how to load them, and how to scope them. |
| Events and actions | Cart and checkout actions, theme pub/sub, and storefront pixel events. |
| Performance | Images, scripts, styles, fonts, and Liquid that stays cheap to render. |
| Accessibility | Semantics, keyboard support, and text direction. |
| Theme editor | Making a theme behave well while a seller is customizing it. |
| Version control | What to commit, what to ignore, and how to handle build output. |