3. コレクションページの作成とカスタマイズ
Plain Jane と Interactive 向け
学べること
Shopifyでコレクションを作成・整理する方法
コレクションページにメニューを作成して割り当てる方法
Plain Jane v3およびInteractive v2テーマで「Classic Collection」と「Sidebar Collection」を使用およびカスタマイズする方法
余白、フォント、色、商品表示オプションなどのデザイン設定を編集する方法
🛠️ はじめに：Shopifyセットアップの基本
このセクションはストアを初めて設定する初心者向けです。
1. 商品コレクションを作成する
に移動します Shopify 管理画面 > 製品 > コレクション.
クリック： コレクションを作成.
コレクションに名前を付けます（例：
トップス,ボトムス,アクセサリー).コレクションの 種類 を
手動.⚠️ 手動コレクションでは商品順序を手動で管理できます。
クリック： 保存、次に 参照 ボタンを使って商品を追加します。
各カテゴリについて繰り返します。
2. コレクションサイドバー用のメニューを作成する
移動先： オンラインストア > ナビゲーション.
クリック： メニューを追加.
〜のような名前にします
ショップメニュー.次のようなリンクを追加します：
トップス→ あなたのトップスコレクションへのリンクボトムス→ あなたのボトムスコレクションへのリンクアウターウェア,フットウェア、など。
項目をドラッグしてネスト（入れ子）にできます（例：
ショーツの下でボトムス).クリック： メニューを保存.
🎨 テーマのカスタマイズ：コレクションページ
これらの手順は以下の両方に適用されます Plain Jane v3 および Interactive v2 テーマ。
に移動 オンラインストア > テーマ > テキストの
ページセレクタードロップダウンを使って切り替えます コレクション テンプレート
Classic Collectionセクション
移動先： オンラインストア > テーマ > テキストの.
左のパネルから、を選択します コレクションページ テンプレート。
ラベルが付いたセクションを探します Classic Collection.
主な設定：
メニューを選択： 作成したカスタム
ショップメニューを割り当てます。メニュー位置： 選択
左または右.テキストの配置： のオプション
左,中央、または右.フォントサイズと間隔： メニューとリンクの間隔を調整します。
メニューの色： 背景色と文字色をカスタマイズします。
商品タイトル/価格を表示： 可視性を切り替え、フォントサイズと色を調整します。
商品フレーム： 枠線やホバーエフェクトを追加します。
商品背景の角丸： 角をシャープから丸めまで調整します。
背景を透過にする： 透過PNGと相性が良い設定です。
検索と並べ替えのオプション
位置： アイコンの配置
左,中央、または右.色： アイコンとドロップダウンメニューの色をカスタマイズします。
検索オーバーレイの設定:
調整: 背景の不透明度
設定する： 検索ボックスの背景色
並べ替えメニュー： 商品をどのように並べ替えるかを選択します：
注目商品,新着順,価格、など。
セールラベル
「セール中」などの割引ラベルを表示
ラベルのカスタマイズ フォントサイズ, 文字色、および 背景色
PNGを使用した商品のアップロード
💡 補足：テーマエディタで背景色をコントロールしたい場合は透過PNGを使用してください。
🧭 サイドバーコレクション（任意）
より従来型のレイアウトにしたいですか？代わりにサイドバーコレクションを使用してください。
同じ コレクションページ テンプレートで、 を非表示にする その
Classic Collectionセクション。サイドバーコレクションを有効にする 代わりに。
サイドバーコレクションの設定：
を割り当てる
メニューサイドバーの位置：
左または右サイドバーの背景をアップロード （「スキン」と呼ばれる）
調整: 不透明度, 影、および 固定スクロール 動作
💡 補足：固定サイドバーはスクロール時も表示されたままになります。
商品情報、ラベル、検索/並べ替えアイコンなどの他の表示設定はClassic Collectionセクションと同じように動作します。
✅ 最終メモ
変更を加えたら必ず 保存 変更後はテーマエディタでを確認してください。
変更がすぐに反映されない場合は、ページをリロードしてみてください。
レイアウトを揃えるために商品画像のサイズを揃えてください（例：1000x1000px）。
ヘルプが必要ですか？
💬 技術サポートはDiscordで参加してください： https://discord.gg/hcc2GvgZc6
📧 メールでお問い合わせ： [email protected]
💻 ライブチャット： 月〜金、現地時間午前10時〜午後6時（EST）に当社ウェブサイトで直接対応
最終更新