A small, fast, accessible Online Store 2.0 Shopify theme. No build step, no framework, no JavaScript dependencies — just clean Liquid, modern CSS, and a handful of vanilla Web Components.
Lumen is meant to be read. It's a starting point you can actually understand end to end, not a 40,000-line theme you fight with. Every section has a real schema, every interaction is a small custom element, and the whole JavaScript bundle is ~4.5 KB gzipped.
Built and open-sourced by Velkina Studio under the MIT license.
- Online Store 2.0 — JSON templates, sections everywhere, section groups for the header and footer, theme settings, and app-block-ready section blocks.
- Cart drawer with AJAX add / update / remove, re-rendered through the Section Rendering API (with a full cart-page fallback when the drawer is disabled).
- Predictive search via the Search Suggestions API — debounced, keyboard-accessible, no library.
- Variant picker that updates price, availability, the buy button, and the URL without a page reload.
- Collection pages with native Shopify sort + storefront filtering (works with the Search & Discovery app).
- Accessible by default — skip link, focus-visible rings, semantic
landmarks,
aria-*on every interactive control, 44px+ tap targets. - Responsive images with
srcset, lazy loading, and a high-priority hero. - Theme settings for color, typography, layout, product cards, and the cart type — all editable in the theme editor.
- Passes
shopify theme checkwith the fulltheme-check:allruleset and no offenses.
- A Shopify store (any plan, or a development store).
- Shopify CLI
3.x(npm install -g @shopify/cli@latest).
Clone the theme, then start a local dev server bound to your store. The CLI hot-reloads on every save and renders against your real store data without touching your live theme:
git clone https://github.com/velkina/lumen-theme.git
cd lumen-theme
# Live-reloading local dev server
shopify theme dev --store your-store.myshopify.comOpen the printed http://127.0.0.1:9292 URL. Edit any file and the browser
updates.
Never overwrite your live theme. Push Lumen as a new theme, preview it, then publish from the admin when you're happy:
shopify theme push --unpublished --theme "Lumen"# Liquid + schema + accessibility + performance linting
shopify theme check
# Independent JSON sanity check (no CLI required)
node scripts/validate-json.mjslumen-theme/
├── assets/
│ ├── base.css # All styles. Mobile-first, ~6 KB gzipped.
│ └── theme.js # All JS. Vanilla Web Components, ~4.5 KB gzipped.
├── config/
│ ├── settings_schema.json # Theme editor settings (color, type, layout…)
│ └── settings_data.json # Default values + preset
├── layout/
│ ├── theme.liquid # Main shell: <head>, header/footer groups, body
│ └── password.liquid # Standalone shell for the password page
├── locales/
│ ├── en.default.json # Storefront strings ({{ '…' | t }})
│ └── en.default.schema.json # Theme-editor strings (t: keys in schemas)
├── sections/
│ ├── header-group.json # Header section group (announcement + header)
│ ├── footer-group.json # Footer section group
│ ├── header.liquid # Logo, nav, search, cart, mobile menu
│ ├── footer.liquid # Menus, newsletter, social, payment icons
│ ├── announcement-bar.liquid
│ ├── image-banner.liquid # Hero
│ ├── featured-collection.liquid
│ ├── featured-product.liquid
│ ├── rich-text.liquid
│ ├── image-with-text.liquid
│ ├── newsletter.liquid
│ ├── main-product.liquid # Product page (block-driven info column)
│ ├── main-collection.liquid# Collection grid + sort + filter
│ ├── main-cart.liquid
│ ├── main-search.liquid
│ ├── main-page.liquid
│ ├── main-blog.liquid
│ ├── main-article.liquid
│ ├── main-list-collections.liquid
│ ├── main-404.liquid
│ └── main-password.liquid
├── snippets/
│ ├── product-card.liquid # Grid card with hover image + badges
│ ├── price.liquid # Sale / from / unit price
│ ├── responsive-image.liquid
│ ├── cart-drawer.liquid
│ ├── cart-items.liquid # Shared by drawer + cart page
│ ├── buy-buttons.liquid
│ ├── variant-picker.liquid
│ ├── predictive-search.liquid
│ ├── pagination.liquid
│ ├── icon.liquid # Inline SVG icon set
│ └── meta-tags.liquid # Open Graph + Twitter cards
├── templates/
│ ├── index.json # Home
│ ├── product.json
│ ├── collection.json
│ ├── cart.json
│ ├── page.json
│ ├── blog.json
│ ├── article.json
│ ├── search.json
│ ├── list-collections.json
│ ├── 404.json
│ └── password.liquid # Uses layout 'password'
├── scripts/
│ └── validate-json.mjs # Standalone schema/template JSON validator
├── .theme-check.yml
├── .gitignore
├── LICENSE
└── README.md
theme.js is one IIFE built from small, independent custom elements plus a few
document-level delegated listeners. Nothing depends on anything external.
| Element / listener | Responsibility |
|---|---|
<cart-drawer> |
Open/close the slide-out cart, focus management, Escape |
<product-form> |
AJAX add-to-cart against /cart/add.js, error display |
<quantity-input> |
+/- stepper that fires a native change event |
<variant-picker> |
Resolve the selected variant, update price/URL/button |
<predictive-search> |
Debounced fetch from /search/suggest.json |
| document listeners | Cart line updates, remove, toggles, sort, filters, menu |
Cart mutations call /cart/change.js, then re-render the affected sections via
the Section Rendering API (?sections=<id>), resolving the real section id from
the shopify-section-<id> wrapper rather than guessing.
- Colors / fonts / layout — Theme editor → Theme settings. Driven by CSS
custom properties set in
layout/theme.liquid. - Home page — edit
templates/index.jsonor rearrange sections in the editor. - New section — drop a
*.liquidfile insections/with a{% schema %}and apresetsarray; it appears in the "Add section" picker automatically. - Translations — copy
locales/en.default.jsonto e.g.locales/fr.jsonand translate the values.
Lumen covers the core storefront excellently rather than every Shopify feature. Things a production store may want to add:
- Customer account templates (
templates/customers/*) and a gift-card template. - Product recommendations via the
/recommendations/productsAPI (the product template ships a static "You may also like" collection instead). - Quick-add / quick-view, product media zoom or video, and model/3D media.
- Localization form (country/language selector) and multi-currency UI.
- Metafield-driven content blocks.
These are deliberate omissions to keep the theme small and readable.
MIT © 2026 Velkina Studio. Use it, fork it, ship it, sell it.