テワタシのご利用方法
Shopifyアプリ テワタシでは店舗受け取りとローカルデリバリーに必要な機能を提供しています。
店舗受け取りだけの対応やローカルデリバリーだけの対応、もしくは両機能の併用など用途に応じて使い分けできます。この記事ではテワタシの各機能をご利用いただくために必要な設定方法をご紹介します。
解説動画
解説動画を用意しています。導入前にぜひご参照ください。
テワタシ導入フロー
Shopifyでテワタシを導入するために必要なフローは以下となります。
1. Shopifyでの設定
2. プラン選択
3. 店舗情報の設定
4.テーマへの反映
5. 店舗受け取りの設定（任意）
6. ローカルデリバリーの設定（任意）
7. 購入テスト
1 Shopifyでの設定
テワタシの機能は店舗検索、店舗情報表示、商品受け渡しに関わるオプションの受付などサイトのUI/UX向上に特化しています。決済や注文を受け付けてからのフローは、Shopifyが標準で提供する店舗受け取りやローカルデリバリー機能をご活用ください。
以下Shopifyの設定は必須ではありません。ストアの運用形態に合わせ、導入を検討してください。
店舗受け取りやローカルデリバリーを行うにあたりShopifyで必要な設定を行います。
まずShopify管理画面の「設定」からローケーションを選択してください。
デフォルトのロケーションが店舗の住所と相違ないか確認してください。
ロケーションについて
次に「配送と配達」を開き、店舗受け取りやローカルデリバリーの設定を行います。
「管理をする」から商品の受け渡しで必要な情報を登録します。
Shopify店舗受け取りの設定
① 店舗受け取りとオンライン販売をどちらも受け付ける場合
1つのローケーションで店舗受け取りとオンライン販売どちらも受け付ける場合は以下設定を利用いただけます。
この場合、「オンライン注文の受取を設定する」に記載されている条件を満たす必要があります。
店舗受け取りの場合は「このロケーションでは店舗受取を提供しています」にチェックを入れます。
＊ユーザーが店舗受け取りを行う場合の配送料は無料となり、変更することができません。
Shopifyで店舗受け取りを設定するとチェックアウトの配達方法セクションで、「配送」と 「受取」 のオプションが表示されます。
ただし、利用にあたり制限が設けられているため以下チェックアウト体験の注意事項をご確認の上、ご判断ください。
チェックアウト体験
＊ テワタシの機能自体はShopifyの店舗受け取り設定を利用しない場合でも使用いただけます。
その他Shopifyで設定できる店舗受け取りの内容は以下をページを参照してください。
オンライン注文の受取を設定する
情報入力画面で選択肢自体を表示させたくない場合は②の方法でご対応ください。
② 店舗受け取り商品とオンライン販売商品を分けて販売する場合
店舗受け取り用のロケーションを①と同様にセットしますが、作成したローケーションに送料を紐付けないようにします。
オンライン販売用のローケーションを別で作成し、発送元の送料を指定してください。
また、商品管理で各商品のロケーションを販売方法に応じて設定します。
この場合、アプリの受注設定で配送方法の異なる商品が含まれることがないよう設定することをオススメします。
Shopifyローカルデリバリーの設定
① ローカルデリバリーとオンライン販売をどちらも受け付ける場合
1つのローケーションでローカルデリバリーとオンライン販売どちらも受け付ける場合は以下設定を利用いただけます。
この場合、「オンライン注文のローカルデリバリーを設定する」に記載されている条件を満たす必要があります。
ローカルデリバリーの場合は「このロケーションではローカルデリバリーを提供しています」にチェックを入れます。
配達エリアを郵便番号もしくは範囲から選択します。テワタシは郵便番号を起点に配送可能エリアを検索するため、郵便番号で設定することを推奨します。
Shopifyでローカルデリバリーを設定するとチェックアウト時に配送オプションとしてローカルデリバリーが表示されます。
ただし、利用にあたり制限が設けられているため以下チェックアウト体験の注意事項をご確認の上、ご判断ください。
チェックアウト体験
＊ テワタシの機能自体はShopifyのローカルデリバリー設定を利用しない場合でも使用いただけます。
その他Shopifyで設定できるローカルデリバリーの内容は以下をページを参照してください。
オンライン注文のローカルデリバリーを設定する
通常のオンライン販売とローカルデリバリーの選択肢をユーザーに表示させたくない場合は②の方法でご対応ください。
② ローカルデリバリー商品とオンライン販売商品を分けて販売する場合
ローカルデリバリーとオンライン販売のロケーションを分けて登録し、それぞれに配送料金を付与します。
また、商品管理で各商品のロケーションを販売方法に応じて設定します。
この場合、アプリの受注設定で配送方法の異なる商品が含まれることがないよう設定することをオススメします。
2 プラン選択
ライトプラン、スタンダードプランから用途に応じてプランを選択いただけます。
店舗受け取りもしくはローカルデリバリーどちらか一方だけで運営される場合はライトプランがオススメです。2店舗以上で運営したり、店舗受け取りとローカルデリバリーどちらも利用されたい場合はスタンダードプランをご利用ください。
- ライトプラン: 小規模、単一店舗向け
- スタンダードプラン: 大規模、複数数店舗向け
一度プラン選択した後にプラン変更すると変更のタイミングで無料トライアルが適用されなくなります。無料トライアルを利用される場合はご注意ください。
3 店舗情報の設定
テワタシのアプリ管理画面で設定ページを開きます。
店舗一覧から最大で200店舗（スタンダードプランの場合）まで登録できます。新規作成で店舗情報の登録が行えます。
店舗情報
店舗受け取りやローカルデリバリーで必要な店舗情報を登録しましょう。
「Shopifyに登録されているロケーションを取得する」を押下すると自動でストアに登録されたデフォルトのロケーション情報が出力されます。
Googleマップ埋め込みコードを生成すると店舗情報として表示するマップが出力されます。
細かく位置情報を設定したい場合は以下の「地図やルートを埋め込む」手順に従い、コードを取得してください。
Googleマップ埋め込みコード発行手順はこちら
画像を設定すると指定画像が店舗受け取りのマップ下部に表示されます。
画像のアップロードはShopifyのファイル管理機能をご利用いただくのがおすすめです。
ファイル管理ページで画像のURLをコピーし、入力フィールドに登録します。
注文メタフィールド設定
注文メタフィールド設定を利用するとユーザーが選択した受け取り日時などを注文メタフィールドへ保存できるようになります。
Shopify Flowなど他アプリとの連携にご利用いただけます。
注文管理画面では以下のように表示されます。
受注設定
1. 通常配送の受付可否
通常配送の受付可否を有効化すると受け取り方法や受付日時の選択が任意となり、商品単位で通常の配送方法も受け付けることができるようになります。
ストアカート画面では以下のように店舗受け取り、デリバリーが未選択の状態で表示されます。
※ こちらの機能を利用する場合は送料計算にご注意ください。アプリ側では商品の受け渡し方法に応じた送料付与判断が行われないため、運用形態に合わせ別途Shopify側で送料を調整いただく必要があります。
2. 商品ごとに配達方法を指定する設定
オンライン限定商品や店舗受け取り、ローカルデリバリー専用商品がある場合は配達方法毎にタグを商品情報に付与して管理いただけます。タグ名は自由に決めることができます。
商品管理から「タグ」の入力フィールドへ作成したタグを登録してください。
例えば店舗受け取り専用商品とオンラインストア販売専用商品がカートに含まれた場合はカート画面で次のようなメッセージが表示され、異なる配送方法が混在した購入を防ぐことができます。
4 テーマ反映
テーマ反映では利用テーマにUIパーツの出力に関わる設定を行います。
アプリブロック、埋め込みアプリにテーマがそれぞれ対応しているかアプリで表示されます。
対応している場合はテーマのカスタマイズ画面を開き、それぞれUIパーツの設置を行なってください。
カート画面で受け渡し日時などを受け付ける場合は「受け取り方法確認ブロック」を利用いただけます。テーマにアプリブロックが対応している場合、カスタマイズ画面でカートページを展開します。
カートページの小計セクションで「ブロックを追加」を選択し、「受け取り方法確認ブロック」を探します。対象ブロックが見つかったら追加してください。
店舗受け取りやローカルデリバリーの設定をしていない場合、この時点で要素は出力されません。
埋め込みアプリが対応している場合は、テーマカスタマイズ画面の「テーマの設定」で「ヘッダー検索エリア」を有効化できます。
ヘッダー検索エリアは有効化するとヘッダー上部に固定されます。
埋め込みアプリやアプリブロックを利用しない場合や未対応のテーマをご利用の場合は次の手順で反映を行なってください。
「1. アプリブロックおよび埋め込みアプリを利用せずにテーマ反映する」で有効化します。
自動設置を選択すると購入ボタン上部に要素が自動出力されます。手動設置を選択すると設置コードが出力されます。
手動設置コードをテーマに設置すると要素が出力されます。
表示設定
表示設定ではアプリで出力されるUIパーツのスタイルが調整できます。
その他のオプション設定
その他のオプション設定にテキストを入力すると、カート画面でオプションの入力フィールドが表示されます。
入力されたテキストはフォームのプレースホルダーとして表示されます。
5 テワタシ店舗受け取りの設定
店舗毎に店舗受け取りの管理情報が登録できます。
店舗毎に受け取りの機能をON/OFFで切り替えることができます。
受付時間で店舗が受け渡し可能な時間帯を設定できます。
設定内容は店舗情報およびカート画面での受け取り時間の選択内容に反映されます。
準備時間を設定すると注文時の時間選択肢に、現在時間 + 準備時間を加算した時間が反映されます。
（例）現在時間：10時 + 準備時間：30分 → 10時30分以降の選択肢から注文可能
時間単位を設定すると注文時の配送時間の選択肢に反映されます。
たとえば15分とすると、15分おきの選択時間がカート画面で出力されます。
休業日を選択すると店舗情報およびカート画面での受け取り日時に反映されます。
注意文言を設定するとカート画面に文言が表示されます。
6 テワタシローカルデリバリーの設定
店舗毎にローカルデリバリーの管理情報が登録できます。
店舗毎にローカルデリバリーの機能をON/OFFで切り替えることができます。
受付時間で店舗が受け渡し可能な時間帯を設定できます。
設定内容は店舗情報およびカート画面での受け取り時間の選択内容に反映されます。
配送エリアに配達可能なエリアの郵便番号を登録します。登録された郵便番号をもとにユーザーは配達エリアの検索を行います。
準備時間を設定すると注文時の時間選択肢に、現在時間 + 準備時間を加算した時間が反映されます。
また、配送エリアを検索した際の、目安の配送待ち時間にも反映されます。
（例）現在時間：10時 + 準備時間：30分 → 10時30分以降の選択肢から注文可能
時間単位を設定すると注文時の配送時間の選択肢に反映されます。
たとえば15分とすると、15分おきの選択時間がカート画面で出力されます。
休業日を選択すると店舗情報およびカート画面での受け取り日時に反映されます。
注意文言を設定するとカート画面に文言が表示されます。
7 購入テスト
ストアおよびアプリの設定が完了したら表示確認や購入テストを行なってください。
テスト決済でも受注データの取り込み確認を行なっていただけます。
注文完了画面での表示
注文完了画面に取り込みデータを表示させる場合は以下の設定を行なってください。
Shopifyのチェックアウト設定画面を開き、注文処理の「追加スクリプト」に以下コードを記述します。
<script>
var store = {{ attributes["受け渡し店舗"] | json}};
var method = {{ attributes["受け渡し方法"] | json}};
var date = {{ attributes["受け渡し日"] | json}};
var time = {{ attributes["受け渡し時間"] | json }};
var option = {{ attributes["その他のオプション"] | json }};
Shopify.Checkout.OrderStatus.addContentBox(
`<h3>${method}</h3>`,
store && `<p>${store}</p>`,
`<p>${date} ${time}</p>`,
option && `<p>${option}</p>`
)
</script>注文確認メールでの表示
注文確認メールで選択された受け渡し情報を表示させるにはShopifyのメールテンプレートを変更する必要があります。通知設定画面でメールテンプレートを開き、email_body を以下のように変更してください。<!-- テワタシ受付情報表示 --> 囲われた部分が追記箇所になります。
{% capture email_body %}
{% if requires_shipping %}
{% case delivery_method %}
{% when 'pick-up' %}
注文の受取の準備が整うと、メールが届きます。
{% when 'local' %}
{{ customer.last_name }}様、ご注文の品を配達する準備を行っております。
{% else %}
{{ customer.last_name }}様、ご注文いただき、誠にありがとうございます。注文の発送準備を行なっております。商品が発送されましたら、Eメールにてお知らせいたします。
{% endcase %}
{% if delivery_instructions != blank %}
<p><b>配達情報:</b> {{ delivery_instructions }}</p>
{% endif %}
{% endif %}
<!-- テワタシ受付情報表示 -->
{% if attributes %}
<p><b>受け渡し方法:</b> {{ attributes["受け渡し方法"] }}</p>
{% if attributes["受け渡し店舗"] %}
<p><b>受け渡し店舗:</b> {{ attributes["受け渡し店舗"] }}</p>
{% endif %}
{% if attributes["受け渡し日"] or attributes["受け渡し時間"] %}
<p><b>受け渡し日時:</b> {{ attributes["受け渡し日"] | date: "%Y年 %m月 %d日" }}{{ attributes["受け渡し時間"] }}</p>
{% endif %}
{% if attributes["その他のオプション"] %}
<p><b>その他のオプション:</b>{{ attributes["その他のオプション"] }}</p>
{% endif %}
{% endif %}
<!--/ テワタシ受付情報表示 -->
{% endcapture %}CONTACT
