商品カルーセル: 商品画像をカルーセル形式で紹介する
公開日: 更新日:
顧客がオンラインで買い物をする場合、静止画像から商品を適切に視覚化するという課題に直面することが多く、購入プロセス中に不確実性や躊躇につながる可能性があります。ClickFunnels は、顧客がチェックアウト ページ内で複数の商品画像を直接スムーズに閲覧できるようにする 商品カルーセル 要素を提供することでこれに対処し、ショッピング エクスペリエンスを向上させます。この記事では、ClickFunnels 内に商品カルーセル要素を効果的に実装して活用し、顧客エンゲージメントを向上させ、情報に基づいた購入決定をサポートする方法について説明します。
-
アクティブなClickFunnelsアカウント
-
ファネルページまたはストアの商品ページ
-
複数の画像で作成された商品
-
ファネルステップに添付された商品 (ファネルの場合)
-
エディターに追加されたチェックアウト要素
商品に画像をアップロードする
Section titled “商品に画像をアップロードする”-
サイドナビゲーションメニューの 製品 に移動します。
-
すべての製品 を選択します。
-
右側で目的の商品を見つけます。設定にアクセスするには、商品自体、画像、または歯車 ⚙️ アイコンをクリックします。
-
画像 セクションまで下にスクロールし、画像の追加 をクリックします。
-
画像ギャラリーから複数の画像を選択し、画像を選択 をクリックします。
-
最後に、商品を更新 をクリックします。
ページエディターでの商品カルーセル要素の追加
Section titled “ページエディターでの商品カルーセル要素の追加”-
ページエディタ内で、要素を配置する場所に セクション を追加します。
-
そのセクション内に 行 を追加します。
-
行内のオレンジ色の + プラス または 新しい要素を追加 ボタンをクリックして、新しい要素を挿入します。
-
チェックアウト カテゴリから 商品カルーセル 要素を選択します。
商品カルーセル要素を追加すると、ページデザインに合わせて外観をカスタマイズできます。
商品カルーセル要素のカスタマイズ
Section titled “商品カルーセル要素のカスタマイズ”要素にカーソルを合わせると、その境界線がオレンジ色で強調表示されます。要素の設定にアクセスするには、歯車 ⚙️ アイコンをクリックするか、要素を直接クリックします。
上マージン
上マージン設定では、現在のコンテナ(セクション、行、フレックス、エレメント)とそのすぐ上にあるコンテナとの間のスペースを制御できます。以前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行コンテナが追加されていない場合、Body は親になります。
デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの上マージン値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。
メイン画像
メイン画像オプションを使用すると、表示されている商品のメイン画像プレースホルダーを調整できます。
-
サイズ & フィット:
-
幅 と 高さ: メイン画像コンテナの幅と高さを調整します。デスクトップとモバイルでは、デバイスアイコン ( 🖥️ & 📱 ) を使用して、幅と高さを個別に設定できます。モバイル値が指定されていない場合、モバイル設定はデフォルトでデスクトップ設定を継承します。
-
フィット: メイン画像をコンテナにどのように収めるかを フィル、含む、カバー、スケールダウン から選択します。
-
-
コーナー: オンに切り替えてコーナーオプションを調整し、メイン画像コンテナに角の丸みを追加します。
-
ボーダー: オンに切り替えてボーダーオプションを調整し、メイン画像コンテナのボーダースタイルをカスタマイズします。
-
シャドウ: メイン画像コンテナのシャドウオプションを調整して、シャドウスタイルをオンに切り替えてカスタマイズします。
サムネイル
サムネイルオプションを使用すると、商品のサムネイル画像のプレースホルダーを調整できます。 
-
サムネイルを表示: オンとオフを切り替えて、プレビューでサムネイルを表示または非表示にします。
-
高さ: サムネイル画像コンテナの高さを調整します。デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルで別々の値を設定できます。
-
サムネイルの数: 一度に表示するサムネイルの数を 4～10 の範囲で選択します。デフォルトは 5 です。
-
サムネイル間のスペース: 各サムネイル間の間隔を調整します。
-
スクロールバーBGカラー: サムネイルのスクロールバーの背景色を設定します。
-
ナビゲーションカラー: 画像を左右にスワイプするために使用される「矢印アイコン」の色を変更します。
-
フィット: サムネイル画像をコンテナにどのように収めるかを フィル、含む、カバー、スケールダウン から選択します。
-
コーナー: オンに切り替えて、サムネイル画像コンテナの角の丸みを追加および調整します。
-
ボーダー: オンに切り替えて、サムネイル画像コンテナのボーダースタイルを追加および調整します。
リンク付き
ページに複数のチェックアウト要素がある場合に表示されます。リンク付き を使用して、カルーセルをリンクするチェックアウト要素を選択します。
パディング
パディング 設定は、コンテンツとそのコンテナの内側の端 (セクション、行、列、要素など) の間のスペースを制御します。この内部間隔により、コンテンツに呼吸する余地を確保し、視覚的にバランスが取れているように見えます。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。
パディングオプション:
-
上: 要素コンテナの上部とそのコンテンツの間にスペースを追加します。
-
下: 要素コンテナの下部とそのコンテンツの間にスペースを追加します。
-
左 + 右: 要素コンテナとそのコンテンツの間の水平方向の間隔を調整します。
-
ギャップ: アコーディオン などの特定の要素では、コンテナ内のアイテム間の間隔を設定するために gap プロパティが追加されます。たとえば、上下にパディングを定義せずに、アコーディオン要素内の各アコーディオン項目間のギャップを調整できます。
デスクトップとモバイル(🖥️ & 📱)カスタマイズ:
パディング設定を使用すると、 デスクトップ ビューと モバイル ビューに別々の値を定義できます。パディングコントロールの上部にある デバイストグル を使用して、画面モードを切り替え、それに応じて間隔を調整します。 モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。
この機能により、レイアウトがさまざまな画面サイズに合わせて最適化された状態が維持され、モバイルとデスクトップのエクスペリエンスが向上します。
コーナー
コーナー設定では、要素のコーナーの丸み(角の半径)を調整でき、丸みを帯びたエッジまたはシャープなエッジを柔軟に作成できます。
-
スタイルプリセット(1、2、3): スタイルガイドで設定されている定義済みのコーナースタイルから選択します。これらのプリセット (1、2、または 3) は、ページ全体のデザインに合わせたクイック スタイリング オプションを提供します。
-
スタイルを編集: スタイルガイドでスタイルを直接変更するには(そのスタイルを使用するすべての要素に影響します)、スタイルを編集 をクリックして、グローバル設定でプリセットを調整します。
-
オーバーライド: スタイルガイドを変更せずにカスタムコーナー設定を適用するには、上書き をクリックします。これにより、この特定の要素に対してのみコーナー半径を調整できます。
-
すべての角: スライダーを調整するか、特定の値をピクセルまたはパーセンテージで入力して、四隅すべてに均一な角の半径を設定します。
-
エッジを分ける: エッジを分ける を有効にして、各コーナーを個別に調整します。左上、右上、左下、右下 のコーナーに異なる値を設定して、独自の形状を実現できます。
ボーダー
ボーダー設定を使用すると、要素の周囲にボーダーを追加してスタイルを設定し、ページ上の視覚的な定義と分離を強化できます。
-
スタイルプリセット(1、2、3): スタイルガイドで定義済みのボーダースタイルから選択します。これらのプリセットは、ページ全体で一貫したボーダースタイルを提供し、要素にすばやく適用できます。
-
スタイルを編集: スタイルガイドでプリセットのボーダースタイルを変更するには(そのスタイルを使用するすべての要素に影響します)、スタイルを編集 を選択して、グローバル設定でデザインを調整します。
-
オーバーライド: 上書き オプションを使用して、グローバルスタイルガイド設定に影響を与えることなく、この要素専用のボーダー設定をカスタマイズします。
-
ボーダー: 要素のどの辺にボーダーを表示するかを選択します。オプションには、上、下、左、右のボーダーの任意の組み合わせが含まれます。
-
ボーダースタイル: デザインの好みに合わせて、実線、破線、点線などのボーダーの線のスタイルを選択します。
-
色: カラーピッカーを使用して、ボーダーの色を選択します。スタイルガイドから色を選択するか、カスタム色を選択して、ボーダーの色がデザイン スキームに一致するようにすることができます。
-
ストロークサイズ: ボーダーの太さは、ストロークサイズ スライダーを使用するか、特定のピクセル値を入力して調整でき、細い輪郭から太いフレームまであらゆるものを作成できます。
シャドウ
シャドウの設定では、シャドウ効果を適用して要素に奥行きと強調を加え、視覚的な外観を向上させることができます。シャドウのプロパティをカスタマイズする方法は次のとおりです。
-
スタイル: ページのスタイルガイドから定義済みのシャドウスタイルの1つを選択します。番号付きのスタイル(1、2、または3)をクリックして、スタイルガイドで定義されているプリセットシャドウ設定を適用します。
-
シャドウ スタイル: インセット (要素内の影) と アウトセット (要素の外側のシャドウ) のいずれかを選択して、目的のシャドウ効果を実現します。
-
X方向: 影の水平方向の位置を調整します。正の値は影を右に移動し、負の値を指定すると影は左に移動します。
-
Y方向: シャドウの垂直方向の配置をコントロールします。正の値は影を下に押し、負の値は影を上に引っ張ります。
-
ぼかし: シャドウのエッジの柔らかさをコントロールします。値を大きくすると、より拡散した柔らかな影が作成され、値を小さくすると、影が鮮明に保たれます。
-
スプレッド: 影のサイズを調整します。正の値は影を広げ、負の値は影を狭くします。
-
色: カラーピッカーを使用して、影の色の設定を選択します。
背景
背景 セクションでは、要素に背景画像または背景色を追加できます。
-
画像URL: 背景画像の URL を入力するか、ClickFunnels の画像ギャラリーから直接アップロードします。
-
画像スタイル: 背景画像の表示方法を なし、フルセンター、フルセンター（パララックス）、幅100%にフィル、幅と高さ100%にフィル、繰り返さない、繰り返す、水平に繰り返す、垂直に繰り返す から選択します。
-
画像フィット: コンテナ内での画像の位置 (中央、左上、右下など) を指定します。
-
色: 背景 色と、背景画像の上に重ねる 前景 色を設定します。スタイルガイドから定義済みの色を選択するか、カスタム色を作成できます。カスタムカラーピッカーを使用する場合は、スライダーを使用して色を選択するか、特定のHEXコードを入力できます。
コントロールパネル
コントロールパネルは、ページエディタのすべてのコンテナ(セクション、行、Flex、および要素)の下部に表示され、そのコンテナの重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。
-
ALL: コンテナはすべてのデバイス (デスクトップ、タブレット、モバイル) に表示されます。
-
デスクトップ (🖥️**) アイコン**: コンテナはデスクトップ ビューでのみ表示されます。
-
モバイル(📱)アイコン:コンテナはモバイルビューでのみ表示されます。
-
目 (👁️) アイコン: これを使用して、ページからコンテナを非表示にします。クリックすると、コンテナはエディターで非表示になりますが、削除されません。上部のナビゲーションバーの レイアウト メニューをクリックして、非表示のコンテナーを見つけることができます。すべて、デスクトップ、または モバイル アイコンを選択して、エディターで再表示します。
-
コード (
</>): このコンテナのコードエディタを開き、カスタム CSS を追加してスタイルを変更できます。エディタにはコンテナの CSS IDセレクター が表示されるため、CSS をこのコンテナだけに適用できます。設定パネル上部のコードアイコンから開くか、ページ上のコンテナにカーソルを合わせてツールバーの コード をクリックします。 -
ごみ箱 (🗑️**) アイコン**: ページ エディターからコンテナーを完全に削除します。
詳細設定
コンテナ (セクション、行、列、および要素) をさらにカスタマイズするために、ClickFunnels には、スタイル、高度な CSS、アニメーション、およびレンダリング ロジックを制御できる 詳細 設定が用意されています。これらの高度な機能を専用の記事に分けて、1 か所にまとめたコンテンツが多すぎて圧倒されないようにし、ドキュメントを簡潔に保ちます。詳細については、次のリソースを参照してください。
-
詳細設定 - スタイルのカスタマイズ: コンテンツを動的に入力し、コンテナーを配置し、z-index を適用する方法について説明します。
-
詳細設定 - アニメーションのカスタマイズ: アニメーションの追加方法、出入り効果の制御方法、アニメーション遅延の調整方法を学習します。
-
詳細設定 - ロジックのカスタマイズ: 条件付きロジックを要素に適用し、カスタム属性を追加する方法を学習します。
商品カルーセルのプレビュー
Section titled “商品カルーセルのプレビュー”チェックアウト ページを設定したら、さまざまなデバイスでどのように表示されるかをプレビューすることが重要です。そうすることで、スムーズなユーザー エクスペリエンスを確保するために必要な調整を行うことができます。商品カルーセルをプレビューするには、次の手順に従います。
-
ページエディタで、右上隅に移動し、目 👁️アイコンをクリックします。
-
または、ファネルに移動し、ページのサムネイルにあるページ URL をクリックすることもできます。
-
ページが新しいタブで開き、商品カルーセル要素に商品画像が自動的に表示されます。
