Theme Overview
EverShop theme overview document. Learn what themes are, where they're located, and how to develop custom themes for your store.
The View System
EverShop utilizes React to render views with server-side rendering followed by client-side hydration. This architecture creates interactive pages while enabling developers to extend the view system without modifying core code.
Styling
Learn how to style your EverShop themes using CSS, SCSS, and TailwindCSS v4. This guide explains different styling approaches and how to implement them in your components and pages.
Templating
A comprehensive guide on customizing EverShop's default templates using React components. Learn how to override existing components or add new ones to create a unique store appearance.
Images
How EverShop 2.2.1 derives storefront image dimensions from the store's configured catalog aspect ratio, and what a theme must do differently.
Accessibility
Core components carry accessibility behaviour that a theme silently reverts when it forks them. This page documents each contract and how to keep it.
Theme Content
How a theme ships its storefront widgets and placements in theme.json, how EverShop versions installs and upgrades, and the full theme CLI reference.
Using Metafields
Declare custom fields in your theme's theme.json and render their values on the storefront with the Metafield component.
Page Builder Primitives
The @components/common/page-builder surface — Editable, widget context, settings scoping, and the two-surface rule that makes list settings crash if you read them naively.