More than 1 year has passed since last update.

what3wordsアドレス入力欄をShopifyに追加する方法

Posted at 2023-08-03

what3words入力欄のプラグイン

ユーザー住所入力画面におけるwhat3words入力欄は現在、Shopify（ショピファイ）をはじめとした多数のECプラットフォームにてプラグインとして追加する事が可能です。

プラットフォームにもよりますが、簡単にwhat3words入力欄・サジェスチョン機能を設置できるようになっております。

※サジェスト機能を国内だけの結果だけに絞る事も可能です。

現在what3wordsアプリのプラグインはShopifyをはじめ、Magento、WooCommerce、WixやWordpress等でご利用頂けます。プラットフォームによってwhat3words入力欄の設置手順は多少変わりますが、今回ご紹介するShopify以外での設置手順は概ね一緒です。

なぜ入力欄が必要なのか？

既存の住所システムだけだと、見つけにくい住所が存在しており、配達員さんが迷う事も。基本的に既存の住所システムは地図上の場所と紐付けがされているものの、大きいビルだと入り口が複数あったり、入り組んだ団地だと戸惑う事も。また一軒家の場合、表札を出さない家も増えてきており、配送員からすると悩ましい。

住所に悩んでいるユーザーは、what3wordsアドレスをお買い物する際に入力できる場所があればピンポイントの届け先・玄関先を指定できるため、入力したユーザーはスムースな配送を期待できる。
もちろん、住所に困っていないユーザーは入力欄をスキップ。

what3words入力欄はデフォルトで任意入力となっているため、必要ないユーザーはスキップ

what3words入力欄の設置方法（Shopifyベーシック）

入力欄の設置手順はShopifyのプランによって、変わります。
まずはShopifyベーシックの場合についてご紹介していきます。

① Shopifyアプリストアからwhat3wordsを検索し、アプリの追加をクリック
こちらのリンクからもアクセスできます
https://apps.shopify.com/what3words-address-field

② アプリインストールの承認
アカウントにログインした状態で、アプリインストールの承認をします。お使いのShopifyのバージョンに合わせて、インストール手順がはじまります。

③ アプリのカスタマイズ
管理画面左メニューにから、オンラインストア → テーマを選択し、カスタマイズ → コードを編集ボタンを押します。

④ カートページに追加
カートページにあるセクション追加ボタンを押し、what3wordsを選択します。
ベーシックプランの場合、what3words入力欄はカートページにのみ追加できます。

⑤ 設置場所の選択
カートページでの設置場所は、チェックアウトボタンの上での配置を推奨致します。
テーマの保存が完了したら、これで入力欄の設置完了です。

what3words入力欄の設置方法（Shopifyプレミアム）

次に、Shopifyプレミアムプランについてご紹介していきます。
ベーシックプランとの主な違いとしては入力欄の設置場所です。

① Shopifyアプリストアからwhat3wordsを検索し、アプリの追加をクリック。
こちらのリンクからもアクセスできます
https://apps.shopify.com/what3words-address-field

② アプリインストール
ログインした状態で手順を進むと、スニペットが出てくるのでこちらをコピーします。

③ アプリのカスタマイズ
管理画面左メニューにから、オンラインストア → テーマを選択し、カスタマイズ → コードを編集ボタンを押します。ステップ②でコピーしたスニペットを<head>に貼り付けます。

④ 完了！
カートページにあるセクション追加ボタンを押し、what3wordsを選択します。
プレミアムプランの場合、what3words入力欄は住所入力画面に追加できます。

その他設定

注文完了メールに追加する方法
what3wordsアプリの設定画面にて、通知 → 注文の確認を選択します。
{{ shipping_address | format_address }}のLiquid変数があるので、下記コードを貼り付けます。

{% if attributes["what3words address"] %}
    <h4>what3words address</h4> 
    <p>{{ attributes["what3words address"] }}</p>
{% endif %}

Stores APIなどのOMSと連携する方法
お客様のwhat3words情報はREST API にあるnote_attributesまたはnoteに保存されます。
Shopify Orders REST APIと連携：

リクエスト


GET {{your-shopify-site}}/admin/api/2022-07/orders/{{your-order-number}}.json

レスポンス例

"note": "what3words address: ///filled.count.soap"
"note_attributes": [
      {
        "name": "what3words address",
        "value": "filled.count.soap"
      }
]

以上Shopifyにおけるwhat3words入力欄の設置ガイドでした！
非常に簡単に設置できる上、無料でご利用できるものになっております。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up