Advice and answers from the SupaDupa Team

Headline: If you are using a theme which was customised before 13th March 2015 - you will not be able to use the Dropdown/Submenu feature. All standard themes have been updated, but for those on a customised theme - you will not have these required changes. Given this, you have the following options:

  1. Revert back to the theme that your customised theme was based on, from the 'All Themes' list (not the 'Your Themes' tab for the design section) - and re-apply your changes.
  2. Write into support and we will update your theme so you can keep your changes
  3. If you are confident modifying code, you can follow the steps below

Option 1 is simplest, assuming you have no made many changes to your customised theme. Either way, if you have any questions or concerns, do write into us - we'll be happy to help.

Manually updating your customised theme (tech skill required)

If you customised your store before the Navigation Menus feature was added - you’ll need to make a change to your customised theme in order to be able to take advantage of the ability to create a dropdown/submenu. The exact steps may vary slightly per theme, but in brief - it requires that you replace the code which renders the navigation, to using the new ‘navigation’ liquid tag.

Every theme will have one or many navigations, and for each of theme, you’ll want to replace the markup with the navigation tag, importantly specifying which navigation you want to load in each instance. Here is an example using a theme that was customised from Laurel:

1. Go to your custom theme, which will appear under ‘Your Themes’ in the Design section. From here, click the spanner icon at the top left, to enter the advanced customisation section.

2. Click the edit the ‘theme’ template - which you’ll find within the list under the ‘Templates’ header.

3. From here, you’ll want to replace the markup that renders each of the navigations, with the ‘navigation’ tag, being sure to specify the name of the particular navigation you want to render, along with the orientation. For Laurel, here’s a Diff that details the changes you’ll need to make:

Here is the full list of options you can pass to a navigation tag:

name: main (states which collection you would like to load)

dark: yes | no (dictates whether the dropdown loads with a dark or light background)

orientation: horizontal | vertical (dictates whether the menu loads vertically or horizontally)

nav_class: something (allows you to specify the CSS class added to the <ul> tag)

link_class: something (allows you to specify the CSS class added to each link of the menu)

an example using all of the above:

{% navigation name: collections, dark: yes, orientation: vertical, nav_class: navbar, link_class: navlink %}

Note that depending on how many changes you have made to your theme - you may find it easier to switch back to the theme you originally customised - and re-apply your changes. This will save you needing to carry out the potentially complicated steps above. If you have any questions, get in touch!

Did this answer your question?