We also compiled the most common errors that come up while installing Storemapper, so you can jump over those hurdles with ease. By the end of this article, your Storemapper application should be active on your site without a problem. And if you’re already feeling overwhelmed, that’s ok! Just take a deep breath—you got this!
Step 1: Install the Store Locator Code
Storemapper can be added on all CMS platforms. Once you add the Storemapper app, you’ll be taken to your Onboarding page. There, the first step we advise you to do is Install the Store Locator Code.
Otherwise, do these three tasks to complete Step 1:
1. Grab the Embed Code
Click the Install the store locator button, and you’ll be taken to a page where you can copy the code for your Storemapper map. This code is unique to your account. It can be added to the back end of any website that uses HTML (Wix, Squarespace, Shopify, BigCommerce, etc.).
Hit copy to clipboard and head to the next step.
2. Add Your Map Code on the Back End
In your Shopify Admin, go to Online Store and then to Pages. Create a new page or find an existing page where you want your map to display. Then, enable HTML by clicking on “<>” and paste your code.
After you’ve pasted the code, re-press “<>” and the code will show as “Store locator is loading from”
3. Hit save and you’re good to go
Congrats! This golden retriever is proud of you. On to Step 2!
Install Storemapper to Shopify Store
Increase your WordPress store’s visibility with Storemapper
Start your free, no-risk, 7-day trial today
Step 2: Add Your Stores
There are two ways to add your stores: Manually or In Bulk through CSV. Your CSV will either be a downloaded document from our site, or for those with the Premium plan, you can use Google Drive, which will open your .CSV file right in your browser.
How to Add Stores Manually
1. Navigate to the Store Section
On the left side menu of your onboarding page, click the Stores dropdown and then click All Stores. Then, on the right hand side of the new page, click the blue button that says Add Store.
2. Type in Basic Store Information
Once you click the Add Store button, you’ll see a page that asks for your store location’s information. However, the ONLY TWO fields that are required here are Store Name and Store Address. We still recommend you fill out the rest of the information. But if you want to get things up quickly, you only need those two.
Note: For a breakdown of how to utilize each section of the location form, head to this article for the full details.
3. Save Your Work
Click Save Store and the new location should appear. If not, just refresh the page (CTRL SHIFT + R), and it’ll be added.
- Micro Plan – 500 Stores
- Pro Plan – 1000 Stores
- Premium Plan – 10,000 Stores
- Corporate Plan – Unlimited Stores
How to Add Stores in Bulk
If you’re on a paid plan, you can upload stores in bulk. There are a few rules about uploading through CSV that you must follow or your map won’t work. We’ll highlight those in this section, so please read carefully.
1. Download CSV spreadsheet file from Storemapper
Navigate to the Stores button on the left hand side and click Download CSV. Once downloaded, your CSV should open on a separate file on your computer.
For Premium Plan users or higher: You will have a Drive Sync button instead of a Bulk Upload button. Once you press that button, it will take you to a new page, where you can toggle on the Use Google Drive Synchronization setting. Then, create your spreadsheet by pressing Open Spreadsheet and filling out your information from there, the same as below.
2. Fill out information on the spreadsheet
Once you’ve downloaded the spreadsheet document (or opened in Google Drive), you can fill in your store details: name, address, phone, email, url, etc.
You will also see columns for Latitude, Longitude, and Storemapper ID. Don’t worry about filling those out. It gets done automatically by the Storemapper application upon re-importing it back in your account. Those numbers are based on the addresses you put in the spreadsheet.
3. Re-upload CSV file into your Storemapper account
When you’re finished filling out your store information in the spreadsheet, make sure to save as a .CSV file to re-upload it back into your account. Then navigate back to your account, and press the button on the left-hand side that says Bulk Upload. You’ll be taken to the page where you can re-upload your .CSV file. Presto!
For Premium Plan users or higher: Under the Drive Sync page, You can press the manual sync button to only sync when you choose, or you can auto-sync your google sheets store spreadsheet to automatically re-sync the information every 24 hours. Additionally, with the Google Drive Sync, you can share the Google Sheets file with as many users as you want.
Add a store from your dashboard
Add stores with CSV Bulk Uploader
Step 3: Generate your API Key/Token
This step is the most complex of the three, so stick with us as we go through it in detail.
First, you’ll need to choose your Map Provider. Storemapper works alongside two different third-party providers: Mapbox or Google Maps. The two work very similarly, and both offer a free plan with additional prices for going over quota. Additionally, Mapbox does not require any billing info, while Google does. And you only need to choose one to connect in your Storemapper settings.
Using Mapbox – Adding a Token
Here are the steps for adding your Mapbox Token in Storemapper.
1. Create a Mapbox account
Head to account.mapbox.com to create your free account. You can use any email address you want to create an account with Mapbox. It doesn’t have to be the same email used for Storemapper.
2. Get Your Token
Once your account is created, your main page will be your Dashboard. Navigate to the top menu and select the Tokens page. On this page, you will find a default public token already created that you can use for your account, or you can press Create a Token if you’d like to label it as Storemapper specific in your Mapbox account. Copy the token and head back to your Storemapper settings page. Head to the Map Provider settings page and paste it in the Mapbox access token box. Done!
Using Google Maps – Adding an API Key
Here are the steps to attaining your Google API Key and adding it into Storemapper.
1. Create an account
Head to console.cloud.google.com to create your free account. You can use any email address you want to create an account with Google Cloud. It doesn’t have to be the same email used for Storemapper.
2. Start a new project
Click Select a project on the top left and then select New Project in the pop-up window.
3. Create Credentials
Navigate to the API Keys and Services tab on the left, and then click Credentials. Any API keys you have will be shown there. If you don’t have any yet, click Create Credentials at the top, and then click Create API Key. Once the API Key is loaded, head back to your Storemapper account and paste it into the Google Maps API Key box in the Map Provider page under Settings.
Don’t stop there! There are still a few steps to go before your API Key is ready to go.
4. Enable 3 specific API Keys for your Google Account
In the left-hand API Keys menu, click Library. Once you get to the API Library, search for the following API Keys. Enable each one once found.
- Geocoding API
- Places API
When you’ve enabled these three APIs, head back to your APIs and Services menu in Google. Go to the API you just created, click the three vertical dots to the very right of it, and press Edit API Key.
5. Add API Restrictions
6. Ensure that billing is set up correctly
You’ll need to link your credit card to Storemapper. Head to the Billing Page to Add Billing Account. Then return to Billing > My Projects.
Scroll to the three vertical dots, change the billing to your credit card, and confirm.
How to add Mapbox Token to your store locator
How to add Google Maps API Key from Google Console
Check Your Work
Here’s a checklist for all the little issues that can crop up when installing Storemapper. Double check that you did all of these!
Congratulations! You’ve made it to the end of the instructions. Hopefully, your Storemapper map is now fully installed and working smoothly. If you find that along the way, you’ve still run into some issues and your map isn’t currently showing up on your page, don’t be alarmed. Our support team is standing by and happy to help you figure it out.
Storemapper currently offers free one-on-one sessions with our support team to help you get all set up. Just reach out to us to schedule one of these at firstname.lastname@example.org.
Thanks so much for downloading Storemapper. We’re grateful that you’ve entrusted us with your store map needs, and we look forward to continuing to work with you and your business.