Add a store locator to Magento

Magento is a popular solution for running an online store, particularly the open source Community edition.

The first version has been around for eons whilst the highly anticipated version 2 was released in late 2015.

Adding content pages is easy (see Part 1 below) and that's how you add your new store locator page. 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 /store-locator

Part 2 - Add a menu link

Magento v2.x

Thankfully version two of Magento makes adding a top menu link a little easier! You can edit the following file:

/app/design/frontend/{Vendor}/{theme}/Magento_Theme/layout/default.xml

You can add the top link within the template file (the below assumes the url of your new store locator is storelocator)...

<referenceContainer name="header.panel">
        <block class="Magento\Framework\View\Element\Html\Links" name="top.links">
             <block class="Magento\Framework\View\Element\Html\Link\Current" name="my-blipstar-link">
                <arguments>
                    <argument name="label" xsi:type="string" translate="true">Store locator</argument>
                    <argument name="path" xsi:type="string">store-locator</argument>
                </arguments>
            </block>
            <block class="Magento\Framework\View\Element\Html\Link\Current" name="my-link1">
                <arguments>
                    <argument name="label" xsi:type="string" translate="true">Checkout</argument>
                    <argument name="path" xsi:type="string">checkout</argument>
                </arguments>
            </block>                   
        </block>
</referenceContainer>

Magento v1.x

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!