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