TOGE のセットアップ
TOGE は、小さなメーカーブランドのためのテーマです。商品ごとにひとつのストーリー、生地の解説、フィールド写真、そしてドロップ（限定販売）を扱います。テーマが持ち運べるのは、レイアウトとサンプルの文章だけです。商品、写真、メニュー、メタフィールドはストアの側にあるため、インストールした直後は空っぽに見えます。このガイドでは、効果の大きい順に、何を追加すればよいかを説明します。
以下はすべて Shopify 管理画面で行います。コードを書く必要はありません。Shopify のふつうの操作は、ここでは繰り返さず、Shopify ヘルプセンターにリンクしています。
1. このガイドで使う言葉
2. 最初の 10 分
- テーマをアップロードする: オンラインストア → テーマ → テーマを追加 → zip ファイルをアップロード。ホームページの見た目が整うまでは公開しないでおきます。公開前のテーマも「カスタマイズ」でプレビューできます。
- ロゴ: テーマエディタ → ヘッダー。ロゴ画像をアップロードするか、空のままにしてストア名をテキストで表示します。（ホームページの山のマークは TOGE 自身のロゴです。差し替えるには
snippets/logo.liquidを編集するか、Hero セクションの「写真の上にロゴ」をオフにします。） - メインメニュー: コンテンツ → メニュー → メインメニュー。ヘッダーには、ヘッダーセクションで選んだメニューが表示されます（初期値:
main-menu）。入れ子にしたメニューは、3 段までドロップダウンで開きます。 - ホームページのヒーロー: テーマエディタ → Hero。横長の写真を追加します（2:1、幅 2400 px あれば十分です）。切り抜きがうまくいかない場合は、スマートフォン用に 4:5 の写真を別に追加します。写真が明るい場合は「写真の上の文字色」を「墨」にします。
これだけで、完成した見た目のストアになります。
3. テーマの設定
テーマエディタ → テーマ設定。ストア全体に効きます。
| 設定 | 内容 |
|---|---|
| 色 | 配色は 2 つです。配色 1 が明るい色、配色 2 が暗い色です。ニュースレターの帯などのセクションは、どちらかを選びます。配色ごとに、背景・文字・罫線・面・アクセント・リンク・ボタンの色があります。 |
| 書体 | 本文と見出しの書体です。どちらも標準・中太・太字を読み込みます。Shopify の書体ならどれでも使えます。 |
| レイアウト | ページの最大幅と、左右の余白です。 |
| 入力欄の角 | 入力欄とボタンの角の丸みです。 |
| ファビコン | ブラウザのタブに出る小さなアイコンです。正方形で 32 px 以上。 |
4. テーマが探すメニューとページ
フッターとサポート系のページは、ハンドルを手がかりに内容を拾います。以下のハンドルで作成すると自動的に表示されます。作らなければ、その部分は表示されないだけです。
| 何を | どこで | ハンドル |
|---|---|---|
| フッターのメニュー列 | コンテンツ → メニュー | 任意のメニュー。フッター → ブロックで選びます |
| ジャーナル | ブログ記事 | ブログ news |
| About ページ | ページ、テンプレート page.about | about-us |
| サポートページ | ページ、テンプレート page.support | support |
| お問い合わせページ | ページ、テンプレート page.contact | contact |
| フッターに表示される法的ページ | 設定 → ポリシー | プライバシー、利用規約、返金、配送 |
| 追加の法的ページ（日本向け） | ページ、テンプレート page.policy | tokushoho, cancellation |
ページは、オンラインストア → ページ → ページを追加 で作ります。タイトルを入れ、右側の「テーマテンプレート」でテンプレートを選び、「検索エンジンリスティング」でハンドルを確かめます。
法的ページの中身は、設定 → ポリシー で書きます。フッターには、書いてあるものだけリンクが出ます。
tokushoho（特定商取引法に基づく表記）と cancellation（キャンセルについて）は、日本の法律でネットショップに求められるページです。日本で販売しないなら作らなくてかまいません。page.policy のテンプレートは、どのページもポリシーと同じ見た目で表示します。
About・サポート・お問い合わせのページはセクションで組んであるので、文章や写真はページの本文ではなく、テーマエディタで編集します。お問い合わせフォームの送信は、ストアの送信者メールアドレスに届きます。ニュースレターの帯から登録した人は、顧客一覧に newsletter のタグ付きで入ります。
5. ホームページ
| セクション | 必要なもの |
|---|---|
| Hero | 写真（上記参照）。見出し、リード文、リンクはセクションの設定です。 |
| コレクション（フィーチャーバンド） | メタフィールド ホームのフィーチャーに表示 をオンにしたコレクション（§8 参照）。コレクションが 1 つなら静止したバンド、2〜5 つならカルーセルになります。ひとつもない場合は、セクション自身のテキストと写真の設定が使われます。 |
| New arrivals | セクションでコレクションを選びます。デスクトップでは 3 商品、スマートフォンでは 4 商品を表示します。 |
| Story | 写真、または短いループ動画（コンテンツ → ファイル でアップロードした mp4。音は出ません）。テキストは画像の上に重なります。「文章を写真の上に」をオフにすると画像の下に置かれます。 |
| Journal | ブログを選びます。最新 3 記事を表示します。 |
| 最近見た商品 | 訪問者のブラウザから自動で埋まります。設定は不要です。 |
「セクションを追加」で、ほかのセクションも置けます。注目の商品（1 つの商品を、写真・オプション・カートのボタンごと見せる）、よくある質問、サポートの案内、お問い合わせ、それにもう 1 つの Story・コレクション・New arrivals・Journal です。ニュースレターの帯はフッターの一部なので、すべてのページに出ます。
6. 商品
商品ページは、タイトル、価格、写真、オプションだけの普通の商品でも動きます。以下の項目はそれぞれ、ページにひとつずつ部品を追加します。すべて任意で、空の部分はページ上で非表示になります。
ページの並び
上から: メイン写真とキャッチコピー → 商品名・オプション・価格・カートと詳細のアコーディオン → 一緒に使う商品 → 商品写真 → ストーリー → 生地の章 → 注記 → フィールド写真 → 関連商品 → 最近見た商品。「一緒に使う商品」から下は、それぞれがテーマエディタのセクションなので、並べ替えたり外したりできます。
上の部分は、商品ページ（TOGE） セクションのブロックで変えられます。
- 色とサイズ ブロック: どのオプションが色とサイズか（下を参照）、「残りわずか」を出す在庫数、サイズの見出し、サイズ表のページ。
- 数量 ブロック: 1 回に買える上限（0 なら上限なし）と、数量の注記。
- カート ブロック: すぐ買うボタン（Shop Pay など）と、ギフトカードの贈り先の欄。
- アコーディオン ブロック: 詳細の 1 行ずつです。店のポリシー、商品の説明、ケアガイド、サイズ表、素材・生産を出せます。
オプションと写真
- カラーとサイズ は名前ではなく 位置 で判定されるため、オプション名は Color でも Colour でも カラー でもかまいません。1 番目と 2 番目でない場合は、商品ページ（TOGE）セクションの「色のオプション位置」「サイズのオプション位置」（1〜3）を設定します。
- 3 つ目のオプション（丈、フィットなど）も、ボタンで選べます。設定は不要です。
- カラータイル には、各カラーの最初のバリエーションの写真が使われます（縦長 4:5、1080 × 1350 がきれいに収まります）。同じカラーのバリエーションにはすべて同じ写真を設定してください。
- メイン写真: 上部の大きな写真はメタフィールド custom.hero_image、なければ商品の最初の写真です。商品写真ではなく「世界観」を伝える写真を想定しています。
- ギャラリー: カラータイルに使われていない商品写真は、ストーリーの下に並びます。商品に追加した動画、YouTube・Vimeo のリンク、3D モデルもギャラリーに出ます。
商品ページが読むメタフィールド
設定 → カスタムデータ → 商品 → 定義を追加 で作成します。名前は自由ですが、ネームスペースとキー（定義の画面では ネームスペース.キー の形で入力します）と タイプ は一致させる必要があります。定義を作ると、どの商品の編集画面にも、いちばん下に入力欄が出ます。
| ネームスペース.キー | タイプ | 表示される場所 |
|---|---|---|
descriptors.subtitle | 1 行のテキスト（標準） | メイン写真の下の 1 行のキャッチ |
descriptors.care_guide | 複数行のテキスト（標準） | 詳細アコーディオンの「お手入れ」 |
custom.hero_image | ファイル（画像） | 上部のメイン写真。商品カードのホバー時の写真にも使われます |
custom.hero_video | ファイル（動画） | メイン写真の代わりに、ミュートでループ再生されます |
custom.gender | 1 行のテキスト | 商品名の横の小さなラベル。同じハンドルのコレクションに商品があれば、そこにリンクします |
custom.gender_collection | コレクションの参照 | ラベルのリンク先。ハンドルが違うときに使います |
spec.material | 1 行のテキスト | 詳細の「素材」 |
spec.origin | 1 行のテキスト | 詳細の「生産国」 |
spec.size_table | 複数行のテキスト | サイズ表。1 行につき 1 段、セルは | で区切ります。1 行目が見出しです: サイズ | 着丈 | 身幅 | 袖丈、続けて S | 66 | 50 | 20。入力したとおりに表示され、縦横は入れ替わりません |
color.names | 1 行のテキスト | カラーの表示名。コード:名前 の組を | で区切ります: SUMI:墨|SAND:砂。コードはオプションの値です |
drop.mode | 1 行のテキスト | まだ開始していないドロップには pre。カートが隠れ、「入荷のお知らせ」パネルが出ます |
drop.next_at | 日付 | 次のドロップの日付。「入荷のお知らせ」パネルに表示されます |
drop.label, drop.qty, drop.note | 1 行のテキスト | ドロップ開始前のボタンのラベルと、その下の短い 1 行 |
drop.end_variants | 1 行のテキスト | 廃番になった組み合わせ。色 / サイズ を | で区切ります: SAND / XS|SAND / XL |
nav.parent | 1 行のテキスト | パンくずに出すコレクションのハンドル（下を参照） |
story.gallery | ファイル（画像）のリスト | 「フィールド」写真: ライフスタイル写真の横並びの帯 |
story.fabric | メタオブジェクトの参照 → Fabric | 生地の章（§7 参照） |
ほとんどの項目は、商品ページ（TOGE）セクションの設定にもあります（メインの写真、キャッチコピー、性別、素材、生産、色の名前、廃盤の組み合わせ、販売の状態）。セクションの設定はすべての商品に効き、メタフィールドがあればそちらが優先されます。商品が 1〜2 点の店なら、メタフィールドを作らずに済みます。
商品名の上の パンくず は、次の順で決まります。タグ bread1-apparel, bread2-tops（テーマはハンドル apparel と tops のコレクションを探します。なければ、リンクなしの文字で出ます） → メタフィールド nav.parent → 商品が入っている最初のコレクション。bread1- のタグは、「関連商品」に出す商品を選ぶのにも使われます。
ストーリー本体は商品の説明文です。見出し（h3）、段落、画像があれば十分で、テーマは見出しから右側の目次を自動で作ります。
7. 生地の章（メタオブジェクト）
生地の章は、ひとつの生地の話をする、商品ページの中の 1 章です。名前とリード文、大きな数字の並び（重さ・厚みなど）、表と裏の写真、「仕組み」の 3 つの手順、比較のグラフが並びます。生地ごとにひとつのメタオブジェクトで、複数の商品で共有できます。必須は名前だけで、ほかの部分は項目を埋めたときに出ます。
設定 → カスタムデータ → メタオブジェクト で、以下のフィールドキーを使って定義を作成します。名前や定義自体の名前は自由です。テーマは商品の story.fabric の参照をたどり、キーでフィールドを読みます。大きい定義は小さい定義を参照するので、小さいものから作ります: Fabric row → Fabric chart、Fabric step、Fabric stat → Fabric。
Fabric（商品に紐づけるもの）
| キー | タイプ |
|---|---|
name, eyebrow, headline | 1 行のテキスト |
lead | リッチテキスト |
stats | Fabric stat のリスト |
views_heading, views_note, face_title, face_tag, back_title, back_tag | 1 行のテキスト |
views_body, face_body, back_body | リッチテキスト |
face_image, back_image | ファイル（画像） |
how_heading | 1 行のテキスト |
how_body | リッチテキスト |
steps | Fabric step のリスト |
charts | Fabric chart のリスト |
note | 複数行のテキスト |
Fabric stat: value, unit, label, prefix（すべて 1 行のテキスト）。大きな数字の並びとして表示されます。例: value 90、unit g/㎡、label 重さ。
Fabric step: image（ファイル）、title（1 行のテキスト）、body（リッチテキスト）。3 つのステップで「仕組み」の帯になります。
Fabric chart: title（1 行のテキスト）、body（リッチテキスト）、axes（1 行のテキストのリスト）、rows（Fabric row のリスト）、note（1 行のテキスト）。axes を入力すると 5 つの点で評価する表に、空にすると横棒グラフになります。
Fabric row: label（1 行のテキスト）、value（小数）、display（1 行のテキスト。生の値の代わりに表示する文字。例: 約 30 分）、scores（整数のリスト。軸ごとに 1 つ、1〜5）、highlight（真偽値。自社の生地に印を付けます）。
グラフは、画面に入ったときにアニメーションします。数字はゼロからカウントアップします。
8. コレクション
設定 → カスタムデータ → コレクション で作成します。
| ネームスペース.キー | タイプ | 表示される場所 |
|---|---|---|
toge.home_feature | 真偽値 | このコレクションをホームのフィーチャーバンドに載せます |
toge.feature_heading | 1 行のテキスト | バンドとコレクションページ上部の大きな 1 行 |
toge.feature_image | ファイル（画像） | バンドの写真。コレクション画像と別のものにしたい場合 |
toge.feature_video | ファイル（動画） | 写真の代わりにバンドで再生されます |
nav.parent | 1 行のテキスト | パンくずに出す親のコレクションのハンドル（全商品なら all） |
コレクションの説明文は、見出しの下の短いテキストになります。絞り込み・並び替え・1 ページの商品数は、コレクションのセクションの設定です。
9. お知らせバー
最上部のバーはブログ記事で動くため、ほかの記事と同じようにお知らせを書き、予約投稿し、取り下げることができます。
- 設定 → カスタムデータ → ブログ記事 で、
toge.announce（真偽値）とtoge.announce_text（1 行のテキスト）を作成します。 - 記事で announce をオンにします。バーには
announce_text、なければ記事のタイトルが表示され、記事にリンクします。 - フラグがオンの記事のうち、いちばん新しいものが使われます。ひとつもなければ、バーは表示されません。
訪問者はバーを閉じられます。閉じた状態は 7 日間、またはテキストが変わるまで続きます。
10. 自動で出るもの
次の部分は、ストアの設定に合わせて出ます。テーマで設定するものはありません。
11. 画像のサイズ
| 場所 | サイズ |
|---|---|
| ホームの Hero | 2:1、幅 2400 px。スマートフォンでは 4:5 に切り抜くか、スマートフォン用の画像を使います |
| ホームの Story | 2:1、幅 2400 px。スマートフォンでは 4:5 に切り抜きます |
| コレクションのフィーチャーバンド | 16:9、幅 1600 px 以上。スマートフォンでは 4:3 に切り抜きます |
商品のメイン写真（custom.hero_image） | 3:2、幅 2000 px。スマートフォンでは 4:5 に切り抜きます |
| バリエーションの写真（カラータイル） | 4:5、1080 × 1350。商品カードとギャラリーは 4:5 のまま、カラータイルは中央を正方形に切り抜きます |
| 商品写真（ギャラリー） | 4:5 |
フィールド写真（story.gallery） | 2:3、縦長 |
| 生地の表と裏 | 比率は自由。ただし 2 枚を同じ形に。幅 1200 px |
| 生地の手順 | 白い背景の絵。白はページの色になじみます |
| ブログ記事の画像 | ジャーナルの一覧では 4:3。幅 1600 px 以上 |
| ファビコン | 正方形、32 px 以上 |
Shopify が画面ごとに縮小するので、大きいぶんにはかまいません。
12. 言語
テーマのサンプル文章はすべて英語です。テーマ自身のラベル（ボタン、カート、検索など）とテーマエディタは、英語、日本語、ドイツ語、フランス語、スペイン語、ポルトガル語（ブラジル）、イタリア語、繁体字中国語、簡体字中国語、韓国語を同梱しています。ストアの表示は、ストアの言語に合わせて切り替わります。
セクションの文章、商品、ページなどのご自身の内容は、Shopify の無料アプリ Translate & Adapt で翻訳できます。アプリ
13. テーマの更新
新しい版が出ると、オンラインストア → テーマ のテーマに更新のお知らせが出ます。更新しても、テーマエディタの設定と内容は引き継がれます。テーマのコードの編集は引き継がれないので、変更したところは更新の前に控えておいてください。
14. テーマに含まれないもの
- 写真と動画。 Shopify のテーマにはメディアを同梱できず、デモの写真はデモ用にライセンスされたものです。写真がない場所には、グレーのプレースホルダーの絵が表示されます。
- 商品、記事、ページ、メタフィールドの定義。 これらはストアのデータです。テーマが使えるものは、このガイドにすべて挙げています。
- アプリ。 必要ありません。Translate & Adapt は言語を増やすときだけ、定期購入のアプリは定期購入を売るときだけです。