Changing the Look of the Magento Store Switcher/Selector

In our last post we discussed how to move the Magento Store Switcher/Selector from the footer to the header. Now that you have moved the store switcher to the header you will probably want to change it’s appearance. For example – you might want an unordered list of links instead of a select drop down. Then, you could style the store selector with some CSS. You can do this by modifying the “stores.phtml” page.

First locate the “stores.phtml” page and open it with your favorite editor. You can find it in the ‘app/design/frontend/base/default/template/page/switch’ directory. (Note: If you are using your own template your path may be different.)

Now, if you are familiar with html, you should be feeling a bit more at home. You will see that currently the stores are loaded into a “select” box. As of this writing the code looks like this (comments removed):

<select id="select-store" title="<?php echo $this->__('Select Store') ?>" onchange="location.href=this.value">
<?php foreach ($this->getGroups() as $_group): ?>
<?php $_selected = ($_group->getId()==$this->getCurrentGroupId()) ? ' selected="selected"' : '' ?>
<option value="<?php echo $_group->getHomeUrl() ?>"<?php echo $_selected ?>><?php echo $this->htmlEscape($_group->getName()) ?></option>
<?php endforeach; ?>
</select>

If you are familiar with HTML then you will be able to add any sort of HTML code you want here. However, we have made it easy for those of you who are not familiar with HTML. If you want to change the selector to an unordered list then simply replace the above code in your template file with the following code:

<ul class="store-selector-ul">
<?php foreach ($this->getGroups() as $_group): ?>
<li><a href="<?php echo $_group['home_url'];?>"><?php echo $this->htmlEscape($_group['name']);?></a></li>
<?php endforeach; ?>
</ul>

Now with some CSS styling – you can make your store selector menu match your design.

If you are having issues with your Magento design, or would like some help with customizing Magento, please feel free to contact us at 541-582-8154 or by sending us an email at support@dnawebagency.com.