---
title: How to Add Our Shopify Store Locator Widget to your Shopify Site
description: If you’re reading this, you likely have a Shopify Store and are interested in what Bullseye Locations can do to increase business and drive customers to your stores. Bullseye is a very powerful location service with an API that allows you to extend its core to create custom integrations. The Shopify Store Locator widget is …
image: https://blog.bullseyelocations.com/hubfs/bullseye_widget_variables1.webp
---
[Skip to content](https://blog.bullseyelocations.com/shopify-store-locator-widget#main-content)
[](https://www.bullseyelocations.com/)
[Why Bullseye?](https://www.bullseyelocations.com/why-bullseye)
Product
How we grow your sales
[ **Location Search** Help customers find the right place to buy your product](https://www.bullseyelocations.com/features-better-results) [ **SEO Local Pages** Generate highly qualified local search traffic](https://www.bullseyelocations.com/features-improve-customer-experience) [ **Lead Capture** Build dealer loyalty with qualified leads ready to buy your products](https://www.bullseyelocations.com/features-support-dealers) [ **Events and Promotions** Drive in-store traffic with local marketing](https://www.bullseyelocations.com/features-target-events-and-promotions) [ **Reporting and Analytics** Get meaningful data to inform marketing decisions](https://www.bullseyelocations.com/reporting-and-analytics) [ **Integrations** Connect your CRM, CMS, or other applications](https://www.bullseyelocations.com/integrations)
Industries
[ Manufacturing](https://www.bullseyelocations.com/manufacturing) [ Building Materials](https://www.bullseyelocations.com/building-materials) [ Retail](https://www.bullseyelocations.com/retail) [ Healthcare](https://www.bullseyelocations.com/healthcare) [ Insurance](https://www.bullseyelocations.com/insurance)
Resources
How to get the most from Bullseye
[**Knowledge Base** User guides to get Bullseye up and running quickly](https://kb.bullseyelocations.com/) [**API Documentation** Technical documentation for leveraging the Bullseye API](https://api.bullseyelocations.com/) [**Blog** Location marketing strategies, checklists, and best practices](https://www.bullseyelocations.com/blog) [**Video Guides** Step-by-step video walkthroughs to follow along with](https://www.bullseyelocations.com/video-guides) [**Case Studies** Explore Bullseye’s breadth of custom client solutions](https://www.bullseyelocations.com/casestudies) [**Custom Locators** Let Bullseye build the perfect locator for your needs](https://www.bullseyelocations.com/custom-locators)
[Enterprise](https://www.bullseyelocations.com/enterprise)
[Partners](https://www.bullseyelocations.com/partners/join-bullseye)
[Pricing](https://www.bullseyelocations.com/pricing)
[Login](https://app.bullseyelocations.com/) [Get a Free Trial](https://www.bullseyelocations.com/register/trialsignup?type=find)
# How to Add Our Shopify Store Locator Widget to your Shopify Site
[Dealer Locator Software](https://blog.bullseyelocations.com/tag/dealer-locator-software), [Developer Resources](https://blog.bullseyelocations.com/tag/developer-resources) By [Tom Flynn](https://blog.bullseyelocations.com/author/tflynn)
If you’re reading this, you likely have a [Shopify Store](https://www.shopify.com/) and are interested in what Bullseye Locations can do to increase business and drive customers to your stores. Bullseye is a very powerful location service with an API that allows you to extend its core to create custom integrations. The Shopify Store Locator widget is a simple module built using the [Bullseye API](https://api.bullseyelocations.com) that serves the important purpose of allowing users to find your locations closest to them quickly and effortlessly.
The widget shown above can be added anywhere you choose on a web page, and the look can be customized to match your site using stylesheets. To begin this tutorial, you should already have your Shopify Store set up and have some technical knowledge of how to use it and web technologies.
## Let’s add this Shopify store locator widget to your Shopify store now
First, download and unzip the source code from our blog ([https://www.bullseyelocations.com/blog/nearest-location-widget](https://www.bullseyelocations.com/blog/nearest-location-widget)).
Next, log in to your Shopify store and go to Settings > Files and upload the two image files provided in the zipped folder you downloaded (ajax-loader.gif and map-icon.png). You can upload your own custom images if you’d like instead. To keep the set up to a minimum, rename your custom images to match the provided ones.
After you upload the images, the paths will be given to you. Open bullseye-nearest-location-banner.js in a text editor and modify the first few rows of code as follows (see screenshot below for more details).
- Modify the “bullseyeApiKey” and “bullseyeClientId” variables to match yours from the Bullseye admin on the account page.
- Replace the variable “linkToLocalLocator” with your link to your locator page.
- Remove the “imagesDir” value as Shopify doesn’t allow directory structures when organizing the file uploads.
- Replace the “absoluteUrl” value with the path given to you when you uploaded the image to Shopify. Don’t include the filename or extension here, only the path. See screenshot below for more details.
After you’ve made the code changes above in the javascript file, make sure to save it. Then, go back to Shopify and upload it under Settings > Files as you did earlier with the two image files. Make sure to note the path to the file that you just uploaded as you’ll be using it shortly.
Now, edit the page where you want the Bullseye banner to appear. If you don’t have a page yet, you can create one. In the content editor of the page, toggle the source mode on (Click the button to the right that looks like two brackets “<>”). Paste the code shown below into your editor. You can also copy this code snippet from the “bullseye-banner-test.html” file that you downloaded and unzipped earlier. You only need the code snippets shown below. If your Shopify Store theme is already using jQuery, you won’t need to re-reference it. Most themes should.
```
```
Before saving the page, edit the script “src” attribute to use the JavaScript file that you uploaded to your store in the previous step.
Once you save the page, you’ll be able to see the widget working. The styles will be inherited from your site’s theme and may not look right. If you want to customize the look of it, you’ll need to do a bit more work which is more technical. You should have knowledge of HTML, CSS and know how to edit Shopify template files. You can find the theme files under Themes > Customize Theme > Template Editor.
### Related Posts
### [How to Implement Successful Locator Onboarding](https://www.bullseyelocations.com/blog/how-to-implement-successful-locator-onboarding)
When a company provides a locator which includes lead management and local pages, a successful …
[](https://www.bullseyelocations.com/blog/how-to-implement-successful-locator-onboarding)
### [3 Types of Businesses that can Benefit from Local Pages](https://www.bullseyelocations.com/blog/types-of-businesses-that-benefit-from-local-pages)
1. Building Materials Manufacturers Building materials manufacturers are an ideal group who can …
[](https://www.bullseyelocations.com/blog/types-of-businesses-that-benefit-from-local-pages)
### [How Bullseye can Help Craft Liquor Companies](https://www.bullseyelocations.com/blog/how-bullseye-can-help-craft-liquor-companies)
Bullseye has worked with many craft liquor companies over the years. Bullseye is well equipped …
[](https://www.bullseyelocations.com/blog/how-bullseye-can-help-craft-liquor-companies)
[](https://www.bullseyelocations.com/blog/how-bullseye-can-help-craft-liquor-companies)
### Get location marketing insights delivered straight to your inbox
“\*” indicates required fields
Email\*
Hidden
Source
Hidden
I’d like to receive
Monthly dealer locator newsletters
Feature announcements
Company updates
Δ
Share this article
[mailto:?subject=Check%20%20%20%20%20%20%20%20%20out%20https://blog.bullseyelocations.com/shopify-store-locator-widget&utm_medium=social&utm_source=email%20&body=Check%20out%20https://blog.bullseyelocations.com/shopify-store-locator-widget&utm_medium=social&utm_source=email](mailto:?subject=Check%20%20%20%20%20%20%20%20%20out%20https://blog.bullseyelocations.com/shopify-store-locator-widget&utm_medium=social&utm_source=email%20&body=Check%20out%20https://blog.bullseyelocations.com/shopify-store-locator-widget&utm_medium=social&utm_source=email)
## Related Blog Posts
### [ Install a Shopify Store Locator Using Bullseye](https://blog.bullseyelocations.com/shopify-store-locator-bullseye)
### [ Client Showcase: Shopify Store Locator App](https://blog.bullseyelocations.com/shopify-store-locator-app-client-showcase)
### [ Introducing Our WordPress Store Locator Plugin](https://blog.bullseyelocations.com/bullseye-wordpress-store-locator-plugin)
[View All Posts](https://blog.bullseyelocations.com)
Bullseye
[Why Bullseye?](https://www.bullseyelocations.com/why-bullseye) [Pricing](https://www.bullseyelocations.com/pricing) [Enterprise](https://www.bullseyelocations.com/enterprise) [Location Search](https://www.bullseyelocations.com/features-better-results) [SEO Local Pages](https://www.bullseyelocations.com/features-improve-customer-experience) [Lead Capture](https://www.bullseyelocations.com/features-support-dealers) [Events and Promotions](https://www.bullseyelocations.com/features-target-events-and-promotions)
CMS/Integration
[WordPress](https://www.bullseyelocations.com/wordpress-solution) [IVR](https://www.bullseyelocations.com/ivr) [Store Locator Widget](https://www.bullseyelocations.com/store-locator-widget)
HELP
[Knowledge Base](https://kb.bullseyelocations.com/) [API Documentation](https://api.bullseyelocations.com/) [Blog](https://www.bullseyelocations.com/blog) [Video Guides](https://www.bullseyelocations.com/video-guides) [Case Studies](https://www.bullseyelocations.com/casestudies) [Custom Locators](https://www.bullseyelocations.com/custom-locators) [For Developers](https://www.bullseyelocations.com/for-developers) [For Agencies](https://www.bullseyelocations.com/for-agencies)
About Us
[About Bullseye](https://www.bullseyelocations.com/about-bullseye) [Team](https://www.bullseyelocations.com/company/team) [Partners](https://www.bullseyelocations.com/partners) [Media Center](https://www.bullseyelocations.com/media-center) [Privacy Policy](https://www.bullseyelocations.com/privacypolicy) [Terms of Use](https://www.bullseyelocations.com/register/terms) [Contact Us](https://www.bullseyelocations.com/contact-us)
CUSTOMER SUPPORT [1 (800) 606-1415](tel:+18006061415)
COPYRIGHT 2000-2026 BULLSEYE LOCATIONS
```json
{
"@context" : "https://schema.org",
"@type" : "BlogPosting",
"author" : {
"@type" : "Person",
"name" : "Tom Flynn",
"url" : "https://blog.bullseyelocations.com/author/tflynn"
},
"dateModified" : "2024-02-12T18:56:37.372Z",
"datePublished" : "2014-10-16T18:42:05.000Z",
"headline" : "How to Add Our Shopify Store Locator Widget to your Shopify Site",
"image" : [ "https://blog.bullseyelocations.com/hubfs/bullseye_widget_variables1.webp" ],
"mainEntityOfPage" : {
"@id" : "https://blog.bullseyelocations.com/shopify-store-locator-widget",
"@type" : "WebPage"
},
"publisher" : {
"@type" : "Organization",
"logo" : {
"@type" : "ImageObject",
"url" : "https://blog.bullseyelocations.com/hubfs/bullseye-logo-1.png"
},
"name" : "Bullseye Locations"
}
}
```