こんにちは！
Shopifyでの実店舗管理や、イベント出店場所の管理を簡単にできるアプリがあったので紹介します！
今回紹介するアプリは現在地から近い店舗を優先的に出す機能などもあるので、来店誘致には効果的です！！
SC Store Locator Map
完成イメージ
準備
ここからはSC Store Locator Mapの設定方法を説明していきます！
Google Map APIを使用するので、Google Cloud側、Shopify側に分けて設定を進めます。
GoogleCloud側
Step1 : GoogleMapAPIの準備
GoogleCloudアカウントで新しいプロジェクトを作成
Step2 : APIの有効化
「APIとサービス」→「有効なAPIとサービス」を選択
「APIとサービスを有効にする」を選択
下記検索フォームで必要なAPIを有効にする
- Maps Embed API
- Maps JavaScript API
- Maps SDK for Android
- Maps SDK for iOS
- Maps Static API
- Street View Static API
- Geocoding API
- Geolocation API
- Directions API
- Places API
- Places API (new)
Step3 : APIキー発行
認証情報を作成を選択
この段階でAPIは作成されますが、セキュリティを考慮しキーの制限はかけてください。
Shopify側
Step4 : アプリをインストール
Step5 : アプリ設定
「settings」→「Google Map API Key」→「Google API Key」の部分に先ほど取得したAPIキーを入力します。
Step6 : 場所の登録
「Create Store」より場所の登録
Step7 : ストアフロントに表示してみよう！
「オンラインストア」→「テーマ」→「カスタマイズ」でアプリセクションの設置
セクションの追加から「SC Store Locator Map」のセクションを設置し保存
下記のような形で表示ができたら完了です！！
現在地からの距離によって出力する店舗を制御することもできるようなので、実店舗を複数持っている事業者様、イベント主催者の方には便利なアプリかなと思いました！
英語での管理画面が多いShopifyアプリですが、SC Store Locator Mapは日本語対応しているのでその点も使用しやすいポイントです！
Discussion