カスタマイズとテーマ設定

Kingsbell はストア全体のグローバル設定と、各セクション固有の設定を分離しています。一貫性にはグローバル設定を、個別の内容と構成にはセクション設定を使用してください。

ブランド

主要ロゴ、反転ロゴ、80px から 320px のロゴ幅、favicon を設定できます。実際に使う背景上で両方のロゴを確認してください。

カラー

標準パレットは Obsidian、Alabaster、Paper、Graphite、Outline、Champagne、White、Error です。背景、サーフェス、テキスト、ボーダー、アクセント、ボタン、エラーの意味的な役割へ割り当てられます。

変更後はコントラスト、フォーカス、フォームエラー、無効状態、セール価格、バッジ、オーバーレイを確認します。

書体

見出しと本文のフォント、スケール、行間、字間、ボタンの大文字化を設定できます。標準は Playfair Display と Inter です。

長い実データと翻訳文字列を、特にモバイルで確認してください。

レイアウトとモーション

prefers-reduced-motion の尊重は有効のままにしてください。

ボタンとフォーム

ボタンの高さ、横余白、ボーダー、ホバー、ラベルの大文字化、および下線・ボックス型入力、フォーカスリング幅を設定できます。

タッチターゲットやキーボードフォーカスの可視性を損なわないでください。

商品カード

縦長、正方形、画像適応の比率、テキスト配置、ホバー、通貨コード、Quick Add のスタイルを設定できます。変更はコレクション、検索、レコメンドに影響します。

Flexible content

Flexible content は見出し、テキスト、ボタン、画像、統計、リソース、スペーサー、グループ、アプリブロックを使用できます。グループは 1 段階の入れ子に対応します。

ランディングページ、リソース、サービス、レポート、メンバーページに適しています。

構造化セクション

• Specification table はラベルと値の組を表示します。
• Tabbed content は JavaScript なしで連続パネルとして読めます。
• Reusable card grid は手動ブロックまたは Metaobject を使えます。

法務、安全、配送に関する重要情報をタブ内だけに隠さないでください。

ページテンプレート

page.flexible.json
page.specifications.json
page.content-library.json

Shopify ページへテンプレートを割り当て、テーマエディターでセクションを設定します。

動的ソース

Shopify が対応する場合、商品、コレクション、記事、Metafield、Metaobject を設定へ接続します。fallback を定義し、欠損データをテストし、内部用 Metafield を公開しないでください。

安全なカスタマイズ順序

1. グローバルテーマ設定。
2. セクションとブロック設定。
3. JSON テンプレート構成。
4. 共通 snippet またはブロック。
5. 新しいセクション。
6. 本当に全体へ必要な場合のみグローバル CSS または JavaScript。

大きな変更後は保存、再読み込み、代表的なリソース、モバイル、キーボード、Reduced Motion、空状態、コマースフローを確認してください。