How to create a collapsible category list in a BigCommerce store

Daniel C. Published on 15 February, 2012

By default, there are two different ways to display categories in the category list on the side of the homepage, that the BigCommerce templates allow: a simple list and a fly-out menu. However, you may want to have a collapsible menu instead. You can do this with some JavaScript code.


In order to get this done, you will have to follow 3 simple steps:

  1. Go to Settings > Store Settings > Display tab and set the categories to be displayed in a simple list (depth: 2)
  2. Open the file called SideCategoryList.html (Design > Browse Template Files) and add the following code
  3. Enjoy!

How does it look implemented on a BigCommerce store

Check out the video below to see how the collapsible category menu will look if implemented in the templates of a BigCommerce store.

<param name="movie" value="http://content.screencast.com/users/CIDaniel/folders/Jing/media/61ad7f35-c0b5-4865-afe1-1580ea4d398b/jingswfplayer.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<param name="flashVars" value="containerwidth=206&containerheight=220&thumb=http://content.screencast.com/users/CIDaniel/folders/Jing/media/61ad7f35-c0b5-4865-afe1-1580ea4d398b/FirstFrame.jpg&content=http://content.screencast.com/users/CIDaniel/folders/Jing/media/61ad7f35-c0b5-4865-afe1-1580ea4d398b/2012-02-15_2120.swf&blurover=false" />
<param name="allowFullScreen" value="true" />
<param name="scale" value="showall" />
<param name="allowScriptAccess" value="always" />
<param name="base" value="http://content.screencast.com/users/CIDaniel/folders/Jing/media/61ad7f35-c0b5-4865-afe1-1580ea4d398b/" />

If you have any improvements, or would like to say thanks just comment below!

Also, if you are having problems installing this then why not request a quote and we can go ahead and install it for you

Daniel C. Published on 15 February, 2012