thumbnail

eギフトバッジ設定


ユーザーがeギフト対象商品を瞬時に判別できるよう、商品画像にバッジをつけられる機能です。

  • 商品詳細ページの表示イメージ

  • 商品一覧の表示イメージ


  1. アプリ > All in gift > 設定 > eギフトバッジ設定 > eギフトバッジを設定する にチェックを入れる

  1. 商品画像上の設置箇所を設定

  1. ストアで用意したeギフトバッジ画像をアップロード

    1. 既に登録されている画像を変更したい場合は、画像アップロード枠内をクリックすると画像データ選択ができます

  1. 表示させたいサイズ(縦)(横)をpxで入力します。

  1. 保存を押して完了です。

※登録済み画像を削除したい場合はeギフトバッジ画像を削除を押す

  • OS2.0テーマをご利用の場合:STEP1の設定のみで表示されます。

  • OS2.0テーマ以外をご利用の場合:以下の手順でテーマコードの編集が必要です。

  1. オンラインストア > テーマ > コードを編集 をクリック

  1. sections/main-product.liquid を検索(例:Spotlight)

※ファイル名はテーマによって異なります。

  1. 以下のコードを任意の箇所に追加する

Plaintext
<div class="sns-gift-product-container"
    data-product-image="{{ product.featured_image | image_url }}"
></div>
  1. 保存をクリックして完了です

テーマのバージョンに限らずテーマコードの編集が必要です。

  1. オンラインストア > テーマ > コードを編集

  1. snippets/card-product.liquidを検索(例:Spotlight)

    ※ファイル名はテーマによって異なります。

  1. 以下のコードを任意の箇所に追加する

Plaintext
<div class="all-in-gift-e-gift-badge" 
    data-product-variant-id={{ card_product.selected_or_first_available_variant.id }} 
    data-product-image={{ card_product.featured_image.src | image_url }}
    data-e-gift-badge-image-width="50"
    data-e-gift-badge-image-height="50"
  ></div>
  • 商品id:

Plaintext
data-product-variant-id
  • 商品画像:

Plaintext
data-product-image
  • バッジの横幅ピクセル:

Plaintext
data-e-gift-badge-image-width
  • バッジの縦幅ピクセル:

Plaintext
data-e-gift-badge-image-height
  1. data-e-gift-badge-image-width (横幅 px)data-e-gift-badge-image-height (縦幅 px)に任意の画像サイズを入力

  2. 保存をクリックして完了です