liminfoBuilding an Online Store with Cursor as a Non-Developer
A complete guide to building and deploying an online store without any coding experience using the Agent mode of the AI code editor Cursor. From environment setup to product listing, shopping cart, checkout, and deployment — this step-by-step guide shows you how to let Cursor AI handle everything.
Problem
Required Tools
A code editor with built-in AI. Type what you want in plain English in the chat window, like "build me an online store," and the AI will automatically write code and create files. You never need to type a single line of code yourself.
A program that needs to be installed on your computer for the store to run. Think of it as "the engine of your store." You just install it — you will never need to use it directly. Cursor will check if it is installed and guide you.
A free service that publishes (deploys) your completed store to the internet. With just a few clicks, you get a URL that anyone can access.
A cloud service for storing code. Just like Google Drive stores documents, GitHub stores code. A free account is sufficient.
Solution Steps
Step 1: Install Cursor and Prepare Required Programs
The very first thing to do is install the Cursor AI editor. Think of Cursor as an "AI assistant that writes code for you." You just describe what you want in plain English, and Cursor will write the code automatically. [Installing Cursor - 3 minutes] 1. Go to cursor.com in your web browser 2. Click the "Download" button and download the installer 3. Run the downloaded file and click "Next" until installation is complete 4. Launch Cursor, click "Sign Up," and sign up with your Google account (easiest) 5. Choose a plan: You can start with the free Hobby plan. When you start building your store in earnest, Pro ($20/mo) is recommended. [Installing Node.js - Cursor will guide you] To build a store, you need a program called "Node.js" on your computer. This program acts as the engine for your store — just install it, you will never need to use it directly. Cursor will let you know if Node.js is missing when you create a project. If you want to install it ahead of time, go to nodejs.org, download the "LTS" version, and install it (keep all default options and click "Next"). [Signing up for GitHub - 2 minutes] 1. Go to github.com and click "Sign up" 2. Enter your email, password, and username to complete registration 3. You will use this later when publishing your store to the internet. Once you have completed these three things, you are ready to go.
# The 3 most important keyboard shortcuts to know after installing Cursor:
#
# 1. Cmd+I (Mac) or Ctrl+I (Windows)
# -> "Agent mode" - The most important one! Type what you want here in plain English.
# -> Example: "Build me a store homepage"
# -> Cursor will create files, write code, and install programs — all automatically.
#
# 2. Ctrl+` (backtick, the key to the left of the number 1)
# -> "Terminal" - A black screen will open.
# -> Cursor runs commands here. You will rarely need to type anything yourself.
#
# 3. Cmd+S (Mac) or Ctrl+S (Windows)
# -> "Save" - Saves the file.
#
# When Cursor asks "Run this command?" or "Execute in terminal?"
# -> Just click "Yes" or "Run". Trust Cursor and let it handle things!Step 2: Ask Cursor to Create the Store Project
Now open Cursor and ask the AI to build you a store. [Creating a project folder] 1. Create a folder on your computer to store the store files. - Windows: Right-click on the desktop -> "New" -> "Folder" -> Name it "my-shop" - Mac: In Finder, create a "my-shop" folder at your desired location 2. In Cursor, go to File -> Open Folder -> Select the "my-shop" folder you just created 3. If you see an empty folder on the left side of Cursor, you are all set. [Requesting project creation in Agent mode] 1. Press Cmd+I (Mac) or Ctrl+I (Windows) to open Agent mode. 2. Copy and paste the prompt below and press Enter. 3. Cursor may show several "Run command?" confirmation dialogs. Click "Yes" for all of them. 4. Installation takes about 1-2 minutes. Cursor will automatically create the project files. When it is done, you will see folders like app, components, and lib in the file explorer on the left. If Node.js is not installed, Cursor will show a message like "Node.js is required." In that case, install the LTS version from nodejs.org and restart Cursor.
# === Paste the prompt below into Cursor Agent (Cmd+I) ===
Create a Next.js online store project from scratch in this folder.
[Project settings]
- Use Next.js + TypeScript + Tailwind CSS + App Router
- Project name: my-shop
[Pages to create]
- Homepage (product listing)
- Product detail page
- Shopping cart page
- Checkout/order page
[File structure to create]
- app/page.tsx -> Homepage (displays product listing)
- app/products/[id]/page.tsx -> Product detail
- app/cart/page.tsx -> Shopping cart
- app/checkout/page.tsx -> Checkout information
- app/layout.tsx -> Overall layout (top nav, footer)
- components/Header.tsx -> Top navigation bar (logo, cart icon)
- components/Footer.tsx -> Footer
- components/ProductCard.tsx -> Product card
- lib/products.ts -> Product data (8 handmade accessories)
- lib/cart-store.ts -> Shopping cart functionality (use zustand)
[Product data]
This is a handmade accessories store. Categories: necklaces, rings, earrings, bracelets.
Create 2 products per category for a total of 8 products.
Prices between $15 and $50, use placeholder images.
[Design requirements]
- Clean, modern design (minimal)
- Responsive design that looks good on mobile
- Product grid: 2 columns on mobile, 3 on tablet, 4 on desktop
- Display prices in "$XX.XX" format
- Dark mode support
Create all files and install the necessary packages.
When done, make it runnable with npm run dev.Step 3: Preview the Store and Request Design Changes
Once Cursor has created the project, check what it actually looks like. [Previewing the store - Guide for first-timers] 1. In Cursor, press Ctrl+` (backtick key, left of the number 1) to open the terminal (black screen). 2. Ask Cursor Agent (Cmd+I) to "run npm run dev." Or type npm run dev directly in the terminal and press Enter. 3. Wait a moment and you will see "Ready" or "http://localhost:3000." 4. Open your web browser (Chrome, Edge, etc.) and type localhost:3000 in the address bar. 5. Your store homepage appears! If nothing shows up or you see an error: -> Do not panic. Just ask Cursor Agent (Cmd+I) "An error occurred. Please fix it." -> If you see red text in the terminal, copy it and paste it to the Agent. [When you do not like the design] Ask Cursor Agent for changes. Be specific, as if you were asking a designer for revisions. Do not try to modify the code yourself — it is safer to leave all changes to Cursor Agent. Below are examples of commonly used design change prompts.
# === Design change prompt examples (enter in Cmd+I) ===
# Change colors
"Change the main color of the store to pink (#E91E8C).
Unify the buttons, header logo color, and hover effects."
# Modify the header (top navigation)
"Change the store name in the header to 'Sky Craft.'
Show the cart icon and the number of items in it on the right side."
# Modify product card design
"Add a slight zoom effect on the image when hovering over a product card.
Also add an 'Add to Cart' button at the bottom of each card."
# Check on mobile
"I want to see how my store looks on mobile (smartphone)"
# -> In your browser, press F12 -> Click the smartphone icon at the top left
# -> This lets you preview at smartphone screen sizes.
# Modify product data (replace with your actual products)
"Replace the product data in lib/products.ts with the following:
Product 1: Name 'Natural Stone Bead Necklace', price $38,
description 'A handmade necklace strung with natural gemstones',
category 'necklace'
Product 2: Name 'Mini Pearl Earrings', price $25,
description 'Daily earrings set with freshwater pearls',
category 'earring'
(Add your own product info in this format)"
# Replace product images
# 1. Prepare your product photos (JPG/PNG).
# 2. Drag and drop the images into the public/images folder in the Cursor file explorer.
# 3. Ask the Agent: "Replace product images with my files.
# Product 1 is /images/necklace-01.jpg, Product 2 is /images/earring-01.jpg..."Step 4: Complete the Shopping Cart and Checkout
In Step 2, we already created the basic cart structure, but you can add more detailed features. The entire process is done by making requests to Cursor Agent in plain English. [Check if the shopping cart works properly] 1. With the store open in your browser (localhost:3000): 2. Click a product -> Click the "Add to Cart" button 3. Click the cart icon in the top navigation -> Check if the added product appears 4. Check if quantity change (+/-) and deletion work If the cart does not work or an error occurs: -> Ask Cursor Agent "An error occurs when I add a product to the cart. Please check and fix the cart functionality." [Checkout/Order page] For starters, a simple bank transfer or PayPal instruction page is sufficient without actual card payment integration. As your business grows, you can later integrate payment services like Stripe or PayPal. Use the prompts below to make the checkout page more polished.
# === Cart improvement prompt (Cmd+I) ===
"Improve the shopping cart page:
- Also show product image thumbnails
- Update the subtotal in real time when quantities change
- Shipping info: Free shipping for orders over $50, otherwise $5
- Show an alert when clicking 'Place Order' with an empty cart
- When the cart is empty, show a 'Browse Products' button that goes to the homepage"
# === Checkout/Order page prompt ===
"Create a checkout page:
[Order Summary]
- Display the product list, quantities, and amounts from the cart
- Show shipping fee and final order total
[Customer Information Form]
- Name (required)
- Phone number (required, auto-format as 000-000-0000)
- Shipping address (required)
- Delivery notes (optional, dropdown: Leave at door / Leave with concierge / Custom input)
[Payment Method]
- Bank transfer option: Show bank account details
(Bank of America 000-000-00000 Account Holder Jane Doe)
- PayPal option: Show PayPal payment link
[Order Complete]
- Clicking 'Place Order' navigates to an order confirmation page
- Generate an order number (date + random numbers)
- Show 'We will confirm your order via email' message
- Clear the cart
Structure it so that actual payment (PG) integration can be added later."
# === Additional feature prompts (optional) ===
# Improve product detail page
"Improve the product detail page:
- Display the product image large
- Show price, description, category
- 'Add to Cart' button
- Quantity selector (1-10)
- Recommend other products from the same category (4 at the bottom)"
# Add search functionality
"Add product search to the header.
Allow searching by product name,
and show results in a real-time dropdown."Step 5: Publish (Deploy) the Completed Store to the Internet
Once the store is complete, publish it to the internet so anyone can access it. Most of this process can be handled by Cursor Agent as well. [Overall flow - This is what happens] 1. Ask Cursor Agent to prepare for deployment (check for build errors, etc.) 2. Upload the code to GitHub (similar to uploading files to Google Drive) 3. Connect the GitHub repository on Vercel (just a few clicks) 4. Done! A unique URL (e.g., my-shop.vercel.app) is created [Deployment preparation - Ask Cursor Agent] Send the prompt below to Cursor Agent (Cmd+I). The Agent will check for build errors and automatically fix any issues. [Uploading code to GitHub] 1. Log in to github.com -> Click the "+" button in the top right -> "New repository" 2. Enter "my-shop" for Repository name -> Click "Create repository" 3. Leave the rest to Cursor Agent (see prompt below) [Deploying on Vercel] 1. Go to vercel.com and log in with your GitHub account 2. Click "Add New Project" or "Import Project" 3. Select "my-shop" from the GitHub repository list 4. Click "Deploy" -> Wait 1-2 minutes and deployment is complete! 5. The URL shown on screen (e.g., my-shop-xxxxx.vercel.app) is your store address. 6. Share this URL on social media and anyone can access it. [Connecting your own domain (optional)] If you want to use an address like "myshop.com" instead of "my-shop.vercel.app": 1. Purchase a domain from namecheap.com or godaddy.com ($10-15/year) 2. Vercel Dashboard -> Settings -> Domains -> Enter your purchased domain 3. Follow Vercel's instructions for the domain registrar DNS settings 4. HTTPS (SSL certificate) is automatically configured by Vercel!
# === Cursor Agent Prompt 1: Pre-deployment check (Cmd+I) ===
"Check this project before deployment:
- Verify there are no build errors (run npm run build)
- Fix any errors that come up
- Check that .gitignore is properly configured
- Let me know when done"
# Cursor will run the build and automatically fix any errors.
# Click "Yes" when a "Run command?" confirmation dialog appears.
# === Cursor Agent Prompt 2: Upload to GitHub ===
"Upload this project to GitHub.
The GitHub repository URL is https://github.com/myusername/my-shop.git.
Initialize git, commit all files, and push."
# Cursor will automatically run these commands:
# git init
# git add .
# git commit -m "Initial store version"
# git remote add origin https://github.com/myusername/my-shop.git
# git branch -M main
# git push -u origin main
#
# Replace "myusername" with your actual GitHub username.
# You may get a GitHub login popup the first time you push.
# -> Just log in with your GitHub account.
# === When making changes later (adding products, changing design, etc.) ===
# After modifying code, tell Cursor Agent:
"Push the changes to GitHub"
# -> Cursor will automatically run git add, commit, and push.
# -> Vercel will automatically detect the changes and deploy the new version.
# -> In 1-2 minutes, the changes will be reflected on your store!Step 6: Store Management and Expansion Tips
Once the store is deployed, you can add features one by one as you operate it. All modifications and new features can be requested from Cursor Agent in plain English. [Common operational tasks] - Add new products: "Add 3 more products. The info is..." -> Agent modifies products.ts - Change prices: "Change product 2's price to $30" -> Agent modifies it - Mark as sold out: "Mark product 3 as sold out" -> Agent adds a sold-out badge - Event banner: "Add a 'Grand Opening 20% Off' banner at the top" -> Agent creates the banner [Expansion features (as your business grows)] - Real payment integration: "Integrate Stripe payment" -> Agent generates payment integration code - Admin page: "Create an admin page where I can manage products from the web" - User signup/login: "Add Google login for user accounts" - Order notifications: "Send me an email notification when a new order comes in" [Cost optimization] - Cursor Pro ($20/mo) is sufficient for operation - Vercel free plan covers 100GB traffic per month (plenty for a small store) - Upgrade to Vercel Pro ($20/mo) if traffic increases - Domain is $10-15/year (optional)
# === Recommended expansion feature prompts ===
# [Popular] Social share buttons
"Add Twitter and Instagram share buttons to the product detail page"
# [Popular] Customer chat (live chat)
"Add a floating live chat button in the bottom right corner.
Clicking it should open a contact form or link to our support email"
# [Popular] Announcements/events page
"Create an announcements page with the following:
- Grand opening 20% off all products (until Feb 28)
- Free shipping on orders over $50"
# [SEO] Search engine optimization
"Add SEO meta tags to all pages.
Store name is 'Sky Craft', description is 'Handmade accessories online store'.
Also add Open Graph tags so previews look good when sharing on social media."
# [Analytics] Visitor tracking
"Integrate Google Analytics. The tracking ID is G-XXXXXXXXXX."
# -> This lets you see which products are popular and how many visitors you have.
# -> Google Analytics is free.
# -> Sign up at analytics.google.com to get your tracking ID.
# [Images] Product photo tips
# - Natural light (by a window) produces the best photos
# - White or light-colored backgrounds are safest
# - Square images at 1200x1200px look cleanest
# - Use liminfo.com's image compression tool to reduce file sizeCore Code
The key to Cursor is "making specific requests." Without writing a single line of code yourself, just describe the file path and desired feature specifically, and the Agent will generate all the code. When errors occur, copy the error message and paste it to the Agent.
// === Core Summary: How to Use Cursor Agent ===
//
// [Basic Principle]
// Do not modify code directly. Leave all changes to Cursor Agent (Cmd+I).
// Just make your requests naturally in plain English.
//
// [Good Prompts vs Bad Prompts]
//
// BAD: "Build me a store"
// -> Too vague, unlikely to get the results you want
//
// GOOD: "Create a product listing page in app/page.tsx.
// Get product data from lib/products.ts,
// display in a 2-column grid on mobile and 4-column on desktop,
// and format prices as $XX.XX.
// Also add category filter buttons at the top."
// -> Be specific about file paths, data sources, layout, and formatting!
//
// [When you get an error]
// 1. If you see red text in the terminal -> Copy it
// 2. Paste it to Cursor Agent (Cmd+I): "Fix this error: (error content)"
// 3. Do not try to fix the code yourself -> Leaving it to the Agent is much safer
//
// [Frequently used shortcuts]
// Cmd+I (Ctrl+I) -> Agent mode (most important! Make your requests here)
// Cmd+L (Ctrl+L) -> AI chat (ask questions, get code explanations)
// Ctrl+` -> Open/close terminal
// Cmd+S (Ctrl+S) -> Save file
//
// [Overall workflow summary]
// 1. Install Cursor -> Install Node.js -> Sign up for GitHub
// 2. Request project creation from Agent
// 3. Preview with npm run dev -> Repeat design change requests
// 4. Complete cart/checkout functionality
// 5. Upload to GitHub -> Deploy with Vercel
// 6. Connect domain (optional) -> Start operating!Common Mistakes
Only asking Cursor Agent to "build me a store"
Vague requests produce vague results. Break it down: "Create a product listing page in app/page.tsx. Get product data from lib/products.ts, use a 2-column grid on mobile and 4-column on desktop, format prices in USD." Specify file paths, data sources, layout, and formatting. Refer to and copy-paste the prompt examples in this guide.
Generating code continuously without previewing (npm run dev)
Every time you add a feature, check the result in your browser (localhost:3000). Adding multiple features without previewing makes it hard to find what went wrong. Follow the order: "Add one feature -> Check -> Next feature."
Trying to fix code manually when errors occur in Agent-generated code
When a non-developer tries to fix code directly, it usually creates even more errors. Copy the error message (red text) from the terminal exactly as is and paste it to Cursor Agent saying "Fix this error." The Agent will analyze the cause and fix it automatically.
Working for a long time without saving progress (git commit), making rollback difficult
Each time you complete a feature, ask Cursor Agent to "commit the current changes to git." This lets you revert to a previous version if problems arise later. It is just like pressing "Save" periodically when working on a document.
Using product images at their original size (3-5MB)
Original photos from smartphones are large and will slow down your store. Resize images to 1200px or smaller, and use liminfo's image compression tool to reduce file size by up to 80% while maintaining quality. You can also ask Cursor Agent to "optimize images using the Next.js Image component" for automatic optimization.