How To Display Brands as a Drop Down

Currently brands are displayed as an unordered list by default. This works fine if your store has a few brands but it becomes inconvenient beyond that. To solve this problem you can change the way that brands are displayed from a simple list to a drop down using a select element. This solution displays all the brands as options in a drop down list making it easier for customers to navigate. Plus, it creates valuable space that can be put to better use.

Instructions

1. Login to your control panel and navigate to Design > Edit HTML/CSS and open the SideShopByBrand.html file.

2. Replace %%SNIPPET_SideShopByBrandList%% with:

   
   <select id="DropDownBrands" onchange="window.open(this.options[this.selectedIndex].value,'_self')">
   <option value="">Select A Brand</option>
   %%SNIPPET_SideShopByBrandList%%
   </select>
   
   

3. Add this script at the bottom of the file:

   
   <script type="text/javascript">
   $(document).ready(function(){
   $("select#DropDownBrands option").each(function(){
   if($(this).val() == window.location.href){
   $(this).attr('selected','');
   }
   });
   });
   </script>​
   
   

4. Save the changes to SideShopByBrand.html and open up the ShopByBrandItem.html snippet.

5. Replace all the code in the ShopByBrandItem.html file with this:

   
   <option value="%%GLOBAL_BrandLink%%">%%GLOBAL_BrandName%%</option>
   
   

6. Save your changes, and browse to the brands panel. You should see a select element with "Select A Brand" as the first option.

How It Works

Once you choose a specific brand from the list, you will be automatically redirected to its page. The brand that you picked will automatically be selected from the drop down provided the ShopByBrand panel is present somewhere on that page.

Troubleshooting

If you see a drop down list without any brands as options... then make sure you followed steps four and five.

If nothing happens when you select a brand from the drop down list... then follow the second step one more time. Verify that you copied all of the code.

If it still doesn't work... then contact us. We can install the modification for you.