Discord
Account
Edit Profile
My Plan
Logoutby DataMilk
AI-driven Shopify navigation menu
This video demonstrates how to use the AI-driven Shopify navigation menu template.
import json
import logging
import os
import re
import threading
import time
from collections import defaultdict, Counter
from datetime import datetime, timedelta
from typing import Any, Dict, List
from urllib.parse import urlparse
from uuid import uuid4
import requests
import uvicorn
from fastapi import Body, FastAPI, HTTPException, Path, Query, Request
from fastapi.middleware.cors import CORSMiddleware
from fastapi.responses import HTMLResponse, JSONResponse
from pydantic import BaseModel, Field
# If you change ask for the actual values then it will try to use them instead of prompting for values every time.
shop_url = "ask"
access_token = "ask"
NUM_ITEMS_TO_SHOW = 10Created: | Last Updated:
Introduction to the AI-driven Shopify Navigation Menu Template
This template is designed to enhance the shopping experience on Shopify stores by predicting and displaying products that users are likely to be interested in based on their browsing patterns. The AI-driven navigation menu uses machine learning to learn from user behavior and dynamically updates a carousel with product suggestions. This guide will walk you through the steps to set up and integrate this template into your Shopify store.
Getting Started
To begin using this template, click Start with this Template on the Lazy platform. This will pre-populate the code in the Lazy Builder interface, so there's no need for you to copy or paste any code manually.
Initial Setup
Before testing the app, you'll need to set up some environment secrets within the Lazy Builder. These secrets include your Shopify store URL and an access token to authenticate API requests.
- Log in to your Shopify admin dashboard.
- Go to Apps and then click on Manage private apps.
- Create a new private app or use an existing one to obtain the API credentials.
- Ensure that the private app has the read_products permission.
- Copy the API key (access token) provided by Shopify.
- In the Lazy Builder, navigate to the Environment Secrets tab.
- Add a new secret with the key
SHOP_URLand the value as your Shopify store URL (e.g.,mybeautifulshop.myshopify.com). - Add another secret with the key
ACCESS_TOKENand paste the API key you copied from Shopify as the value.
With these secrets in place, the app will be able to fetch collections and products from your Shopify store.
Test: Pressing the Test Button
Once you've set up the environment secrets, click the Test button in the Lazy Builder. This will deploy the app and launch the Lazy CLI. If the app requires any additional user input, you will be prompted to provide it through the Lazy CLI.
Entering Input
If the app prompts you for input, such as the address of your Shopify store or the app access token, enter the requested information directly into the Lazy CLI. This input is necessary for the app to authenticate and interact with your Shopify store's API.
Using the App
After deployment, the Lazy platform will provide you with a dedicated server link to use the API. Additionally, if the app uses FastAPI, you will also receive a link to the API documentation. You can use these links to interact with the app and see how the AI-driven navigation menu works.
The app also includes a dashboard where you can manage collections and view analytics. Access the dashboard by navigating to the URL provided by the Lazy platform after deployment.
Integrating the App
To integrate the AI-driven navigation menu into your Shopify store, you'll need to add a snippet of code to your store's theme. Here's the sample code provided in the template:
<script async src='YOUR_SERVER_JS_ADDRESS'></script>
Replace YOUR_SERVER_JS_ADDRESS with the server JavaScript address provided by the Lazy platform after deployment. Add this snippet to your Shopify store's theme template where you want the navigation carousel to appear.
For detailed instructions on where and how to add this code to your Shopify theme, refer to the documentation link provided in the code:
Documentation about the Component
By following these steps, you will have successfully integrated the AI-driven Shopify navigation menu into your store, providing a personalized shopping experience for your customers.
Technologies
Boost Shopify with Lazy AI: Automate Store Management, API Integration, Marketing and More
