コンテンツにスキップ

初期設定ガイド

このマニュアルでは、ShopifyストアにAnyGiftのeギフト機能を導入するための初期設定手順をご案内します。

全部で7ステップあります。こちらをご対応いただくことで、購入者が受取者の住所を知らなくてもギフトを贈れる仕組みがオンラインショップ上でご活用いただけます。

STEP1. eギフトを有効にする商品と、購入方法の選択肢を表示するページを設定する

このステップではeギフトを適用する商品および購入方法の選択ボタンを表示する対象を設定します。

Shopify管理画面 > AnyGiftアプリ > 初期設定 > STEP1 にて、[STEP1の設定をする]を押下し、eギフト設定にてeギフトを適用させる商品を選択してください。

※初期値はすべての商品が選択されています。

(1)AnyGiftを適用させる商品を選択する

AnyGiftを適用させる商品の選択肢は、3パターンあります。

  • オンラインショップにある全ての商品にAnyGiftを適用させたい場合 → すべての商品をeギフト設定する にチェックを入れ[保存]を押下する
  • オンラインショップにある指定した商品のみAnyGiftを適用させたい場合 → 指定した商品のみeギフト設定する にチェックを入れ、公開中の商品を選択する のポップアップ画面内で該当の商品を選択した後、[保存]を押下する
  • オンラインショップにある指定した商品以外にAnyGiftを適用させたい場合 → 指定した商品以外をeギフト設定する にチェックを入れ、公開中の商品を選択する のポップアップ画面内で該当の商品を選択した後、[保存]を押下する

※ 上記で選択した設定、かつ、配送が必要な商品のみ適用されます。

(スクリーンショット:Shopify管理画面 > AnyGiftアプリ > eギフト設定

(2)購入画面のどの箇所にAnyGiftボタンを表示させるか設定する

AnyGiftボタンを表示させる選択肢は、3パターンあります。

商品ページのみにチェックを入れた場合、商品ページ内でAnyGiftボタンが表示されます。

カートページのみにチェックを入れた場合、商品を追加した後のカートページにAnyGiftボタンが表示されます。

商品ページとカートページの両方にチェックを入れた場合、商品ページ内および商品を追加した後のカートページにAnyGiftボタンが表示されます。

(スクリーンショット:Shopify管理画面 > AnyGiftアプリ > eギフト設定

上記設定すると、実際の画面では以下のような表示になります。

(スクリーンショット:画像左 商品ページ、画像右 カートページ)

STEP2. テーマの「カスタマイズ」からアプリを埋め込む

このステップでは、ボタンをオンラインショップ上に実際に表示させます。

Shopify管理画面 > AnyGiftアプリ > 初期設定 > STEP2 にて、[STEP2の設定をする]を押下します。

埋め込みアプリを押下し、AnyGiftの欄でボタンを有効にします。 AnyGiftボタンを有効にすると、即時反映され、オンラインショップ上でAnyGiftボタンが表示されます。

(スクリーンショット:埋め込みアプリでAnyGiftを有効にする)

STEP3. 現在ご利用している「受注管理システム(OMS)」を選択する

Shopify管理画面 > AnyGiftアプリ > 初期設定 > STEP3 にて利用されている受注管理システム(OMS)を選択し、[保存する]を押下します。

これにより、AnyGiftで商品が購入された際に、注文の取り込みなどを自動連携できるようになります。

※ 一部のOMSでは完全な自動連携ができない場合があります。

(スクリーンショット:OMS選択画面)

AnyGiftの特性上、購入時点で地域に応じた配送料金を判断することができません。そのため、AnyGiftが購入された際には送料を一律で設定する機能を用意しています。

[eギフト送料設定]を有効にすると、受取者が住所を入力した際に、Shopify側で設定している送料は適用されないようになります。

また、付属するオプション機能として以下2つの機能がありますので、商品の特性に応じて送料をカスタマイズすることができます。


▼オプション機能

[eギフト用の送料無料設定]では、AnyGiftとして購入された商品が任意の金額以上の場合は送料を無料にできます。

[商品別のeギフト送料設定]では、eギフト送料とは別で、商品ごとに送料を決めることができます。


なお、AnyGiftを利用される際には[eギフト送料設定]を有効にすることを推奨しています。

それでは、eギフト送料設定に関する各種機能の設定方法をご案内します。

STEP4. eギフト用の送料を決定する

Shopify管理画面 > AnyGiftアプリ > eギフト送料設定 にて、金額を入力し、[保存する]を押下します。

これによりAnyGiftボタンから商品が購入された際の送料を設定できるようになり、国内どの地域への配送も一律で設定した送料になります。

なお、eギフト送料を設定しない場合は、購入者が購入時に入力した住所に基づき送料が設定されます。

(スクリーンショット:eギフト送料設定画面)

(1) 指定額以上の商品の送料を無料にする

Shopify管理画面 > AnyGiftアプリ > eギフト用の送料無料設定 にて、金額を入力し、[保存する]を押下します。

これにより、AnyGiftとして購入された商品が指定した金額以上の場合は、送料を無料にできますので、追加購入の促進、客単価の向上に期待することができます。

(スクリーンショット:eギフト用の送料無料設定画面)

(2) 商品別で送料を指定する

(1)Shopify管理画面 > AnyGiftアプリ > 商品別のeギフト送料設定 > 作成する にてSTEP1〜4の設定をし、[保存]を押下します。

(スクリーンショット:商品別のeギフト送料設定画面)

(2)STEP1〜4にて、それぞれの値を設定します。

(スクリーンショット:STEP詳細設定画面)

なお、STEP3内の条件選択肢にある [商品タグ] と [販売元] について、[商品タグ]とはShopify上で商品に付けることができるタグのことです。指定したタグが付いている商品に対して、STEP2で入力した送料が適用されます。

また、[販売元]とは、STEP2の送料を適用させるための名称のことです。販売元が付与された商品はグルーピングされ、STEP2で入力した送料が適用されます。

<例>

[商品タグ]の設定イメージ

  • 商品側で 冷凍 という名称でタグを付ける
  • STEP3で タグ=冷凍 と指定する
  • 冷凍 のタグがついた商品に対してSTEP2の送料が適用される

[販売元]の設定イメージ

  • 販売元を 冷凍 という名称で設定する
  • 該当商品をそれぞれの販売元に紐づける
  • グルーピングされた商品は、STEP2の送料が適用される

注意

  • 複数設定されている場合は、[販売元]の設定よりも[商品タグ]の設定が優先されます。
  • 一つの商品に、複数の商品別送料が設定されている場合は、最も高い送料が適用されます。
  • [商品別のeギフト送料]に該当する商品は、[eギフト用の固定送料]は適用されず、[商品別のeギフト送料]が優先して適用されます。
  • [eギフト送料設定]および[商品別のeギフト送料設定 ]にて、異なる送料の商品を同時に購入した場合は、送料が合算されます。

(3)【EXPERTプラン限定機能】

商品ページ上に[複数の相手にそれぞれeギフトで贈る]ボタンを表示し、ボタン押下により商品を購入した際の送料を設定することができます。

なお、購入者が負担する送料 = 複数配送時のeギフト送料 × 配送先数(受取者数)になります。

また、[eギフト送料設定]を設定していない場合は、Shopify側で設定している送料が適用されます。

(スクリーンショット:商品ページ上の見え方)

(スクリーンショット:管理画面上の設定ページ)

Shopify管理画面 > AnyGiftアプリ > 複数配送先の設定 にて、STEP1〜STEP3の設定をします。

  • STEP1:有効にしたい商品を選択する
    ※ 全ての商品 or 商品ごとに設定できます。
  • STEP2:複数配送時のeギフト送料を設定する
    ※ [複数の相手にそれぞれeギフトで贈る]ボタンを押下し、1回決済した場合に適用される送料です。
    ※ [商品別のeギフト送料]で個別に送料を設定している場合は[商品別のeギフト送料]の送料が適用されます。
  • STEP3:複数配送先の機能を有効にする
    ※ 商品ページ上で[複数の相手にそれぞれeギフトで贈る]ボタンが表示されます。

ボタンの表示設定をおこなった後、購入と受け取りを試し、購入者の体験および管理画面上の動作に問題がないか確認をしてください。

STEP5. eギフトのテスト購入を行う

購入者・受取者の体験を確認する

(1)購入者の体験をテストする

  1. オンラインショップの商品ページにて、AnyGiftボタンが表示されているか確認します。AnyGiftボタン内の文字はテーマのフォントが適用されます。
    なお、ボタンの文言などはCSSでカスタマイズすることができます。

  2. [住所を知らない相手にeギフトで贈る]をタップし、メッセージと贈り主名の入力欄にメッセージと贈り主の名前を入力できることを確認します。なお、メッセージは100文字以内、贈り主名は20文字以内まで入力できます。

  3. [プレビュー]を押下し、受取者がURLにアクセスした際の画面が表示されていることを確認します。

  4. カートページに進みカート内の商品情報欄にて、以下の文言が表示されているか確認します。なお、ドロワーカートには対応していないため、ドロワーカート内では表示されません。

    ギフト購入:有効
    ギフトメッセージ:入力した任意の文字列
    ギフト贈り主:入力した任意の文字列
    
  5. チェックアウト画面で、以下の文言が表示されているか、および、設定したeギフト送料が正しく反映されているかを確認します。

    ギフト購入:有効
    ギフトメッセージ:入力した任意の文字列
    ギフト贈り主:入力した任意の文字列
    

    なお、仕様上、[eギフト固定送料]が有効になっている場合、チェックアウトページでの商品画像は表示されません。

  6. 注文が完了するとすぐに購入完了メールが購入者のメールアドレス宛に送信されることを確認します。

(2)受取者の体験をテストする

前提として、購入者は、購入完了メール本文内に記載しているURLをコピーし、SNSやメールなどを介して受取者にURLを伝えます。

URLを受け取った受取者が受取URLにアクセスし、ギフトを受け取るまでの流れをご紹介しますので、下記の手順に沿って確認をお願いします。

  1. 受取URLにアクセスし、[eギフトを受け取る]を押下のうえ、氏名、住所、電話番号、メールアドレスが入力できることを確認します。

  2. [確定する]を押下し、最終確認画面が表示されることを確認します。

Info

  • メール本文内に記載しているURLを「受取URL」といいます。
  • 受け取り期限日の初期値は、注文日から5日間です。変更したい場合は、AnyReachにお問い合わせください。
  • 受け取り期限日以内に受取者が受け取りをしなかった場合は、購入者が入力した住所に配送されます。

(3)受け取り後のメール受信を確認する(購入者・受取者)

受け取り者が、ギフトの受け取りをすると購入者と受取者にメールが送信されます。双方にメールが送信されることを確認します。

管理画面上での流れを確認する

eギフトが購入された際の管理画面上の挙動を確認します。

(1)クレジットカードもしくはAmazon Payにてeギフトで商品が購入されると、管理画面上で決済用注文と受取用注文の2つの注文がすぐに作成されていること、いずれの注文も、決済状況のステータスは支払い済み、フルフィルメント状況のステータスは保留になっていることを確認します。

※ ShopifyのAnyGiftアプリは後払いに対応していません。

(2)受取者が受取URLにアクセスし、住所を入力すると、受取用注文のフルフィルメント状況のステータスが未発送に変わっていること、および、受取用注文の詳細ページ内で配送先住所が入力されていることを確認します。

(3)商品を発送し、フルフィルメントを「発送済み」に変更した場合、決済用注文と受取用注文共に、フルフィルメント状況のステータスが発送済みになっていることを確認します。

STEP6. 【重要】eギフト注文時、購入者と受取者の情報が適切に匿名化されていることを確認する

概要

  • 弊社の機能により、マイページのeギフト購入の配送先住所は非表示にする対応をしております。
  • ですが、事業者様のShopifyのカスタマイズ状況によって、マイページのeギフト商品の配送先住所が表示されている状態がございます。
  • その際のカスタマイズ方法をこちらの手順でご説明いたします。

手動での対応方法

1. メインテーマのコードを編集を開く

[オンラインストア] → メインテーマの[…] → [コードを編集]を開きます。

スクリーンショット 2022-11-21 13.57.15

2. 注文詳細ページのLiquidファイルを開く

通常、customers/order.liquid が対象のファイルになります。
※ 新しめのテーマの場合、sections/main-order.liquid 等が対象の場合があります。

3. 配送先住所の表示箇所について、修正を行う

order.shipping_address でファイル内を検索し、配送先住所の表示箇所を特定します。

スクリーンショット 2022-11-21 13.59.08

該当箇所について、{% unless order.tags contains 'eGift' %} ~~ {%- endunless -%} で囲むように修正してください。

修正前

<div>
  <h2>{{ 'customer.order.shipping_address' | t }}</h2>
  <p>
    <strong>{{ 'customer.order.fulfillment_status' | t }}:</strong>
    {{ order.fulfillment_status_label }}
  </p>
  {{ order.shipping_address | format_address }}
</div>

修正後

{% unless order.tags contains 'eGift' %}
<div>
  <h2>{{ 'customer.order.shipping_address' | t }}</h2>
  <p>
    <strong>{{ 'customer.order.fulfillment_status' | t }}:</strong>
    {{ order.fulfillment_status_label }}
  </p>
  {{ order.shipping_address | format_address }}
</div>
{%- endunless -%}

Tip

こうすることで、通常の注文時のみ、注文詳細の配送先住所を表示する、ということが実現できます。
※ eギフト時は、表示されなくなります。

4. eギフト注文と通常注文を行い、マイページでの動作確認を行う

eギフトの場合は「配送先住所」欄が非表示になっていることを確認します。

通常注文時

スクリーンショット 2022-11-21 14.19.19

eギフト時

スクリーンショット 2022-11-21 14.18.57

STEP7. 購入完了ページにAnyGiftのUIを追加する

概要

  • Checkout Extensibilityにupdateすると今までの購入完了ページでのUIが表示されなくなります。
  • AnyGiftのCheckout Extensibilityを設定することで、ギフト共有のURLを表示させることができます。

対象のお客様

  • 2025年2月1日以降にAnyGiftをダウンロードしたお客様
  • Checkout Extensibilityへ移行したお客様

設定方法

  1. ストアの画面のサイドバーの「設定」から設定ページを開く

  2. 設定ページの「チェックアウト」を選択、設定内の「カスタマイズ」を選択し、ページカスタマイズ画面を開く

  3. 「アプリ」>「egift-thankyou-ui」のプラスボタンを押し、追加先の「サンキュー」を選択

  4. 「保存」ボタンを押し、設定を保存する