Video Creator's Guide to ZestyShop
Published June 2026
Whether you are making a product review, a tutorial walkthrough, or a hackathon demo video, this guide covers every scene worth capturing on ZestyShop — from the first scroll to the completed order.
Before You Hit Record
- Browser — Use Chrome or Edge. Record at 1280×720 or 1920×1080. Fullscreen or hide the bookmarks bar.
- Seed data — Run the seed endpoint or add sample products via the admin panel so the catalog looks full. Empty grids make poor visuals.
- Test accounts — Have a user account ready (signed in) and a guest session (signed out). You will need both for the checkout demo.
- Discount code — Create one in the admin panel so you can show a code being applied at checkout.
- Screen recorder — OBS Studio (free), Loom, or the built-in macOS screenshot recorder (Cmd+Shift+5). Aim for 30 fps or higher.
Scene-by-Scene Breakdown
Below is a recommended shooting order. Each scene includes the route to start from, a target duration, and specific shots to capture.
Scene 1: The First Impression
/15–20s- Start with a full-page scroll from top to bottom — hero, featured products, categories, newsletter.
- Hover the navbar to show the mega-menu or category links.
- Switch between light and dark mode using the theme toggle to demonstrate both palettes.
- If audio: let the page sounds breathe. No narration yet — just the visual flow.
Scene 2: Browsing the Catalog
/products30–45s- Scroll the product grid. Pause on a product card to show image, price, and quick-add behavior.
- Apply a category filter from the sidebar. Show the grid updating instantly.
- Use the sort dropdown — switch between "Newest", "Price: Low–High", and "Featured".
- Click into a product detail page. Scroll images, show the description, related products.
- For digital products: show the "instant download" badge and how the add-to-cart flow differs.
Scene 3: Adding to Cart
/products/[slug]15–20s- Click "Add to cart" on a product. Highlight the cart badge counter updating in the navbar.
- Open the cart drawer (click the cart icon). Show the item, quantity selector, and subtotal.
- Adjust quantity with the +/− buttons. Show the total updating in real time.
- Remove an item to demonstrate the empty-cart state with the "Continue shopping" CTA.
- Add multiple items to show the scroll behavior and line-item summary.
Scene 4: Checkout Flow
/checkout30–40s- From the cart, click "Checkout". Show the multi-step form loading with shipping address.
- Fill in the shipping form (name, address, city, state, zip, country).
- Apply a discount code — show the acceptance toast or the rejection message.
- Show the order summary sidebar: subtotal, discount, total.
- Click "Place order". Show the success screen with order confirmation details.
- Optional: demonstrate the guest checkout flow (no login required).
Scene 5: Account & Orders
/account20–30s- Sign in using email/password or Google OAuth. Show the Better Auth login form.
- On the account dashboard, show the order history with status badges.
- Click into an order to show line items, shipping details, and totals.
- Open the wishlist page — add items, remove them, show product links.
- If recording a returning user: show the session persistence across page refreshes.
Scene 6: Site Architecture (B-Roll)
/articles/architecture10–15s- Use the Architecture article as a visual aid — the Mermaid diagram explains the stack.
- B-roll opportunity: show the Vercel deployment dashboard, Aurora PostgreSQL console, or the GitHub repo.
- Mention key integrations: Better Auth, Stripe, DodoPayments, AWS SES, S3.
- Optional: open DevTools → Network tab to show the API calls during checkout.
Editing Tips
- Cut on action. Trim the dead time — form filling, page loads over 1 second. Jump cuts between steps keep the pace up.
- Speed-ramp long scrolls. Record the full scroll, then speed it up 4× in the edit. Slow back to 1× when something interesting appears.
- Zoom for emphasis. A 1.5×–2× digital zoom on the cart badge, discount toast, or order confirmation draws the eye where it matters.
- Captions help. Burn in short labels — “browse”, “add to cart”, “checkout” — especially if the video autoplays muted on social.
- Music bed. A light lo-fi or electronic track under 60 BPM fills silence without fighting narration. Lower it during voiceover.
Recommended Video Lengths
30–60s
Demo reel
Fast cuts of every scene. No narration. Let the UI speak.
3–5 min
Walkthrough
Full user journey: browse → cart → checkout → order confirmation. Light narration.
8–12 min
Deep dive
Include architecture, admin panel, code setup. For technical audiences.
What Makes ZestyShop Visually Interesting
Focus your camera on these moments — they are the ones that keep viewers watching:
- Theme toggle — The instant light/dark mode switch is a subtle but satisfying visual.
- Cart drawer slide-in — The side panel animation when the cart icon is clicked.
- Real-time total updates — Quantity changes in the cart immediately recalculate the subtotal and total.
- Discount code toast — The “Discount applied” notification sliding in from the corner.
- Order confirmation — The success screen with the order ID and summary is a natural “climax” shot.
- Responsive layout — Resize the browser or record on mobile to show the adaptive grid and mobile nav.
Quick Equipment Checklist
Screen recorder
OBS Studio, Loom, or Camtasia
Microphone
USB condenser or headset mic
Browser
Chrome 1280+ wide, bookmarks hidden
Test data
Seeded products, user account, discount code
Theme
Try both light and dark mode recordings
Network simulaton
DevTools → Network → "Fast 3G" for suspense on loads
Pro tip — record in two passes
First pass: record every screen with no narration, just clicking through. Second pass: record audio-only narration while watching the footage. This lets you re-record audio without re-shooting, and you can adjust timing in the edit without being locked to a single take.
The best product videos are not about features — they are about the feeling of using the product. Show someone going from browsing to owning in under a minute, and viewers will want to do the same.