black woman sitting at laptop

Enable KWANi In Your Navigation Menu

KWANi has introduced a new way for merchants to invite customers to add their pets.  You can now add the Add Pet and My Pets Products functionality to your navigation menu! This feature is a great alternative to adding the KIDO icon to your site, especially if you already have icons in the four corners of your e-commerce pet store.  

Additionally, items in the navigation menu can be more easily recognized by customers who are accustomed to browsing by hovering over or clicking on menu items. 

The process to add the KWANi menu item to your e-commerce pet product store has several steps. This in-depth article from Shopify shows how to edit or add menu items to your online store.  The short version of how to do this is below. 

Step 1: Customize your store site 

Go to your Online Store menu and click on Themes.  Then click on the green Customize button on the right side of your screen.  

animated screen to customize shopify store theme at petpro ai
 
When you get to your Home Page customization screen, click on the Header menu item in the left navigation bar. 
 
click on header in theme customization at petpro ai
 

Step 2: Update your Main Menu 

When you enter the Header menu, click on the Main Menu box in the left navigation bar.  You will be adding the new KWANi menu items to your main menu so they will appear on every page of your e-commerce site.
 
click on main menu in customize theme window at petpro ai
 
You will be taken to your Main Menu customization screen.  From here you can add the required KWANi menus. There are three menus you can add to your main navigation menu.  The three menus are:
  1. My Pets
  2. My Pet's Products
  3. Add Pet

You will create the initial menu item for My Pets and then nest the My Pet's Products and Add Pet menus under the new My Pets menu.  The screenshots below show you how to do this.

Click Add Menu Item to create the new My Pets menu.  Name it My Pets.  In the Link dialog box type in the code #ppaiopen=myPets. 

When the link appears below the box, click on it to place it in the Link box. Click the green Add button to save the new menu item to your Main Menu.

how to add pet features to navigation menu at petpro ai
 
Repeat this process two more times to add the My Pet's Products and Add Pet menus. 

Click Add Menu Item to create the My Pet's Products menu.  Name it My Pet's Products.  In the Link dialog box type in the code #ppaiopen=myProducts. 

When the link appears below the box, click on it to place it in the Link box. Click the green Add button to save the new menu item to your Main Menu. 

Click Add Menu Item to create the Add Pets menu.  Name it Add Pet.  In the Link dialog box type in the code #ppaiopen=addPet. 

When the link appears below the box, click on it to place it in the Link box. Click the green Add button to save the new menu item to your Main Menu.

nest a menu item under another menu item in the main menu screen
 
After you have added all three menus, you will nest the My Pet's Products and the Add Pet menus under the My Pets menu by dragging the two new menus under the My Pets menu. 
 
Be sure to click SAVE in the green button on the top right side of your Main Menu customize screen.  And then click SAVE on the green button the top right side of your Theme Customization screen.  

 

Step 3: See new menus in navigation bar

Now the new KWANi menu items are in your store.  Here is what it will look like.
 
 petpro ai added to main navigation menu on pet ecommerce site
 
Once the new KWANi menu items are in your main navigation bar, your customers can easily add pets to your store, see their purchase history for each of their pets, and quickly re-order items for any or all of their pets.

 

4. Decide if you want both KIDO & menus enabled

If your site is too busy to add the KIDO icon in one of the corners, you can opt to only display KWANi through your navigation menu. To only show KWANi functionality through your menu, you must toggle to your app embeds screen again, which you can see in your customize theme screen.  It is on the far left navigation and is an icon of three squares with a plus sign.

Click the down arrow on the Icon Location menu and select "No Icon - only menu".  This will hide the KIDO icon and only show the add a pet and my pet products menus in your navigation menu. Be sure to click the save button!

 

 choose to show petpro ai only in the menu and not display kido

 
  
Back to blog

Leave a comment

Please note, comments need to be approved before they are published.