Creating a Store Locator for your e-Commerce System (online shop)

Introduction

Many businesses that need a store locator also sell online, using some form of e-commerce system to sell products/services via the web. The good news is that there's a wide variety of commercial and open source (free) e-commerce systems. The bad news is that adding extra information pages, store locators in our case, to many e-commerce platforms is not particularly user-friendly.

This tutorial explains the steps required to add a store locator to some of the most popular e-commerce packages.






 

Squarespace

Squarespace offers an easy way to create websites, and its simple yet slick interface brings polished looking sites within the reach of pretty much anyone who can turn on a computer.

When it comes to adding a store locator to your new site you might be wondering how you can integrate Blipstar within a web page. Well you're in the right place as below is a list of simple instructions to do just that, using something called a Code Block. Code Blocks in Squarespace allow you to add a block of custom code (clever name huh!) and are specifically designed for third-party plugins. Best of all this approach is flexible enough to accommodate all the different types of Blipstar integration outlined in this guide.

  1. Fire up Squarespace and edit the page where you want the store locator to appear.
  2. Click on an Insert Point to add a new element to the page.
  3. A menu will appear, click on the Code option.
  4. A blank code editor will appear.
  5. Make sure the display drop-down (top-right) is set to HTML.
  6. Paste the relevant code from Blipstar for displaying your locator.
  7. Hit the Save button.
  8. Ta da - your store locator should now appear within the page.

And that's how you add your own Blipstar store locator in Squarespace. Hopefully you won't encounter any issues when setting it up but if you do drop us an email and we'll let you know where you've gone wrong.



 

Shopify

Shopify is a relative newcomer to the ecommerce party but its garnered a lot of support over the years, with its fresh design and powerful features. Because businesses use it to run their complete site it has a range of options for adding content to pages, including custom code and plugins, and that's how you integrate your Blipstar locator.

Full more details see the guide for Creating a Shopify store locator and you'll be up and running in no time.



 

BigCommerce

If your retail outfit has got a swanky new BigCommerce site and wants to include a store locator then look no further than Creating a BigCommerce store locator.



 

Weebly

Popular website builder Weebly is able to integrate your store locator - here's how it works.

  1. In the Weebly editor, click on Elements, then More.
  2. One of the options should be Custom HTML. Choose this.
  3. Paste the code snippet generated by Blipstar.
  4. Save.
  5. When you view the page your store locator should now be shown


 

Wix

Wix is another popular tool for creating simple sites and supports Blipstar, so you can enjoy all that store locator goodness in your shiny new site.

  1. From the toolbar on the left, click on the icon for App market.
  2. In the search bar type "HTML" and click "Add to site" on the iFrame/Embed app.
  3. Go to the HTML Settings window and, under Mode, click the drop-down menu. Select the HTML code option.​
  4. Paste the Blipstar code snippet within the text field.​​
  5. Click update.
  6. Your store locator should now be embedded within the page. Job done!


 

Jimdo

Jimdo is a slick website and shop creator popular with non-coders. It provides a simple Widget function for third-party plug-ins so it's easy to add a Blipstar store locator inside your Jimdo site.

  1. Log into Jimdo and go to the Page Editor
  2. Add a new Widget / HTML element wherever you want your locator embedded.
  3. Paste the Blipstar code snippet within text box.​
  4. Click Save.
  5. Your store locator will now appear inside the page. Easy!


 

Webflow

If you want a responsive site that works on all devices, but don't know how to code, Webflow is a good place to create your online presence. It has a smart drag and drop interface and provides an easy to way to add your Blipstar locator.

  1. Sign into Webflow and edit the relevant page where the locator will appear.
  2. Click on Add Elements.
  3. Scroll down the Add Element box that appears and find the Widgets section.​
  4. Select Embed (or drag and drop onto your page).
  5. Paste the Blipstar code snippet in the Paste HTML code textbox that appears.
  6. Click Save & Close.
  7. The store locator should now appear on that page!


 

WebStarts

With the number of hosted sites standing at well over 3 million, WebStarts is a long-standing and popular website builder. Like any site creator worth its salt it provides a simple mechanism for embedding cutom widgets and code. Here's how you can add your store locator to WebStarts.

  1. Log into your WebStarts account and go to the page you want the locator appearing.
  2. Click on the Insert HTML tool button.
  3. Paste your Blipstar code snippet.
  4. Click OK.
  5. The store locator should now appear in the page's editor view.
  6. You can drag it to change position if needed.


Opencart

Adding a store locator to OpenCart

OpenCart gives you a smart looking site 'out-of-the-box'. Adding static content is also painless. Unfortunately linking to it from the front page is not immediately obvious. But fear not, the following instructions will enable you to embed your Blipstar locator tool and provide an eye-catching link for your customers (tested with v1.5).

Part 1 - Create your OpenCart store locator page

  1. If you haven't already done so, create your store locator account
  2. Log into your OpenCart admin panel
  3. Go to Catalog>Information
  4. Click Insert (this will bring up an Information entry panel)
  5. Enter a page title (e.g. Store locator) for the Information Title
  6. Important: In the Description panel click the Source button
  7. In the Description textbox enter your blipstar store locator iframe code...
    [You need to be logged in to see your code]
  8. Click the Data tab
  9. Select the Bottom:"Display in the bottom footer" checkbox
  10. Click Save
  11. Go to the store front - your store locator will now be available (via a link in the footer)

Part 2 - Add a menu link

Well that's a good start, but what if you want a more prominent link to the store locator at the top of the page? An excellent question - and here's one answer (there are other ways and you could download a module for adding links if the following seems a little daunting). All file paths are relative to your base OpenCart directory.

  1. Navigate to your new store locator page and note down the page filename from the URL - it's after the route parameter (e.g. information/information&information_id=6)
  2. Open the /catalog/controller/common/header.php file in a text editor
    • Find the following line:
      $this->data['text_home'] = $this->language->get('text_home');
    • Add the following line below it:
      $this->data['text_store_locator'] = 'Store locator';
    • Then find the following line:
      $this->data['home'] = $this->url->link('common/home');
    • Add the following line below it:
      $this->data['store_locator'] = $this->url->link('[YOURPAGE]');

      For the above substitute [YOURPAGE] with the page filename you noted in step 1
      (e.g. $this->data['store_locator'] = $this->url->link('information/information&information_id=6');)
    • Save the file
  3. Open the /catalog/view/theme/default/template/common/header.tpl file in a text editor
    • Find the line that starts with:
      <div class='links'><a href='<?php echo $home; ?>'><?php echo $text_home; ?></a>
    • Insert the following code after the above text (that is, just after the Home link)...
      <a href<?php echo $store_locator; ?>"><?php echo $text_store_locator;?></a>
    • Save the file
  4. Go to your store front - a link to your store locator should now be in the top menu!


Magento

Adding a store locator to Magento

Another very popular e-commerce solution is Magento (it claims over 150,000 companies use the software). Adding content pages is easy (see Part 1 below) but Magento makes some simple things very complicated - like adding a new link to the top menu. There are a few ways of doing this but the quickest is outlined in Part 2.

Part 1 - Create your Magento store locator page

  1. If you haven't already done so, create your store locator account
  2. Log in to your Magento admin panel
  3. Go to CMS>Pages
  4. Click the Add New Page button
  5. Enter Store Locator (or another appropriate name) for the Page Title
  6. Enter store_locator for the URL key
  7. Click Content (under Page Information on the left)
  8. Important: Click the Show/Hide Editor button
  9. In the text box enter your blipstar store locator iframe code...
    [You need to be logged in to see your code]
  10. Click Save Page
  11. Your store locator should now be accessible via /index.php/store_locator

Part 2 - Add a menu link

The trick in adding a menu link is to find the phtml file which creates the top links and edit it. The phtml file you need will depend on the template you're using. e.g. /app/design/frontend/default/[TEMPLATE]/template/page/html/links.phtml All file paths are relative to your base Magento directory. A good way to identify the relevant phtml file is as follows (if you already know what file to edit you can skip steps 1-7):

  1. From the Magento admin panel go to System>Configuration
  2. Select your website in Current Configuration Scope (on the left)
  3. In the Configuration list (also on the left) click on Advanced > Developer
  4. Under Debug change Template Path Hints to Yes
  5. Save the config and go to your store homepage
  6. Find the top links on the page (My Account, News etc) and make a note of the phtml path
  7. Turn off Template Path Hints
  8. Load up the relevant phtml file in a text editor (/app/design/[PHTML PATH])
  9. Warning: the following change might be lost if you update Magento in the future.
  10. Find the opening list tag
    <ul>
  11. Insert the following code just below it...
    <li><a href='store_locator'>Store locator</a></li>
  12. Save the file and go to your store - the Store locator link should appear in the top links

Not exactly pretty, but there you go. If anyone knows of an easier way then do let us know!



OS Commerce

Adding a store locator to osCommerce

osCommerce has been available for over twelve years. Although not as aesthetically pleasing as more recent solutions it enjoys the support of a thriving community. Below is a simple way to add your store locator to an osCommerce site. It has only been tested on a default installation of osCommerce but even if you've customized it in some way the approach should still be valid. All file paths are relative to your base osCommerce directory.

Warning: These instructions include some variables (such as the filename and text label) which are hard-coded here but ideally should be defined elsewhere to be consistent with the other code (e.g. if a multi-language site). You should keep a copy of any files you edit just in case...

Part 1 - Create your osCommerce store locator page

  1. If you haven't already done so, create your store locator account
  2. Copy the following code and save it as a new file /catalog/store_locator.php
    
    <?php
    require('includes/application_top.php');
    require(DIR_WS_LANGUAGES . $language . '/' . 'store_locator.php');
    $breadcrumb->add('Store Locator', tep_href_link('store_locator.php'));
    require(DIR_WS_INCLUDES . 'template_top.php');
    echo "
    <div class='contentContainer'>
      <div class='contentText'>
    [You need to be logged in to see your code]
       </div>
    </div>
    ";
    require(DIR_WS_INCLUDES . 'template_bottom.php');
    require(DIR_WS_INCLUDES . 'application_bottom.php');
    ?>
  3. Your store locator should be available at /catalog/store_locator.php

Part 2 - Add a menu link

  1. To make a link to your store locator you can:
    1. Open the /catalog/includes/header.php file in a text editor
    2. Find the line that says
      <div id='headerShortcuts'>
    3. Under that line (and below the php tag) add the following line...
    echo tep_draw_button('Store locator', 'triangle-1-e', tep_href_link('store_locator.php'));
    It should now look like:
    
      <div id='headerShortcuts'>
    <?php
      echo tep_draw_button('Store locator', 'triangle-1-e', tep_href_link('store_locator.php'));
      echo tep_draw_button(HEADER_TITLE_CART_CONTENTS . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'cart'...
    
  2. Save the file

Now you should have a nice link in the header that takes you straight to the store locator.



Tomato Cart

Adding a store locator to Tomato Cart

Tomato Cart (currently at version 2) grew out of the osCommerce project and added a sophisticated interface and excellent customization features. Interestingly it uses the ExtJS framework which is designed to work like the Windows operating system (complete with Start button). However, creating a static page of content is not as easy as it could, or should, be (the reason is partly due to the MVC model it uses).

To add your store locator you need to create two new files and edit an existing template file as shown below. All file paths are relative to your base Tomato Cart directory.

Warning: These instructions include some variables (such as the filename and text label) which are hard-coded here but ideally should be defined elsewhere to be consistent with the other code (e.g. if a multi-language site). You should keep a copy of any files you edit just in case...

Part 1 - Create your Tomato Cart store locator page

  1. If you haven't already done so, create your store locator account
  2. Copy the code below and save it as a new file /includes/content/info/store_locator.php...
    
    <?php
    class osC_Info_Store_Locator extends osC_Template {
        var $_module = 'store_locator',
            $_group = 'info',
            $_page_title,
            $_page_contents = 'info_store_locator.php',
            $_page_image = 'table_background_specials.gif';
    
        function osC_Info_Store_Locator() {
          global $osC_Services, $osC_Language, $breadcrumb;
    	  $this->_page_title = 'Store locator';
          if ($osC_Services->isStarted('breadcrumb')) {
    		$breadcrumb->add('Store locator', osc_href_link(FILENAME_INFO, $this->_module));
          }
        }
      }
    ?>
    
    
  3. Copy the following code and save it in a new file /templates/[YOURTEMPLATE]/content/info/info_store_locator.php (e.g. for the default template the file would be /templates/glass_gray/content/info/info_store_locator.php)
    You need to be logged in to see your code
  4. You should now be able to view your store locator at /info.php?store_locator

Part 2 - Add a menu link

  1. Load the /templates/[YOURTEMPLATE]/index.php file (for the template you are using in Tomato Cart) in a text editor (e.g. for the default template the file is /templates/glass_gray/index.php)
  2. Locate the line that says
    
    <div id='headerBar'>
    
    and add the following line just below it...
    
       <li>
        <?php echo osc_link_object(osc_href_link(FILENAME_INFO, 'store_locator', 'SSL'), 'Store locator'); ?>
       </li>
    
  3. Save the file

When you view your Tomato Cart shop there should now be a link to your store locator in the top menu.



Zen Cart

Adding a store locator to Zen Cart

Zen Cart has been around since 2003 and comes with an excellent feature called EZ pages. As the name suggests EZ pages makes it easy to add new pages (other sites take note!) which is ideal for adding your store locator. The instructions below should only take a few minutes to complete.

Create your Zen Cart store locator page

  1. If you haven't already done so, create your store locator account
  2. Go to your Zen Cart admin page
  3. Go to Tools>EZ-Pages
  4. Click New File
  5. Enter Store locator as the Page title
  6. Switch Header to Yes
  7. In HTML Content enter the following code...
    You need to be logged in to see your code
    
  8. Click Insert
  9. When you go to your Zen Cart store page the store locator link should be there


Presta Shop

Adding a store locator to Presta Shop

Over 100,000 businesses have a website powered by Presta Shop, which is impressive given that it has only been around since 2007. The process involved in adding a store locator within Presta is fairly painless too - here's how... All file paths are relative to your base Presta Shop directory.

Part 1 - Create your Presta Shop store locator page

  1. If you haven't already done so, create your store locator account
  2. The first requirement is to change the text editor so it allows us to save an iframe
  3. Open the /js/tinymce/jscripts/tiny_mce/tiny_mce.js file in a text editor
  4. Find the text that says extended_valid_elements:0
  5. Replace it with: extended_valid_elements: "iframe[class|src|frameborder=0|alt|title|width|height|align|name]"
  6. Save the file
  7. Go to your Presta Shop admin page and click Tools
  8. Click CMS
  9. Click Add New
  10. Refresh the page (to make sure the new edited javascript file has loaded)
  11. Enter Store Locator as the Meta Title
  12. Enter store_locator as the Friendly URL
  13. Important: In Page content, click the HTML button to bring up the HTML source editor
  14. Enter the following code...
    You need to be logged in to see your code
    
  15. Click Update
  16. Click Save to store the page

Part 2 - Add a Menu Link

  1. Go to Admin > Modules
  2. Find the Info Block module and click Configure
  3. Check your Store Locator page box and click Update
  4. When you go to your Presta Shop home page the store locator link should be in the Info box


We hope you found this tutorial useful. Naturally e-Commerce systems are evolving all the time so if there are any mistakes or any out-dated instructions then please let us know. And if you'd like to contribute instructions on setting up Blipstar within your favorite e-commerce platform we'd be happy to share it.

Providing store locator solutions since 2006.   Share: Linkedin  |  Twitter  |  Google+  |  Facebook  |  Pinterest