商品カルーセルセクション
学べること
製品を水平方向にスクロール可能なレイアウトで表示する方法
製品ラベル、価格、バッジをカスタマイズする方法
製品の間隔、タイポグラフィ、色を調整する方法
デスクトップとモバイルのレイアウト設定を指定する方法
🧩 セクション概要
Product Carousel セクションは、注目製品のスクロール可能な行を表示します。特定のコレクションを宣伝したり、ベストセラーを強調したりするのに最適です。製品には価格、ラベル（「セール」や「在庫切れ」など）、およびカスタムレイアウト設定を含めることができます。
セクションの追加方法
「 Shopify テーマエディター、クリック セクションを追加
選択してください 製品カルーセル
セクションをページ上で表示したい場所にドラッグ＆ドロップしてください
コンテンツとデータの設定
セクションタイトル：カルーセルの見出しを追加します（例：「注目の製品」）
ショップリンクのテキスト：コールトゥアクションボタンを追加します（例：「全て見る」）
ショップリンクのURL：コレクションまたはページのリンクを貼り付けます
レイアウトと表示オプション
製品テキストの配置：タイトルを左揃え、中央揃え、または右揃えにします
次のオプションを切り替えます：
製品タイトルを表示
製品価格を表示
比較価格を表示
在庫切れバッジを表示
セールバッジを表示
予約注文バッジを表示
💡 ヒント: バッジを有効にして割引や在庫状況を強調しましょう。
1行あたりの製品数 – デスクトップ：表示する製品数を選択します（1〜6）
1行あたりの製品数 – モバイル：1〜3製品の間で選択してください
タイポグラフィ設定
デスクトップとモバイルでフォントサイズを個別に調整します：
セクションヘッダー
商品タイトル
製品価格
任意：切り替え 太字 スタイル対象：
セクションタイトル
表示リンク
商品タイトル
カラーのカスタマイズ
背景色：透明、ソリッド、またはブランドカラー
セクションタイトルとリンクの色
矢印の色 （ナビゲーション矢印）
製品タイトルの色
製品価格の色
各バッジのラベル色：
予約注文
在庫切れ
セール中
比較価格
各バッジには次の両方があります：
テキスト色
背景色
⚠️ 読みやすさのために、テキストと背景の色がはっきりとコントラストしていることを確認してください。
間隔設定
画面サイズ間でより良い視覚的バランスを得るために間隔を調整できます。
デスクトップ
上の間隔: 20px
下の間隔: 20px
モバイル
上の間隔: 16px
下の間隔: 16px
追加のコントロール：
セクションヘッダーと製品間のスペース
製品画像と情報の間のスペース
製品タイトルと価格の間のスペース
製品間のギャップ（デスクトップおよびモバイル）
ナビゲーションコンテキスト
を使用して ナビゲーションコンテキスト 設定で、顧客が製品をクリックしたときにどのコレクション内に留まるかを定義します。
例えば：
「サマーコレクション」に設定されている場合、任意の製品をクリックしても顧客は同じコレクション内を閲覧し続けます。
これが設定されていない場合、製品をクリックするとコレクションのコンテキストなしで製品の標準ページに移動します。
ヘルプが必要ですか？
💬 Discordでコミュニティに参加： https://discord.gg/hcc2GvgZc6
📧 メールでお問い合わせ： [email protected]
💻 ライブチャット： 月曜〜金曜、午前10時〜午後6時（EST）に当社ウェブサイトで直接利用可能
最終更新