 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 = 10

About this template

This app learns from the way users browse to guess which product they might look at next. It gathers product lists from Shopify, a popular online store platform. When someone visits a page, the app records which page they visited and their unique user ID. The app then displays a rotating slider navigation menu (called a carousel) on the webpage, showing products it thinks the user might want to see next. With this approach, the app aims to improve the chances of users making a purchase by showing them products they are more likely to be interested in.

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_URL and the value as your Shopify store URL (e.g., mybeautifulshop.myshopify.com).
Add another secret with the key ACCESS_TOKEN and 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.

More templates like this

Shopify Order Creation Webhook Handler

A webhook handler app for Shopify that can receive webhooks related to the creation of orders on your Shopify store.

Get Orders using Shopify API

A python app for getting orders in a store using the Shopify API. The python FastAPI is used for making the API call. The app requires a SHOPIFY_ADMIN_API_TOKEN and "orders" scope permissions to authenticate requests. This app can be customized to get all orders by name, by order ID (order number), fulfilled orders only and so on.

Update Metafields in Shopify using API

A app for managing metafields in a Shopify store. It includes endpoints to create, update, and retrieve metafields for resources in a Shopify store. The app requires a SHOPIFY_ADMIN_API_TOKEN to authenticate requests

Home

/

AI-driven Shopify navigation menu

Terms and Conditions

Privacy Policy

Lazy AI Data Processing Agreement

Cookie Policy

Lazy AI

About us

Help Center

Subscription & Billing

Pricing

Blog

If you have any questions, please get in touch. Just or join our .