コレクションページ
Plain Jane および Plain Jane Interactive 向け
学べること
クラシックレイアウトとサイドバーコレクションレイアウトの違い
コレクションページにカスタムメニューを接続する方法
商品の表示とデザイン設定のカスタマイズに関するヒント
🧱 コレクションのレイアウトオプション
Plain Janeに含まれるもの 2つのレイアウトタイプ のコレクションページ用：
クラシックコレクション
固定されたカテゴリメニューとソート/検索アイコンを備えたミニマルなデザイン
サイドバーコレクション
カスタマイズ可能なサイドバーと高度なレイアウトおよび背景オプションを含む
これらのレイアウトは、を有効/無効にすることで切り替えできます クラシックコレクション または サイドバーコレクション セクションを テーマエディター.
💡 ヒント：同時に1つのコレクションセクションのみ使用してください（もう一方は非表示に）。
🔗 カスタムコレクションメニューを接続する
コレクションページ用のカスタムナビゲーションメニューを作成するには：
に移動します オンラインストア > ナビゲーション Shopify管理画面で
をクリック メニューを追加 して名前を付けます（例：
ショップメニュー)カテゴリのリンクを追加します（例：トップス、ボトムス、アクセサリー）
（オプション）2階層目/3階層目のドロップダウン用にアイテムをネストする
をクリック 保存
次に：
を開きます テーマエディター
を選択します コレクション > [あなたのコレクション] 上部のドロップダウンから
をクリック
クラシックコレクションまたはサイドバーコレクションの下で コレクションメニューを選択、先ほど作成したメニューを選びます
⚙️ 主要なレイアウト設定
🧭 メニュー設定
位置：左または右
テキストの配置：左、中央、または右
フォントサイズと間隔：トップレベルおよびネストされたメニューリンクの間隔を調整
🎨 スタイル設定
メニューの色：リンク、ホバー、背景色をカスタマイズ
商品タイトルと価格：表示/非表示、サイズ調整、色の変更
商品ラベル：カスタム色とサイズで「セール中」タグを有効にする
💡 ヒント：商品グリッドを揃えるには一貫した画像サイズ（例：1000x1000px）を使用してください。
🖼 商品画像のスタイリング
商品フレーム：色と太さを調整できるホバー時のアウトラインを追加
画像の角の丸み：シャープまたは丸いエッジのために背景の半径を調整
背景色：画像が透過形式でアップロードされている場合にのみ機能します
.png
カスタム背景色を有効にするには：
- 透過PNGを使用する
- 「背景を透過にする」をオフに切り替える🔍 検索とソートのコントロール
アイコンの位置：左、中央、または右
表示切替：アイコンを個別に非表示または表示
色設定：アイコンと背景色をカスタマイズ
検索バーオーバーレイ：不透明度と背景色を調整
顧客がフィルターまたはソートアイコンをクリックすると：
フィルターアイコンはドラッグ可能な検索オーバーレイを開く
ソートアイコンは価格、新着、A-Z、またはおすすめで並べ替えを可能にする
🧰 サイドバーコレクションの追加機能（サイドバーレイアウトのみ）
サイドバースキンをアップロード：背景画像やパターンを追加
サイドバーの不透明度：サイドバーの透明度を制御
固定サイドバー：スクロール時に固定位置を有効にする
サイドバーの影：深みを出すさりげないエッジの影を追加
🛠 商品の手動並べ替え
⚠️ 重要：コレクション内の商品の順序を制御するには、ソートタイプをに設定してください 手動.
手順：
に移動します 商品 > コレクション Shopify管理画面で
コレクションを選び、をクリックします 並べ替え > 手動
必要に応じて商品をドラッグして並べ替える
この順序はフロントエンドのコレクションページに反映されます。
📌 商品画像に関する注意事項
商品タイトルや価格のずれは通常、画像サイズの不一致が原因です
視覚的な整列のために均一な正方形の画像（例：1000x1000）を使用してください
ヘルプが必要ですか？
💬 Discordでコミュニティに参加： https://discord.gg/hcc2GvgZc6
📧 メールでお問い合わせ： [email protected]
💻 ライブチャット： 月曜〜金曜、午前10時〜午後6時（EST）に当社ウェブサイトで直接利用可能
最終更新