3. コレクションページの作成とカスタマイズ

Plain Jane と Interactive 向け

学べること

• Shopifyでコレクションを作成・整理する方法

• コレクションページにメニューを作成して割り当てる方法

• Plain Jane v3およびInteractive v2テーマで「Classic Collection」と「Sidebar Collection」を使用およびカスタマイズする方法

• 余白、フォント、色、商品表示オプションなどのデザイン設定を編集する方法

🛠️ はじめに：Shopifyセットアップの基本

このセクションはストアを初めて設定する初心者向けです。

1. 商品コレクションを作成する

1. に移動します Shopify 管理画面 > 製品 > コレクション.

2. クリック： コレクションを作成.

3. コレクションに名前を付けます（例： トップス, ボトムス, アクセサリー).

4. コレクションの 種類 を 手動.

   ⚠️ 手動コレクションでは商品順序を手動で管理できます。

5. クリック： 保存、次に 参照 ボタンを使って商品を追加します。

各カテゴリについて繰り返します。

2. コレクションサイドバー用のメニューを作成する

1. 移動先： オンラインストア > ナビゲーション.

2. クリック： メニューを追加.

3. 〜のような名前にします ショップメニュー.

4. 次のようなリンクを追加します：

   • トップス → あなたの トップス コレクションへのリンク

   • ボトムス → あなたの ボトムス コレクションへのリンク

   • アウターウェア, フットウェア、など。

5. 項目をドラッグしてネスト（入れ子）にできます（例： ショーツ の下で ボトムス).

6. クリック： メニューを保存.

---

🎨 テーマのカスタマイズ：コレクションページ

これらの手順は以下の両方に適用されます Plain Jane v3 および Interactive v2 テーマ。

1. に移動 オンラインストア > テーマ > テキストの

2. ページセレクタードロップダウンを使って切り替えます コレクション テンプレート

テーマカスタマイザーのコレクションページテンプレート

Classic Collectionセクション

1. 移動先： オンラインストア > テーマ > テキストの.

2. 左のパネルから、を選択します コレクションページ テンプレート。

3. ラベルが付いたセクションを探します Classic Collection.

主な設定：

コレクションの商品表示設定とカスタマイズオプション

• メニューを選択： 作成したカスタム ショップメニュー を割り当てます。

• メニュー位置： 選択 左 または 右.

• テキストの配置： のオプション 左, 中央、または 右.

• フォントサイズと間隔： メニューとリンクの間隔を調整します。

• メニューの色： 背景色と文字色をカスタマイズします。

• 商品タイトル/価格を表示： 可視性を切り替え、フォントサイズと色を調整します。

• 商品フレーム： 枠線やホバーエフェクトを追加します。

• 商品背景の角丸： 角をシャープから丸めまで調整します。

• 背景を透過にする： 透過PNGと相性が良い設定です。

ClassicとSidebarのバリエーションを示すコレクションレイアウトオプション

検索と並べ替えのオプション

• 位置： アイコンの配置 左, 中央、または 右.

• 色： アイコンとドロップダウンメニューの色をカスタマイズします。

• 検索オーバーレイの設定:

  • 調整: 背景の不透明度

  • 設定する： 検索ボックスの背景色

• 並べ替えメニュー： 商品をどのように並べ替えるかを選択します： 注目商品, 新着順, 価格、など。

セールラベル

• 「セール中」などの割引ラベルを表示

• ラベルのカスタマイズ フォントサイズ, 文字色、および 背景色

PNGを使用した商品のアップロード

💡 補足：テーマエディタで背景色をコントロールしたい場合は透過PNGを使用してください。

---

🧭 サイドバーコレクション（任意）

より従来型のレイアウトにしたいですか？代わりにサイドバーコレクションを使用してください。

1. 同じ コレクションページ テンプレートで、 を非表示にする その Classic Collection セクション。

2. サイドバーコレクションを有効にする 代わりに。

サイドバーコレクションの設定：

• を割り当てる メニュー

• サイドバーの位置： 左 または 右

• サイドバーの背景をアップロード （「スキン」と呼ばれる）

• 調整: 不透明度, 影、および 固定スクロール 動作

💡 補足：固定サイドバーはスクロール時も表示されたままになります。

商品情報、ラベル、検索/並べ替えアイコンなどの他の表示設定はClassic Collectionセクションと同じように動作します。

---

✅ 最終メモ

• 変更を加えたら必ず 保存 変更後はテーマエディタでを確認してください。

• 変更がすぐに反映されない場合は、ページをリロードしてみてください。

• レイアウトを揃えるために商品画像のサイズを揃えてください（例：1000x1000px）。

ヘルプが必要ですか？

• 💬 技術サポートはDiscordで参加してください： https://discord.gg/hcc2GvgZc6

• 📧 メールでお問い合わせ： [email protected]

• 💻 ライブチャット： 月〜金、現地時間午前10時〜午後6時（EST）に当社ウェブサイトで直接対応