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.

Prerequisite:

Shopify Plus Plan required for Direct Sync integration.

Configure Shopify Sync

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

Update your Shopify Theme

  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
  3. Edit the code of your Shopify theme
  4. In the Snippets folder, add a new snippet called header__collection_dropdown-menu and paste the contents of file header__collection_dropdown-menu.liquid
  5. Create another snippet in the Snippets folder called mobile-collection-menu, then paste the contents of the file mobile-collection-menu.liquid
  6. Make sure to save both snippets
  7. Once both snippets are saved, add the dynamic navigation to your theme. 
  8. 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' %}


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.

Did this answer your question?