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. ページセレクタのドロップダウンを使用して切り替えます コレクション テンプレート

Collections page template in theme customizer
テーマカスタマイザーのコレクションページテンプレート

Classic Collectionセクション

  1. に移動 オンラインストア > テーマ > カスタマイズ.

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

  3. 「Classic Collection」と表示されたセクションを探します Classic Collection.

主要設定：

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

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

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

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

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

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

  • 商品タイトル／価格を表示： 表示のオン・オフを切り替え、フォントサイズと色を調整します。

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

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

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

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

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

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

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

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

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

    • を設定 検索ボックスの背景色

  • ソートメニュー： 商品の並び替え方法を選択します： 注目, 新着, 価格など。

セールラベル

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

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

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

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

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

より伝統的なレイアウトが必要ですか？代わりにSidebar Collectionを使用してください。

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

  2. 代わりにSidebar Collectionを有効にします。 代わりに。

Sidebar Collection設定：

  • 次を割り当てます メニュー

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

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

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

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

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

✅ 最終メモ

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

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

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

ヘルプが必要ですか？

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

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

  • 💻 ライブチャット： 月〜金、現地時間（EST）10:00〜18:00 に当社ウェブサイトで直接利用可能

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

最終更新