VizupCommerce

スライダーウィジェットのカスタマイズ方法

スライダーの外観を変更する方法

ステップ1:デザインのカスタマイズボタンをクリックする

幅と高さ

幅と高さの設定を使用して、動画やウィジェットの幅と高さを指定できます。デザイン内でバランスよく収まるように調整できます。

タグ付きコンテンツの配置

レイアウト内でコンテンツをどこに配置するかを選択できます。中央揃えまたは左揃えにできます。全体的な見た目を決めるのに役立ちます。

中央揃えの例

Center Alignment - Output
この画像はコンテンツを中央揃えにした場合の見た目を示しています。

左揃えの例

Left Alignment - Output
この画像はコンテンツを左揃えにした場合の見た目を示しています。

動画カードのシャドウを削除する

「動画カードのシャドウを削除」トグルにより、動画カードのシャドウ効果の表示を制御できます。このオプションは「はい」と「いいえ」の2つの状態を持つトグルスイッチとして表示されます。

  • はい:「はい」にトグルすると、動画カードのシャドウ効果が非表示になり、スッキリとしたモダンな見た目になります。

  • いいえ:「いいえ」にトグルすると、シャドウ効果が通常どおり表示され、動画カードに奥行きとコントラストが生まれます。

自動ループスライダー

「自動ループスライダー」設定では、自動で再生されるスライダーのオン/オフを切り替えることができます。オンにすると、スライダーは手動操作なしに画像や動画をループで連続表示します。この機能は、一連の画像や動画をシームレスかつ効率的に紹介するのに最適です。

動画カードプレビュー

「動画カードプレビュー」設定では、動画カードの表示方法を選択できます。3つの素晴らしいオプションからお選びください!

オプション:

  1. ループ再生

    • これを選ぶと、表示された瞬間から動画が繰り返し再生されます。確実に見てもらえるのでおすすめです!
  2. ホバー時に再生

    • このオプションを選ぶと、マウスを動画カードの上に移動したときだけ動画が再生されます。ホバーするだけでプレビューが見られるので楽しいです!
  3. 画像を表示

    • このオプションは、動画を再生する代わりに静止画像を表示します。画像は動画のカバーとして機能します。リソースを節約したい場合や、シンプルな見た目にしたい場合に適しています。
Show Image - Output

動画カードのカートに追加

「動画カードのカートに追加」設定では、動画カード上の「カートに追加」ボタンの表示を制御できます。この機能により、お客様の購入プロセスを合理化できます。

オプション:

  • はい:有効にすると、「カートに追加」ボタンが動画カードに直接表示され、お客様はナビゲーションを追加することなく素早くカートに追加できます。

    Add to Cart Button Enabled
  • いいえ:無効にすると、「カートに追加」ボタンが動画カードから非表示になり、よりクリーンでミニマルな外観になります。

    Add to Cart Button Disabled

タグ付き商品デザイン

「タグ付き商品デザイン」設定では、動画カードにタグ付き商品をどのように表示するかを選択できます。3つの優れたオプションからお選びください!

オプション:

  1. カード

    • 「カード」デザインは、白い背景に商品画像、タイトル、価格を縦に並べたクリーンなレイアウトが特徴です。カスタマイズ可能な配置(左または中央)とクリックインタラクションをサポートし、シームレスなユーザーエンゲージメントを実現します。
    white container - Output
  2. オーバーレイ

    • 「オーバーレイ」デザインは、動画カードの下部に商品画像、タイトル、価格を表示するスリークな黒いグラデーションオーバーレイを採用しています。クリックインタラクションをサポートし、モダンで魅力的なユーザーエクスペリエンスを提供します。
    black gradient - Output
  3. ミニマリスト

    • 「ミニマリスト」デザインは、商品タイトルと価格を縦に並べたクリーンでシンプルなレイアウトが特徴です。ライトなテキストテーマを使用し、簡単なユーザーエンゲージメントのためのクリックインタラクションをサポートします。
    simple align - Output
← Back to All Tutorials