Enable Your Customers to Add Their Pets to Your Store
Congratulations! You have installed PetPro AI in your store! Now let's make the PetPro AI features visible so your customers can easily add their pets to your e-store.
There are three ways to expose PetPro AI to customers as they browse your pet store. Click on each link to jump directly to that section.
- Make KIDO visible in one corner of website
- Enable pop-up on product & shopping cart pages
- Add My Pets to the main navigation menu
Each section also contains the video instructions for exposing PetPro AI to your customers.
In this article we will show you how to enable all three methods on your e-store. You can choose to have all three of these features visible on your pet e-store. You can also opt to either show the KIDO icon or the My Pets in the navigation menu.
The pop-up will only be visible if you are offering your customers a discount for adding their first pet. The pop-up works with both the KIDO icon and the navigation menus features.
1. Make KIDO visible in one corner of website
KIDO is the icon of PetPro AI. Half "KIttie" and half "DOggie", this icon represents both cats and dogs.
KIDO can fit into one of four corners on your website. You even have the ability to customize the exact location that it sits in the corner your choose.
To make KIDO visible in one corner of your website you must click on App Embeds to enter the app edit area of your website. You can reach App Embeds in one of two ways:
- The PetPro AI app link in the left navigation bar of your Shopify admin page
- The Themes link under Online Store in the left navigation bar of your Shopify admin page
Once you are on the app embeds page, ensure you enable the PetPro AI app with the toggle button. This action will ensure that the KIDO icon shows up on your website. You can specify which corner you would like the KIDO icon to reside.
You can also change the offset of the KIDO icon to the right or left slightly by changing the numbers in the vertical or horizontal offset boxes.
The last step is to set the color of the icon background and text to coordinate well with your e-store website.
Be sure to click the green Save button at the top right of this editing page after each step.
You can also change the bubble background and text colors to match your website. Scroll down in the App embeds navigation bar until you get to the section that has two color dots for setting the background and text color.
Click in each and enter the color you would like to use. You will see the KIDO bubble change in real time so you can verify it looks correct.
To offer a discount to customers who add their first pet, click on the box called Offer Discount for Adding 1st Pet.
To set the level of discount you want to offer customers to add their first pet, use the slider below the check boxes for discounts. As always, be sure to click the green Save button in the top right corner before you leave the page.
Section 1 Video Instructions
2. Enable pop-up on product & shopping cart pages
The pop-up will appear only if you are offering a discount to customers who add their first pet to your e-store.
At the top of the PetPro AI App Embeds navigation bar, click on box that says Show Offer popup on product and cart pages. Click the green Save button in the top right corner of your screen.
The discount offer pop-up will now appear on all product pages as well as the shopping cart page. It will automatically calculate the amount the customer can save on the order they are placing if they add their pet.
Section 2 Video Instructions
3. Add My Pets to the main navigation menu
When you get to your Home Page customization screen, click on the Header menu in the left navigation bar. This will take you to the Header menu edit screen.
Click on the Main Menu box in the left navigation bar to go to your main menu edit screen. You will be adding the new PetPro AI menu items to your main menu so they will appear on every page of your e-commerce site.
- My Pets
- My Pet's Products
- 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.
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.
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.
Decide if you only want the navigation menu visible
If your site is too busy to add the KIDO icon in one of the corners, you can opt to only display PetPro AI through your navigation menu. To only show PetPro AI functionality through your menu, you must toggle to your App Embeds screen, 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!
Section 3 Video Instructions
Need more instructions or assistance? Please reach out to us at support@petproai.com.