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. 「 クラシックコレクション.

主な設定：

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

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

  • テキストの整列：次のオプションがあります 左, 中央、または 右.

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

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

  • 商品タイトル/価格を表示：表示の切替とフォントサイズや色の調整。

  • 商品フレーム：枠線やホバー効果を追加します。

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

  • 背景を透明にする：透明なPNGと組み合わせると最適です。

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

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

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

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

    • を調整します 背景の不透明度

    • を設定してください 検索ボックスの背景色

  • 並べ替えメニュー：商品を並べる方法を選択します： おすすめ, 最新, 価格など。

セールラベル

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

  • ラベルをカスタマイズ フォントサイズ, 文字色、そして 背景色

PNG入り商品のアップロード

💡 ヒント：テーマエディタで背景色を制御したい場合は、透明なPNGを使用してください。

🧭 サイドバーコレクション（オプション）

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

  1. 同じ コレクションページ テンプレートで、 非表示にし て クラシックコレクション セクション。

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

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

  • 割り当てる メニュー

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

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

  • を調整します 不透明度, シャドウ、そして 固定スクロール 動作

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

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

✅ 最後の注意点

  • 必ずクリックしてください 保存 テーマエディタで変更を行った後。

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

  • 整列したレイアウトのために商品画像のサイズを一貫させてください（例：1000x1000px）。

ヘルプが必要ですか？

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

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

  • 💻 ライブチャット： 月曜〜金曜、午前10時〜午後6時（EST）に当社ウェブサイトで直接利用可能

前へ2. ホームページの設定次へ4. 商品ページの作成とカスタマイズ

最終更新