Ctrlk
For the complete documentation index, see llms.txt. This page is also available as Markdown.

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.

主な設定：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    • 調整: 背景の不透明度

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

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

セールラベル

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

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

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

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

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

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

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

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

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

  • を割り当てる メニュー

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

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

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

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

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

✅ 最終メモ

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

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

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

ヘルプが必要ですか？

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

  • 📧 メールでお問い合わせ： support@openspaces.design

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

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

最終更新