Custom front end, Shopify backend

How to Build a Custom Shopify Storefront With AI (Headless)

By Shreyas Raj. Written from my YouTube video, about 15 minutes long.

Video: Build Ecommerce Sites That SELL in 15 Min (Google Antigravity + Shopify) on the AI with Shreyas Raj YouTube channel.

Short answer: Use Shopify as the backend for products and checkout, create a hero image and video with AI, and let Google Antigravity build the front end using Shopify storefront web components and your headless storefront token. Then deploy a static build to Netlify.

What you will learn

How the front end and Shopify backend split works
How to add a product with an AI generated image and description
How to install the headless app and get your storefront token and domain
How to make an animated hero section
How to deploy a static build for a preview link

What you are building

The site is built with a custom front end and a Shopify backend. In the demo you can click a product, add it to the cart and reach the checkout page. I had not set up payments in my demo store, but the flow works.

A lot of people told me my earlier website videos could not be sold because they had no backend. This one fixes that, because Shopify handles products, inventory and checkout while the front end is fully custom.

The split is the key idea. Shopify is a strong commerce backend, but its themes are limiting if you want something visually unique. By using Shopify only for the backend and building the front end yourself with AI, you keep the animation and design freedom while payments, orders and inventory stay in a system store owners already know.

Step 1: Create your Shopify store and a product

Go to Shopify and create a store. In the video I mention a 30 day trial that costs 20 rupees in India or 1 dollar in the US. Once in the dashboard, open products and add a product.

For the demo I made coffee. I generated a product image in Google Whisk using an espresso shot prompt from my prompt pack, then gave the image to an AI assistant and asked for a Shopify product description. I pasted the title and description into Shopify and uploaded the image.

Set a price, track inventory and increase the quantity (I used 10), and publish the product to the online store.

If you already know how to add a product in Shopify, you can skip this part. I only show it so the guide is complete, and I archive my older products so they do not interfere with the demo.

Step 2: Install the headless app and copy your credentials

In the Shopify search bar, find apps and search for headless. Install the Headless app, click add storefront, then open the storefront API and click manage. Copy the private access token and keep it in a notes file.

Next, search for domain in settings and copy your Shopify domain. You will need both values later.

One important check: make sure your product is published to the headless sales channel as well as the online store. If it is not, the product will not appear through the API. Do the same for any new store you create.

Treat the private access token like a password. Do not post it publicly or share it in screenshots, and keep it out of any repository you publish.

Step 3: Make the hero image and video

Take the hero image prompt from the prompt pack and run it in Whisk. I explain in the video that JSON style prompts tend to give more structured results with image and video models, because AI handles structured input well.

Then open Freepik, go to spaces and create a new space. Drop in the hero image, paste the hero video prompt, choose the Kling 2.5 model, set 10 seconds and 10 generations. I picked Freepik because of its unlimited Kling 2.5 generations, but you can also use Google Veo 3 or other tools. Pick the best result and download it.

I use the same logic as in my other website guides: one strong hero image, then a video generated from it so the first screen of the site feels alive. The prompt pack also has prompts for further visuals such as the cups and extra sections, so repeat the process for each one.

Step 4: Prepare the project in Google Antigravity

Create a new folder on your desktop, for example coffee project, and open it in Antigravity. It will be empty at first. Put your downloaded hero video in it.

Paste the ultimate website one shot prompt from the prompt pack. At the end, add your storefront token and your Shopify domain.

Search for Shopify storefront web components. These are components Shopify provides so you can plug product, collection and cart features into your own site and let Shopify handle the rest. In the docs you can see collection pages, product detail pages and blog pages.

Find the option to get LLM instructions at the bottom left of the page, copy the whole text and paste it at the end of your prompt, with a note that these are the LLM instructions for Shopify. Press enter and let the agent build.

Step 6: Deploy a static preview to Netlify

Ask the AI for a static deployment for Netlify. It will tell you to run npm run build in a new terminal, which creates an output folder such as dist or out.

Open Netlify, choose to deploy manually, browse to upload and select that folder. You get a temporary URL right away. If you want continuous deployment, you can instead connect the project to GitHub so changes are pushed live automatically.

In my demo the site loaded a lot of animation, so give it a moment, then click the product, add to cart and check out to test the flow.

Static deployments are usually simple. Kill the running dev terminal, open a new one and run the build. The folder it produces is the thing you upload, so check the name in the terminal output before you go to Netlify.

After the upload finishes, open the temporary link and test it end to end: load the page, pick a product, add it to the cart and go to checkout.

A note on time and selling

In the video I admit the full site took me about two hours, and I estimate 30 to 45 minutes when repeated. I only built one visual on camera so you should repeat it for the remaining visuals using the prompts.

Because it now has a real backend, you can offer it to people opening a store or to existing Shopify store owners who want a redesign. Results will depend on your outreach and your work.

Watch the full 15 minute video to see each Shopify screen, the prompt pack in use and the deployed store working end to end.

Watch the full video See EducateXAI

Results vary and depend on your effort. Read the results disclaimer.

Questions people ask

Do I need a full Shopify theme?

No. Here the front end is custom, and Shopify storefront web components plug your site into Shopify products, cart and checkout, so you can avoid using a standard Shopify theme.

What credentials does the front end need?

Two values: the storefront private access token from the Headless app, and your Shopify domain. Keep them in a notes file and add them to your build prompt for the AI agent.

Why does my product not show up?

The product must be published to the headless sales channel as well as the online store. If it is not selected there, it will not be returned by the storefront API.

How do I preview the site online?

Ask the AI for a static deployment, run npm run build in the terminal, then upload the output folder to Netlify using the manual deploy option. Netlify gives you a temporary URL you can share right away.

More from the channel

Prefer short reads? Start with the EducateXAI guides.