Webflow is an application that allows designers to build responsive website without any coding knowledge. Since it was launched in 2013, it's continuing to grow in the website builder community and it's getting more popular month by month.
In fact, many of StoreRocket users are Webflow users as well and they use StoreRocket to add a store locator to their Webflow websites.
Let's see how we can do it with a simple and step by step tutorial.
StoreRocket is a store locator widget that lets you add a powerful store locator to your website without, just like Webflow, any coding knowledge.
In few steps, you'll be able to manage your locations through the StoreRocket Dashboard and see your changes in real time on your store locator.
StoreRocket offers a 1-month free trial of the top package called StoreRocket Business, which provides lot of features and perks like a powerful Analytics Suite, Google Sheets Sync, unlimited locations and much more. And no credit card is required on signup! 🎉
Note for Webflow users: You need at least the Lite plan in order to add an "Embed Code" element to your projects as described here.
Let's get started!
1. Create an account
Visit StoreRocket and create an account. After signing up, you'll be redirected to your brand new dashboard.
2. Add your locations
Now you can add your locations by adding them manually or using the bulk import tool to upload your CSV/Excel file.
Let's see how you can add a location manually.
Go to the Add Location page.
In the form, the only required fields are the location name and the location address.
PRO TIP: For the address, you can use the auto-suggest field in the map at the right. This will automatically populate the address field at the left.
Should you wish to add extra information of your location such as the email, the phone number and the website, go ahead and do it now.
Next, the search filters. Search filters are like tags or categories for your locations. You can assign one or more to your locations and the visitor of your website will be able to filter through your locations based on the search criteria by easily toggling them on and off.
Examples of search filters for a coffee shop company:
- Mobile Payment
- 24 Hours Open
- Free Wi-Fi
- Exclusive Rewards
- etc.
Even though they are not required, we encourage you to use some filters for your locations. Statistics have shown that users are more likely to convert into customers when they have a pleasurable experience finding the closest store to them.
When you are happy with your location details, click Save and you'll have your first location! 🎉
Add as many location as you like or proceed to install the store locator to your Webflow website.
3. Add the store locator to Webflow
Go to your Install Widget page of your StoreRocket Dashboard and copy the code to install the store locator.
Now open your Webflow dashboard and click on the website project you want to add the store locator to.
Inside the Webflow Designer, click on the top left icon with + (or click the A on your keyboard) and click on the Section element. Drag it inside the page wherever you wish.
Now let's add the embed code for the store locator. Click again on the + icon and scroll to the last section where you will find an element called Embed. Click and drag it inside the section you just created.
It's now time to paste the code that you previously copied from the StoreRocket Dashboard.
Click Save & Close.
Publish the changes to your domain and your store locator will be visible with all your locations! 🌏
4. Done! 🙌🏻
When we say no coding required, we mean it! The code snippet you just copy pasted is all you need. Now go to your StoreRocket Dashboard and have some fun customizing your store locator widget in the Customize Widget. Choose your widget theme, your map styles, the default radius, if the widget should load all your locations or only the ones nearby the user and much more.
That was easy, wasn't it? 😀
Get started with StoreRocket for free today and add a powerful store locator to your Webflow website.
