サイドバーコレクション

Plain Jane および Plain Jane Interactive 向け

学べること

  • サイドバーコレクションセクションの設定方法

  • カート、メニュー、商品、ラベルの設定を調整する方法

  • 並び替え、検索、ページネーションの動作を有効にする方法


サイドバーコレクションをカスタマイズする方法

  1. テーマエディターに移動

    • Shopify 管理画面から、次へ移動します オンラインストア > テーマ

    • をクリック カスタマイズ アクティブなテーマで

    • を開きます コレクション テンプレートを選択し、 サイドバーコレクション セクション

  2. サイドバーメニュー

    • をクリック を選択します メニューを割り当てるには

    • サイドバーを配置する位置 または

    • 任意で スキン画像をアップロード 背景をカスタマイズするには

  3. サイドバー設定

    • を調整します サイドバーの不透明度 スライダーを使用して(例:1 px)

    • を設定 背景色 (例: #202020)

    • 切り替え 固定メニューを有効にする または サイドバーの影を有効にする 必要に応じて

  4. 日付と時刻(任意)

    • カスタマイズ 日付/時刻の色 デスクトップとモバイル用

    • 切り替え 日付/時刻を表示 タイムスタンプを表示するには

  5. サイドバーリンク

    • を設定してください テキストの整列 (左、中央)

    • の間隔を調整 リンクレベル および フォントサイズ

    • 色をカスタマイズ:

      • メニューとカートのリンク色

      • カートのテキスト, 数量、そして 背景 色を

      • モバイルの色 含まれる

  6. 商品タイトルと価格

    • カスタマイズ フォントサイズ および 文字色 タイトルと価格用

    • を設定してください 比較価格の色 (例:赤、 #FF0000)

    • 表示オプションを切り替え:

      • 商品タイトルを表示

      • 商品価格を表示

      • 比較価格を表示

  7. ラベル

    • のフォントサイズと背景/テキスト色を設定:

      • プレオーダー

      • セール中

      • 在庫切れ

    • 各ラベルタイプの表示/非表示を切り替え

  8. 商品背景

    • を設定してください 角の半径 および 背景色

    • 必要に応じて背景を透明にする

  9. 検索&並び替えアイコン

    • アイコンを設定 位置 および 色を

    • の表示を切り替え 検索/並び替えアイコン および アイコンを入れ替える

  10. 検索バー

    • を調整します 背景の不透明度 および 色を 対象:

      • 検索ボックス

      • キャンセルボタン

      • 検索結果

      • 入力フィールド

    • 角や影を任意でスタイリング

  11. 並べ替えメニュー

    • カスタマイズ:

      • デフォルトとアクティブのオプションのテキスト&背景色

      • 並び替えメニューハンドルの色

  12. ページネーション&読み込み

    • 選択してください ページネーションの種類: 無限スクロール または ページ番号

    • の色を設定:

      • ページネーションのテキスト

      • アクティブページとそのテキスト

      • ページネーションの矢印

💡 ヒント: スペース、可読性、レイアウトの整合性を確認するために、デスクトップとモバイルの両方でプレビューすることを忘れないでください。

ヘルプが必要ですか?

  • 💬 Discordでコミュニティに参加: https://discord.gg/hcc2GvgZc6

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

  • 💻 ライブチャット: 月曜〜金曜、午前10時〜午後6時(EST)に当社ウェブサイトで直接利用可能

最終更新