Storefolio Storemapper drive Shopify retail traffic

How to use Storefolio & Storemapper to drive traffic from Shopify to Retail Store

Storemapper is a Shopify store locator app with an average review of 4.8 stars. Given its easy-to-install and fully customizable nature, it is one of the most sought after store locator apps used by Shopify merchants to drive traffic from online to their offline retail store.

By coupling Storemapper with our app Storefolio, you would be able supercharge your online to offline traffic flow. This is because Storefolio can complement Storemapper by providing a highly visual photo-album style retail directory for your customers. In other words, Storefolio lets your customers experience your retail store via beautifully shot photos of your stores, while Storemapper helps them easily plan a visit and navigate to your stores.

Here is how you can make the Storefolio + Storemapper combo work on your Shopify store:

1. Install Storefolio & Storemapper

You can install the Storefolio app here and the Storemapper app here from the Shopify App Store.

Both apps provide free trial and free plan so you can try them out first before committing.

2. Setup & Customize your Storefolio widget

Once you have installed Storefolio, go to the Stores section to add your retail location. For each location, you may insert a store photo, store address, description, contact and store feature filter.

What is Store Feature Filter?

Store feature filter allows you to label each store based on the facilities and features they provide. In the context of a apparel store, this could be fitting room, free alterations, fashion consultant, apparel rental service etc.

Once you have added the stores, you can go to the “Customize” section perform customization including columns per row, store listing design, and even add in your own custom CSS.

3. Setup & Customize your Storemapper widget

Once you are done with Storefolio, you may continue by setting up Storemapper.

One of the key things about Storemapper is the need to setup a Google Maps API key. This is because Storemapper is an official Google Map partner. By setting up the API key, you would be able to fully utilize Storemapper to your advantage.

Once you have done that, you can add as many store locations as you want in Storemapper like Storefolio. In fact you can even import them using an excel file / Google sheet. Further customization is also doable, with the Storemapper templates as well as using a style.css.liquid file.

4. Get the embed script from both apps

Both Storefolio and Storemapper’s embedding works by using a javascript snippet.

For Storefolio, you can get the snippet at Stores > Embed Storefolio

For Storemapper, you can get it at Store database > Embed Code

5. Create a page in your Shopify Admin

Login to your Shopify Admin, go to Online Store > Pages, click on the “Add page” button at the top right corner.

This would be where we insert the Storefolio and Storemapper widgets; and would be where your customers will visit to locate any store they want to visit. You can name this page as something like:

  • Stores
  • Visit us
  • Where to buy

6. Insert the embed script from both apps into the page created

Go to your page editor, and change it to html view by clicking on the <> icon

Now, you may paste both Storefolio and Storemapper’s embed snippet into the editor.

Depending on how you want your user to experience it, you can opt to place Storemapper above Storefolio, or vice versa.

7. Save and publish the page

Your store locator and directory page is ready to go now.

Click Publish to show it to the world!

Additionally, you should also include it in your website navigation menu. You can do this by going to Shopify Admin > Online Store > Navigation.