SeedProd ドキュメント

SeedProd のドキュメント、リファレンスマテリアル、チュートリアル

カートブロック (Easy Digital Downloads)

EDDカートブロックを使用すると、Easy Digital Downloadsストア用のカスタマイズされたショッピングカートページを作成できます。このブロックは、スタイリング、レイアウト、およびビジュアルプレゼンテーションを完全に制御してカートの内容を表示し、ブランドに合ったプロフェッショナルなカートエクスペリエンスを作成するのに役立ちます。

デザイン性の高いカートページは、販売完了とカート放棄の削減に不可欠です。このブロックを使用すると、ヘッダーのタイポグラフィやボタンのスタイルから、商品リストや価格表示まで、カートの外観のあらゆる側面をカスタマイズできます。顧客に自信を与え、チェックアウトへとスムーズに誘導するカートページを作成しましょう。

要件: EDDカートブロックは、当社のElite ライセンスプランで利用可能です。開始する前に、Easy Digital Downloadsがウェブサイトにインストールされており、いくつかのダウンロード商品が公開されていることを確認してください。

ショッピングカートレイアウトを表示するEDDカートブロック

EDDカートブロックをページに追加する

SeedProdページにEDDカートブロックを追加するには、次の手順に従ってください。

ステップ1:ブロックを追加する

デザイン > ブロック > Easy Digital Downloadsの下にあるカートブロックを、ページの目的のセクションにドラッグアンドドロップします。

EDDカートブロックをページにドラッグ

EDDカートブロックはEasy Digital Downloadsの下にあり、カスタムカートページを作成するために追加できます。

ステップ2:デザインをカスタマイズする

追加したら、EDDカートブロックをクリックして設定を開きます。スタイルタブで、カートのビジュアルの外観をカスタマイズできます。

ヘッダー:

  • タイポグラフィ:「カート」やセクションタイトルなどのカートヘッダーのフォントファミリー、サイズ、太さ、スタイルを含むフォントプロパティを制御します。
  • ヘッダーカラー:ブランドに合わせてヘッダーテキストの色を設定します。

ボタン:

  • ボタンのスタイル:「カートを更新」や「チェックアウトに進む」などのカートボタンのビジュアル処理を選択します。オプションには、フラット(モダンなフラットデザイン)、2D(微妙な奥行き)、ビンテージ(クラシックな外観)、ゴースト(境界線付きの透明)、またはリンク(プレーンテキストリンク)があります。
  • ボタンカラー:カートアクションボタンの背景色を設定します。
  • 角丸: ボタンの角の丸みを調整します。値が大きいほど角が丸くなり、ゼロにするとシャープな角になります。

カート:

  • カートの境界線カラー:カートテーブルや要素の周りの境界線の色を設定します。
  • カートの境界線の幅:カート要素の周りの境界線の厚さ(上、右、下、左)を調整します。
  • 背景色:カートテーブルまたはコンテナの背景色を設定します。
  • 商品テキストカラー:カート内の商品名と説明のテキストカラーを選択します。
  • 商品タイポグラフィ:商品名と説明のフォントプロパティを制御します。
  • 価格テキストカラー:カート内の価格表示のテキストカラーを設定します。
  • 価格タイポグラフィ:価格のフォントプロパティをカスタマイズします。
  • 合計テキストカラー:カート合計金額のテキストカラーを選択します。
  • 合計タイポグラフィ:小計や総計を含む合計金額のフォントプロパティを制御します。
  • リンクカラー:カート内のクリック可能なリンク(「削除」や商品リンクなど)の色を設定します。
  • リンクのタイポグラフィ: カートリンクのフォントプロパティをカスタマイズします
EDDカートのスタイル設定

スタイルタブには、ヘッダー、ボタン、およびすべてのカート表示要素をカスタマイズするための包括的なオプションが用意されています。

ステップ3:高度なオプションを設定する

詳細設定タブでは、EDDカートブロックをさらにカスタマイズできます。

間隔:

  • マージン: カートブロックの外側の間隔(上、右、下、左)を制御します。これにより、カートと周囲の要素の間のスペースが決まります。
  • パディング: カートブロックの内側の間隔(上、右、下、左)を調整します。これにより、カートの内容とその端の間に十分なスペースができます。

属性:

  • CSS ID: カートブロックの一意の自動生成IDを表示します。このIDは、カスタムスタイリングまたはJavaScriptのターゲット設定のためにSeedProdによって自動的に作成されます。
  • カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するために、カスタムCSSクラスを追加します。
  • カスタム属性: カートラッパー要素に任意のHTML属性を追加します。属性名|値の形式で各属性を新しい行に入力します(例: data-cart|edd-cart)。

デバイス表示:

  • デスクトップで非表示: デスクトップ画面でカートブロックを非表示にします。
  • タブレットで非表示: タブレットデバイスでカートブロックを非表示にします。
  • モバイルで非表示: モバイルデバイスでカートブロックを非表示にします。

アニメーション効果:

  • 表示アニメーション: カートがビューにスクロールされたときに再生されるさまざまなアニメーション効果から選択します。オプションには、バウンス、フェードイン、ズームイン、ローテートインなどがあります。
EDDカートの詳細設定

「高度な設定」タブには、間隔、カスタム属性、デバイスの表示設定、アニメーション効果のオプションがあります。

ステップ4:変更を保存

EDDカートブロックの設定と外観のカスタマイズが完了したら、必ず作業を保存してください。


EDDカートブロックをページに追加しました!このカスタマイズ可能なカート表示は、ブランドに合わせてプロフェッショナルなショッピング体験を作成し、顧客をスムーズにチェックアウトに誘導するのに役立ちます。さまざまな色、タイポグラフィ、ボタンのスタイルを試して、信頼を築き、カート放棄を減らすカートページを作成してください。

関連記事