jQuery Menu for BigCommerce Stores

Finally! A working solution that tackles the long overdue feature that BigCommerce stores lack from the original templates. The jQuery Category Menu has been requested several times and many have attempted to get this done without luck.

Flyout Menu for BigCommerce

Today, this problem is being solved once and for all.

The following steps will guide you through the process of downloading the necessary files, uploading them to your BigCommerce server, and implementing this feature that can certainly boost your conversion rates by allowing your visitor to drill down to deep categories by simply hovering on top of Main categories and displaying the 2nd, 3rd, 4th, level of subcategories.

Setting this up will require some basic knowledge of HTML, CSS, being able to connect to the server where your BigCommerce store is hosted, and feeling comfortable working on the source code accessible from your BigCommerce Control Panel.

LETS GET STARTED!

1.- Download Superfish V1.4.8.zip to your computer. (jQuery menu plugin by Joel Birch, thanks Joel!) http://users.tpg.com.au/j_birch/plugins/superfish/#download

2.- Extract the contents of the zip file to your local hard drive.

3.- Connect to your BigCommerce server and create a new folder on the server via FTP. For illustration purposes I have created a new folder under the “Content” folder and called it “Menus”. (content / menus) See image below.

Setup Folders

4.- Upload all the files to your new “Menus” folder via FTP. Keep the same structure.

5.- Edit Panel / HTMLHEAD

Login to your BigCommerce account and go to Store Design / Browse Template Files
Add following lines before </head> tag and save:

<!– SuperFish –>
<link href=”%%GLOBAL_ShopPath%%/content/menus/css/superfish.css” media=”all” type=”text/css” rel=”stylesheet” />
<link href=”%%GLOBAL_ShopPath%%/content/menus/css/superfish-vertical.css” media=”all” type=”text/css” rel=”stylesheet” />
<script type=”text/javascript” src=”%%GLOBAL_ShopPath%%/content/menus/js/superfish.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(‘ul.sf-menu’).superfish(
speed:    ‘fast’
);
});
</script>
<!– Ends SuperFish –>

6.- Edit Panel / SideCategoryList.html
add to the UL tag as follows:

<div class=”BlockContent”>
<ul class=”sf-menu sf-vertical”>

7.- Set necessary subcategories on the BigCommerce Control Panel.
Go to Settings / Store Settings / Display / Category List Depth
Set it to your deepest subcategory level (4, 5, or whatever your deepest subcategory is. You need to have at least 2 levels for this project to work). See image below:

Settings

8.- Edit Styles.css
Go to Store Design / Browse Template Files
Select Styles.css
Look under /*Left Content Area */ (if your side category list is on the left column)
Line 388 set to:

.Left .BlockContent {
margin: 0 10px 0 10px;
Line 416 set to:

.Left #SideCategoryList li ul {
padding-left: 1px;

9.- Remove Subcategories from showing under the Main Content column or “Column 2” (make sure you have “Show products from the current category and its children” selected on BigCommerce Control Panel, otherwise you won’t be able to get to all your products.

BigCommerce Control Panel

Edit Panels / CategoryHeading.html
Go to Store Design / Browse Template Files / Panels / CategoryHeading,html
Remove %%SNIPPET_SubCategories%% or turn into a comment if you don’t want to delete the code. Do it like this: <!–%%SNIPPET_SubCategories%%–>

THAT’S IT! YOUR ARE DONE!

Styling Your jQuery Category Menu:

Now you need to work on the style of your Category list! You can change background colors, margins, padding, font size, etc.

Here are some edits I made to mine but of course these will vary depending on your own needs. You can edit these files on your local copy and then save and upload to overwrite the files you have on your server.

1.- Edit superfish.css
sf-menu ul (set width to 15em)
ul.sf-menu li li.sfHover ull (set left to 15em)
ul.sf-menu li li li.sfHover ul (set left to 15em)
.sf-menu li (set background to transparent to keep your original background color or design)

.sf-menu a {
border-left:        0px solid #fff;
border-top:        0px solid #CFDEFF;
padding:         0.25em 0.25em;
text-decoration:none;

2.- Edit superfish-vertical.css
set width to 14em
set left to 14em


Disclaimer:
Please be advised that this tutorial has been prepared for informational purposes and Shopping Carts for Websites can not be held responsible if you break the code on your store. Seek professional help if you are not sure how to apply this tutorial to your specific BigCommerce store.

Tags: , , , ,

16 Responses to "jQuery Menu for BigCommerce Stores"

  • Luca says:
  • Erick says:
    • admin says:
      • Erick says:
        • admin says:
  • Erick says:
  • john says:
    • admin says:
  • john says:
  • Amy says:
    • admin says:
  • vijay says:
  • Syed says:
    • Daniel O. says:
Leave a Comment

*