基本操作
- 管理画面: 「オンラインストア > テーマ > カスタマイズ」から編集します。
- テンプレート切替: 上部プルダウンでホーム/商品/コレクション/ブログ/検索/カートなどを選択。
- セクション編集: 左サイドバーでセクション/ブロックを追加・並べ替え・非表示・削除。
- メディア管理: 画像/動画は「設定 > ファイル」にアップロードして選択。
- 反映確認: 保存後にプレビュー/公開で確認。
セクション共通の見た目調整
- ここを触る: 各セクションの「設定」パネル。
- よく使う項目: 幅（ページ幅/全幅）、配色、上下余白、ブロック間隔、テキスト配置。
- ヒント: 配色は「テーマ設定 > 色」で事前に作っておくと、複数セクションで統一感を出しやすくなります。
Header
- サイト最上部で告知とナビゲーションを担う領域。ブランドの第一印象と主要導線をここで整えます。
お知らせバー
- 表示: 画面上部でメッセージをスライド表示。
- 主な設定: 切替間隔、幅、配色、区切り線。
- 使う場面: セール告知や配送案内を短文でループ表示したいとき。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| 告知テキスト（ブロック） | Text | 1行メッセージ。複数追加でローテーション。 |
| 切替間隔 | Range | メッセージの自動切替速度。 |
| セクション幅 | Select | ページ幅/全幅。 |
| 配色 | Color scheme | 背景・文字色セット。 |
| 区切り線 | Checkbox/Range | 上下の境界線有無と太さ。 |
ヘッダー
- 表示: ロゴ、メニュー、検索、アカウント、ローカライズ。
- 主な設定: ロゴ位置、メニュー行構成、検索アイコン位置、国/言語セレクター、配色/余白/境界線。
- 使う場面: 常時表示のグローバルナビで主要導線を整理したいとき。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| レイアウト（位置/行） | Select | ロゴ・メニュー・アイコンの並びを選択。 |
| メニュー | Link list | メイン/サブのメニュー割り当て。 |
| 検索アイコン | Checkbox | ヘッダーに検索トリガーを表示。 |
| アカウント/ローカライズ | Checkbox | アカウントリンク、国/言語セレクターの表示。 |
| 配色/境界線 | Color scheme/Range | 配色と上下ボーダーの有無・太さ。 |
| 余白 | Range(px) | ヘッダー上下余白。 |
テンプレート
- 下記はHomepageで利用できるテンプレート（セクション）に限定したガイドです。コレクションページやブログページ専用のテンプレート機能は本マニュアルでは非表示にしています。
コレクション
- 目的: ホームで推すカテゴリやコレクション導線を並べ、回遊を促す。
- 含まれる機能: コレクションリスト、コレクションリンク、タブコレクション。
コレクションリスト
- 表示: 複数コレクションをグリッド/カルーセルで一覧化。
- 使う場面: ギフト/価格帯/テーマ別など複数カテゴリを早見で並べたいとき。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| コレクション | Collection list | 複数のコレクションを選択。 |
| レイアウト | Select(grid/carousel) | 表示形式。 |
| 列数/モバイル列/間隔 | Range | グリッドの設定。 |
| カード背景/アイコン | Color/Image | カードの飾りを設定。 |
| 表示数 | Range | 最大表示件数。 |
| 配色/余白 | Color scheme/Range | 配色と上下余白。 |
コレクションリンク
- 表示: コレクションカードとリンクを横並びで紹介。
- 使う場面: 1つのコレクションへの導線をビジュアルとテキストで強調したいとき。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| コレクション | Collection | 表示するコレクション。 |
| 画像位置/サイズ | Select/Range | カード内での画像比率や位置。 |
| 配列（左右） | Select | 画像とテキストの左右配置。 |
| 配色/余白 | Color scheme/Range | 配色と上下余白。 |
タブコレクション
- 表示: タブ切替で複数コレクションを表示。
- 使う場面: カテゴリを切替えながら同じ枠で商品を見せたいとき。
設定詳細（セクション）
| 設定 | 種別 | 説明 |
|---|---|---|
| 見出し/サブ見出し | Text/Richtext | タイトルと補足文。 |
| 見出し配置 | Select(start/center) | タイトルとタブヘッダーの横位置。 |
| レイアウト | Select(grid/carousel) | グリッドかカルーセルか。 |
| 列数 | Range(1-8) | グリッド時のPC列数。 |
| 列間隔 | Range(px) | カード間の余白。 |
| カルーセル矢印 | Select | 矢印形状（arrow/chevron/large/非表示）。 |
| 矢印枠 | Select | 矢印の囲み形（なし/円/角丸）。 |
| セクション幅 | Select | ページ幅/全幅。 |
| 配色 | Color scheme | 背景・文字色セット。 |
| 上下余白 | Range(px) | セクション外側の余白。 |
設定詳細（タブブロック）
| 設定 | 種別 | 説明 |
|---|---|---|
| タイトル | Text | タブ名。未設定時はコレクション名を自動使用。 |
| コレクション | Collection | 表示するコレクションを選択。 |
| 商品数 | Range(1-16) | 1タブ内の最大商品数。 |
| カラー継承 | Checkbox | セクションの配色を引き継ぐか。 |
| 個別配色 | Color scheme | カラー継承をオフにしたときの配色。 |
| 枠線/太さ/不透明度 | Select/Range | カード枠線の有無と太さ・透過度。 |
| 角丸 | Range(px) | カード角の丸み。 |
| 特集画像を表示 | Checkbox | 先頭に特集画像カードを追加。 |
| 特集画像 | Image | 任意の画像。無ければコレクション画像。 |
| 商品画像に合わせる | Checkbox | 特集画像を商品画像と同じ比率に揃える。 |
| 画像比率 | Select | アスペクト比（自動/縦長/正方形/円形/横長）。 |
| 特集ボタン文言/リンク | Text/URL | 特集画像上のCTA。 |
| ボタンスタイル/サイズ/配色 | Select/Select/Color scheme | CTAの見た目と配色。 |
| 商品タイトルの書式 | Select | タイトルタグ/プリセット。 |
| タイトル文字サイズ/フォント/色 | Select | タイトルのタイポ設定。 |
| タイトル幅/最大幅/揃え | Select/Text alignment | タイトル行の幅と配置。 |
| タイトル背景/角丸 | Checkbox/Color/Range | タイトル背面の色と角丸。 |
| 価格の書式 | Select | 価格表示のタグ/カスタム。 |
| 価格幅/揃え | Select/Text alignment | 価格行の幅と配置。 |
| 価格フォント/サイズ/行間/字間/ケース | Select | 価格のタイポ設定。 |
| 価格色/背景/角丸 | Select/Color/Range | 価格テキストの色と背景装飾。 |
| スウォッチ配置(PC/モバイル) | Select | カラーバリエーションの左右位置。 |
| スウォッチ余白(上下左右) | Range(px) | スウォッチ周りの内側余白。 |
ストーリーテリング
- 目的: ブランドの世界観を大きなビジュアルと文章で伝え、ホームの冒頭から印象付ける。
- 含まれる機能: ヒーロー、ヒーロービデオ、テキスト付きメディア。
ヒーロー
- 表示: 画像/動画＋テキストの大型ヒーロー。
- 使う場面: 新作ローンチやブランドメッセージの訴求に。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| メディア1/2 | Image/Video | 画像または動画を選択（左右/上下配置）。 |
| モバイル画像 | Image | スマホ用差し替え画像。 |
| レイアウト方向/高さ/幅 | Select/Range | 横並び/縦並び、セクション高さ、ページ幅。 |
| オーバーレイ | Color/Range | 画像上の色ベールと不透明度。 |
| 配色 | Color scheme | 背景・文字色セット。 |
| 余白 | Range(px) | 内側余白。 |
| ブロック（テキスト/ボタン等） | Preset | 文言・リンク・サイズを設定。 |
ヒーロービデオ
- 表示: 動画を全面に敷いたヒーロー。
- 使う場面: ブランド/コレクションムービーを強く見せたいとき。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| 動画ソース(PC/モバイル) | Video | デスクトップとモバイルの動画。 |
| 見出し/サブ見出し | Text | オーバーレイテキスト。 |
| テキスト位置/サイズ | Select | 左右/中央寄せとフォントスケール。 |
| ボタン文言/リンク/スタイル | Text/URL/Select | CTA内容と見た目。 |
| 配色 | Color scheme | テキスト/ボタンの配色。 |
| 余白 | Range(px) | 内側余白。 |
テキスト付きメディア
- 表示: 画像/動画とテキストの2カラム。
- 使う場面: ストーリー紹介や商品特徴の説明に。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| メディア | Image/Video | 画像または動画を設定。 |
| メディア位置/幅/高さ | Select/Range | 左右の位置、比率、高さを指定。 |
| テキスト配置 | Select | 左/中央/右寄せ。 |
| セクション幅/端まで拡張 | Select/Checkbox | ページ幅か全幅か、左右余白の有無。 |
| 配色/余白 | Color scheme/Range | 背景・文字色と内側余白。 |
ロゴ
- 表示: テーマ設定のロゴ（通常/反転）を単独で見せるセクション。
- 使う場面: 余白を取ってロゴを印象付けたいときや、ブランドの区切りを作りたいとき。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| 反転ロゴ | Checkbox | 反転ロゴ（テーマ設定）を使う。 |
| サイズ単位/高さ/幅 | Select/Range | px or %のサイズ調整。 |
| モバイルサイズ | Checkbox/Select/Range | スマホ時のサイズを個別指定。 |
| 配置 | Select | 左/中央/右寄せ。 |
| セクション幅/配色/余白 | Select/Color scheme/Range | 幅、配色、上下余白。 |
テキスト
- 目的: 文章・コピーをリズムよく見せて情報を強調する。
- 含まれる機能: スクロールテキスト。
スクロールテキスト
- 表示: 横に流れるテキスト/アイコン/ロゴ。
- 使う場面: USPや送料条件をリズミカルに周知したいとき。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| 方向/速度/繰り返し | Select/Range | 左右の流れ、スクロール速度、リピート間隔。 |
| 配色 | Color scheme | 背景・文字色セット。 |
| 行間/高さ | Range(px) | バーの高さや余白。 |
| ブロック: テキスト/アイコン等 | Preset | 繰り返し表示する要素を追加。 |
ブログ
- 目的: 最新記事や読み物コンテンツをホームで告知する。
- 含まれる機能: ブログ記事。
ブログ記事
- 表示: 指定ブログの記事カードをグリッド/カルーセルで表示。
- 使う場面: 読み物コンテンツの回遊を増やしたいとき。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| ブログ | Blog | 表示するブログを選択。 |
| レイアウト | Select(grid/carousel) | 表示形式。 |
| 投稿数/列数/モバイル列 | Range/Select | 最大件数と列数。 |
| 間隔 | Range(px) | カード間の余白。 |
| ナビゲーション | Select | 矢印/ドットの表示。 |
| 配色/余白 | Color scheme/Range | 背景・文字色と上下余白。 |
| ブロック: タイトル/詳細/抜粋 | Preset | 見出しやメタ情報の表示設定。 |
バナー
- 目的: キャンペーンや比較訴求を視覚的に届け、ホーム中盤のフックを作る。
- 含まれる機能: スライドショー、カウントダウンタイマー、ビフォー／アフター。
スライドショー
- 表示: 複数スライドの自動/手動切替。
- 使う場面: 複数キャンペーンやKVをローテーションで見せたいとき。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| 自動切替/速度 | Checkbox/Range | オートプレイ有無とインターバル。 |
| 高さ/幅 | Range/Select | ビューポート高さやページ幅/全幅。 |
| ページネーション/矢印 | Checkbox/Select | ドットや矢印の表示スタイル。 |
| 配色 | Color scheme | 背景・文字色セット。 |
| ブロック: スライド | Image/Video + Text | 各スライドの背景とテキスト/ボタン。 |
カウントダウンタイマー
- 表示: 期限付きキャンペーンの残り時間。
- 使う場面: セール終了や予約締切を視覚的に急かしたいとき。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| 終了日時（タイマーブロック） | Datetime | カウントダウンの終了時刻。 |
| レイアウト/配置 | Select | アイテムの並びと中央寄せ等。 |
| 配色 | Color scheme | 背景・文字色セット。 |
| ボタン文言/リンク/スタイル | Text/URL/Select | CTA設定。 |
| 上下余白 | Range(px) | セクション外側の余白。 |
ビフォー／アフター
- 表示: 2枚の画像をスライダーで比較。
- 使う場面: 効果比較やビフォーアフター実績の提示に。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| ビフォー/アフター画像 | Image | 比較用の2枚を登録。 |
| ラベル | Text | BEFORE/AFTERなどの表示文言。 |
| 画像比率/角丸 | Select/Range | アスペクト比と角の丸み。 |
| 配色 | Color scheme | 背景・文字色セット。 |
| ボタン文言/リンク | Text/URL | 下部CTAの設定。 |
フォーム
- 目的: ホームでメール登録や外部ウィジェットを案内する。
- 含まれる機能: ニュースレターポップアップ、カスタムLiquid。
ニュースレターポップアップ
- 表示: メール登録用ポップアップ。
- 使う場面: 新規訪問時にクーポン配布やメルマガ登録を促したいとき。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| 有効化/ホームのみ | Checkbox | ポップアップを出すか、ホーム限定か。 |
| 表示遅延/再表示日数 | Range | 初回表示の遅延秒数と再表示までの日数。 |
| 画像 | Image | ポップアップ内のビジュアル。 |
| 見出し/本文/ボタン | Text/URL/Select | 文言とCTAスタイル。 |
| オーバーレイ不透明度/ぼかし | Range | 背景の暗さとブラー。 |
| 配色 | Color scheme | 本体の配色。 |
カスタムLiquid
- 表示: 任意のLiquid/HTMLを挿入し、外部フォームやウィジェットを配置。
- 使う場面: 外部配信システムのフォーム埋め込みや独自UI追加に。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| Liquidコード | Liquid | 任意のマークアップを記述。 |
| セクション幅 | Select | ページ幅/全幅。 |
| 配色 | Color scheme | 背景・文字色セット。 |
| 上下余白/内側余白 | Range(px) | セクション外側と内側の余白。 |
マップ
- 目的: ホームで実店舗やポップアップストアの場所を案内する。
- 含まれる機能: 地図。
地図
- 表示: Google Mapsを利用した地図と案内情報。
- 使う場面: 店舗/会場の位置案内、経路リンクの提示に。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| APIキー | Text | Google Maps APIキー。 |
| 住所/緯度経度 | Text/Number | ピン位置を指定。 |
| ズーム | Range | 地図の拡大度。 |
| 見出し/本文 | Text | 店舗名や住所説明。 |
| ボタン文言/リンク | Text/URL | 経路案内等へのリンク。 |
| 配色/余白 | Color scheme/Range | 配色とセクション余白。 |
レイアウト
- 目的: コンテンツ間のつなぎ目や自由配置を整える。
- 含まれる機能: セクション（汎用）、区切り線。
セクション（汎用）
- 表示: テキスト/画像/ボタン/動画などを自由に組み合わせ。
- 使う場面: 既存テンプレでは足りない自由レイアウトを作りたいとき。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| レイアウト方向/揃え | Select | 横並び/縦並びと配置。 |
| セクション幅/高さ | Select/Range | ページ幅/全幅と高さ指定。 |
| 配色 | Color scheme | 背景・文字色セット。 |
| ブロック間隔 | Range(px) | 子ブロック間の余白。 |
| 上下余白/余白 | Range(px) | セクション外側・内側の余白。 |
区切り線
- 表示: セクション間の仕切り。
- 使う場面: コンテンツのブロック分けを強調し、読みやすさを上げたいとき。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| 太さ/長さ | Range(px) | ラインの厚みと幅。 |
| 位置 | Select | 左寄せ/中央/右寄せ。 |
| 角丸 | Range(px) | ライン端の丸み。 |
| 配色 | Color scheme | 線色を含む配色セット。 |
商品
- 目的: ホームでピックアップ商品やレコメンドを訴求し、PDPへ誘導する。
- 含まれる機能: 商品のハイライト、おすすめ商品。
特集コレクション
- 表示: 指定コレクションの商品一覧をカードで訴求。
- 使う場面: トップで推したいカテゴリの紹介に。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| コレクション | Collection | 表示するコレクション。 |
| レイアウト | Select(grid/carousel) | グリッドか横スライドか。 |
| 列数/モバイル列 | Range | PCとモバイルの列数。 |
| 商品数 | Range | 最大表示件数。 |
| タイトル行数制限 | Range | 商品名の折返し行数。 |
| カルーセルナビ | Select | 矢印/ドットの表示。 |
| 配色/余白 | Color scheme/Range | 背景・文字色と外側余白。 |
商品のハイライト
- 表示: 1商品の詳細を大きく訴求。
- 使う場面: 目玉商品や限定商品の単独訴求。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| 商品 | Product | 訴求する商品を指定。 |
| メディア位置/幅 | Select/Range | 画像の左右位置と比率。 |
| 配色 | Color scheme | 背景・文字色セット。 |
| バッジ/価格表示 | Checkbox | セール等の表示有無。 |
| ボタン文言/リンク | Text/URL | CTAカスタマイズ。 |
おすすめ商品
- 表示: 関連/補完商品のリスト。
- 使う場面: ホームでセット買い・関連商品の提案を行い客単価を伸ばしたいとき。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| 対象商品 | Product | おすすめの起点となる商品。 |
| タイプ | Select | 関連/補完を選択。 |
| レイアウト | Select(grid/carousel) | 表示形式。 |
| 列数/商品数 | Range | PC列数と最大件数。 |
| ナビゲーション | Select | 矢印/ドット/なし。 |
| 配色/余白 | Color scheme/Range | 背景・文字色と外側余白。 |
Footer
- サイト下部のまとめエリア。導線、信頼性、法務情報を整理して締めくくります。
フッター
- 含まれる機能: フッター、ユーティリティ、追従ボトムメニュー。
フッター
- 表示: サイト下部のリンク/フォーム/決済アイコンなど。
- 使う場面: 会社情報・サポート・SNS・決済手段をまとめ、信頼性と回遊導線を補強するとき。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| レイアウト/列数 | Select/Range | ブロックの並べ方とカラム数。 |
| 配色 | Color scheme | 背景・文字色セット。 |
| 境界線/余白 | Range(px) | 上部ボーダーと内外の余白。 |
| ブロック（メニュー/SNS等） | Preset | 各ブロックでリンクやアイコンを設定。 |
ユーティリティ
- 表示: 最下段のコピーライト/ポリシー/ソーシャル。
- 使う場面: 法務リンクや著作権表示を整理し、最低限の導線だけをコンパクトに残すとき。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| セクション幅 | Select | ページ幅/全幅。 |
| 配色 | Color scheme | 背景・文字色セット。 |
| 区切り線 | Checkbox/Range | 上境界線の有無と太さ。 |
| ブロック: コピーライト/ポリシー/SNS | Text/Link list | 表示文言とリンク先。 |
| 上下余白 | Range(px) | セクション外側の余白。 |
追従ボトムメニュー
- 表示: 画面下に固定されるアイコンメニュー（主にモバイル向け）。
- 使う場面: Home/Cart/Wishlist/Accountなどの導線を常時出したいとき。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| 背景色/文字色/アイコン色 | Color | メニュー全体の配色。 |
| バッジ色 | Color | カート/ウィッシュのバッジ配色。 |
| フォントサイズ/高さ | Range(px) | ラベルの文字サイズと高さ。 |
| 枠線 | Checkbox | 上境界線の表示有無。 |
| ブロック: Home/Cart/Wishlist/Account/Line/カスタム | Preset | メニュー項目の追加。 |
連携・注意事項
- Search & Discoveryアプリでフィルターや補完商品を設定できます。
- 商品レビュー表示には別途レビューアプリが必要です。
Tips（運用のコツ）
- 画像/動画: ヒーローは横長16:9か4:5、高さに迷ったら70vh。WebP優先、動画は短尺mp4(H.264)、モバイルは軽量版を用意。
- 配色とロゴ: 配色ごとにロゴ（通常/逆さ）を確認。暗い背景では逆さロゴを使う。
- モバイル最適化: 列数を減らし余白を詰める。追従メニューを有効化し、ヒーローはモバイル画像を別設定。
- パフォーマンス: 不要なポップアップやオートプレイをオフ。画像は事前リサイズ、動画は音声オフ＋短尺を前提に。
- アクセシビリティ: 画像代替テキストを入れる。ボタン文言は動詞から。コントラストが低い配色は避ける。
- 多言語/多通貨: ローカライズスイッチを有効にし、言語別ロゴ/コピーを確認。静的テキストは言語別で複製して出し分ける。
- 商品訴求: バリエーションが多い商品はスウォッチサイズを調整。追従カート＋クイック追加を併用するとCVR向上が期待できる。
- 検索/フィルター: Search & Discoveryでフィルター/並び替えを設定し、空状態メッセージを編集して回遊先を提示。
- よくあるつまずき: 地図はAPIキー未設定だと非表示。ニュースレターポップアップはPC/モバイル両方でテスト。動画が重いと再生が遅くなる。
公開前チェックリスト
- ナビ/フッター: リンク切れなし、法務リンクとコピーライト更新、ロゴ視認性を各配色で確認。
- 配色: 配色割当と文字コントラストをチェック。
- モバイル: 列数・余白・フォント、追従メニュー、ヒーローのモバイル画像を確認。
- 商品ページ: バリエーション選択、スウォッチ、追従カート、クイック追加、価格/通貨表示を確認。
- 検索/フィルター: Search & Discoveryの設定と空状態メッセージを確認。
- カート/チェックアウト導線: メモ・割引・送料表示、ボタン文言、挙動を確認。
- システムページ: 404とパスワードの文言と導線を差し替え済みか。
- パフォーマンス: 不要セクション/ポップアップを無効化、画像圧縮、動画は短尺に。