サイドバーコレクション
Plain Jane および Plain Jane Interactive 向け
学べること
サイドバーコレクションセクションの設定方法
カート、メニュー、商品、ラベルの設定を調整する方法
並び替え、検索、ページネーションの動作を有効にする方法

サイドバーコレクションをカスタマイズする方法
テーマエディターに移動
Shopify 管理画面から、次へ移動します オンラインストア > テーマ
をクリック カスタマイズ アクティブなテーマで
を開きます コレクション テンプレートを選択し、 サイドバーコレクション セクション
サイドバーメニュー
をクリック を選択します メニューを割り当てるには
サイドバーを配置する位置 左 または 右
任意で スキン画像をアップロード 背景をカスタマイズするには
サイドバー設定
を調整します サイドバーの不透明度 スライダーを使用して(例:1 px)
を設定 背景色 (例:
#202020)切り替え 固定メニューを有効にする または サイドバーの影を有効にする 必要に応じて
日付と時刻(任意)
カスタマイズ 日付/時刻の色 デスクトップとモバイル用
切り替え 日付/時刻を表示 タイムスタンプを表示するには
サイドバーリンク
を設定してください テキストの整列 (左、中央)
の間隔を調整 リンクレベル および フォントサイズ
色をカスタマイズ:
メニューとカートのリンク色
カートのテキスト, 数量、そして 背景 色を
モバイルの色 含まれる
商品タイトルと価格
カスタマイズ フォントサイズ および 文字色 タイトルと価格用
を設定してください 比較価格の色 (例:赤、
#FF0000)表示オプションを切り替え:
商品タイトルを表示
商品価格を表示
比較価格を表示
ラベル
のフォントサイズと背景/テキスト色を設定:
プレオーダー
セール中
在庫切れ
各ラベルタイプの表示/非表示を切り替え
商品背景
を設定してください 角の半径 および 背景色
必要に応じて背景を透明にする
検索&並び替えアイコン
アイコンを設定 位置 および 色を
の表示を切り替え 検索/並び替えアイコン および アイコンを入れ替える
検索バー
を調整します 背景の不透明度 および 色を 対象:
検索ボックス
キャンセルボタン
検索結果
入力フィールド
角や影を任意でスタイリング
並べ替えメニュー
カスタマイズ:
デフォルトとアクティブのオプションのテキスト&背景色
並び替えメニューハンドルの色
ページネーション&読み込み
選択してください ページネーションの種類:
無限スクロールまたはページ番号の色を設定:
ページネーションのテキスト
アクティブページとそのテキスト
ページネーションの矢印
💡 ヒント: スペース、可読性、レイアウトの整合性を確認するために、デスクトップとモバイルの両方でプレビューすることを忘れないでください。
ヘルプが必要ですか?
💬 Discordでコミュニティに参加: https://discord.gg/hcc2GvgZc6
📧 メールでお問い合わせ: [email protected]
💻 ライブチャット: 月曜〜金曜、午前10時〜午後6時(EST)に当社ウェブサイトで直接利用可能
最終更新