アーキテクチャとデザインシステム

Kingsbell は Shopify Liquid、JSON テンプレート、セクション、ブロック、アセット、設定、ルート、フォームで構築された Online Store 2.0 テーマです。独立したフロントエンドフレームワークは不要です。

ランタイムディレクトリ

assets/      CSS、JavaScript、ストアフロントアセット
blocks/      再利用可能なテーマブロック
config/      グローバルスキーマと設定
layout/      ドキュメントレイアウト
locales/     ストアフロントとエディターの翻訳
sections/    設定可能なセクション
snippets/    再利用可能な Liquid 単位
templates/   JSON と Liquid テンプレート

.design、文書、QA スクリプト、コンパニオン契約はランタイム外です。

アーキテクチャ層

1. Foundation — トークン、フォント、基本スタイル、メタデータ、アイコン、アクセシブルな基本要素。
2. Commerce engine — 商品、バリアント、フォーム、カート、フィルター、検索、価格。
3. Template system — Standard、Editorial、Archive、Commission、Private の構成。
4. Content system — ブログ、記事、ギャラリー、引用、インタビュー、注記、カード。
5. Companion boundary — メンバー表示と独立した認可仕様。

視覚セクションにカート処理を複製せず、Liquid 条件をサーバー認可として扱わないでください。

ビジュアルシステム

標準では Obsidian と Alabaster、控えめな Champagne アクセント、見出しの Playfair Display、本文の Inter、シャープな形状、広い余白、12 カラムの編集グリッド、商品写真中心の表現を使用します。

カラー

コンポーネントは背景、サーフェス、テキスト、ボーダー、アクセント、エラーの意味的な役割を使用します。

書体とレイアウト

グローバル設定でフォント、スケール、行間、字間、ページ幅、本文幅、余白、ガター、セクション間隔、角形状を制御します。

標準値はページ幅 1440px、本文幅 780px、ガター 32px、セクション間隔 120px です。

視覚サイズとは独立して、意味的な見出し階層を維持してください。

テーマブロック

見出し、テキスト、ボタン、画像、統計、リソースカード、スペーサー、グループを再利用できます。Flexible content はアプリブロックにも対応します。

グループの入れ子は 1 段階に限定され、テーマエディターの理解しやすさを保ちます。

段階的拡張とアクセシビリティ

重要な内容は JavaScript なしでも利用できます。タブは連続パネルとして読め、Reading Progress は任意で、アニメーションは Reduced Motion を尊重します。

基盤にはスキップリンク、可視フォーカス、フォーカス可能な main、意味的なコントロール、alt 処理、キーボード操作が含まれます。

テーマエディターのライフサイクル

Shopify はセクションを個別に再読み込みします。JavaScript は load、unload、ブロック選択、重複しない再初期化に対応する必要があります。

.design は視覚資料であり、本番依存関係ではありません。