How to Configure Automatic Navigation for Shopify Sites

Have more questions? Submit a request
Automatically render the Shopify site navigation when using the Wondersign Catalog Kiosk to Shopify Connector (Direct Sync). When you use Catalog Kiosks Integration to synchronize data to Shopify, you can use a snippet to automatically render the category navigation in your Shopify store.


Requirements/Tools Needed:

  • Shopify Plus Plan required for Direct Sync integration
  • Sign in to using the Google Chrome web browser


Getting Started

1. When configuring the Shopify Sync in CAM Integrations, select the NESTED (default) collection format


Configure Shopify Sync

1. Before you make changes to your Shopify theme, we recommend you create a backup by duplicating the theme.

2. Download the snippet files here, unzip and open in your favorite text editor

Edit the code of your Shopify theme.

3. In the Snippets folder, add a new snippet called header__collection_dropdown-menu and paste the contents of file header__collection_dropdown-menu.liquid

4. Create another snippet in the Snippets folder called mobile-collection-menu, then paste the contents of the file mobile-collection-menu.liquid

5. Make sure to save both snippets

6. Once both snippets are saved, add the dynamic navigation to your theme.

7. The navigation code is typically found in the theme's header section.


If you are unsure where to find the navigation code, please contact the author of your theme.

Right after the main navigation, add the following code:

{% include 'header__collection_dropdown-menu' %}

8. With this code added to the template, wait until your Catalog Kiosk data has fully synced to Shopify. Once the data has synced, the dynamic navigation will automatically be displayed.

Articles in this section

Was this article helpful?
0 out of 0 found this helpful