How to Present a Theme to a Non-Technical Client
You're showing a product, not a code review. A practical guide for developers and PMs on presenting Shopify and WooCommerce themes in a way clients can understand, navigate, and provide actionable feedback on.
The Presentation Mindset
The most common mistake developers make when showing a theme to a client: treating it like a peer review. You're not presenting to another developer. You're presenting a product to someone who's about to put their brand on it.
What Clients Care About
- Does it look like my brand? — colors, fonts, imagery, overall feel
- Can my customers find things? — navigation, product discovery, search
- Does it work on my phone? — mobile experience (most of their customers are mobile)
- Will it sell products? — CTAs, checkout flow, product presentation
What Clients Don't Care About (Yet)
- How the code is structured
- Which Liquid objects you used
- Your clever CSS grid implementation
- Performance metrics (unless they specifically asked)
Frame everything in terms of their customers' experience and their business goals. "I structured the collection page to show 4 products per row" becomes "Your customers will see 4 products at a glance, which keeps the page scannable without overwhelming them." This applies whether you're an agency or a freelancer — the client presentation dynamic is the same.
Before the Presentation: Preparation Checklist
Never present a theme cold. Preparation prevents the embarrassing moments that undermine client confidence.
Template Mapping Complete
Every custom template should be mapped to its correct page or product. If the client navigates to their About page and sees a generic template, they'll think the work isn't done. Auto-mapping ensures every page shows the intended design regardless of how the client navigates.
Content Populated
Fill every section with real or realistic content. Empty sections, broken images, and "Lorem ipsum" tell the client you're not finished — even if you technically are. Use the store's actual product images, descriptions, and branding wherever possible.
Mobile Tested
Clients will immediately open the preview on their phone. If you haven't verified mobile, you're gambling. Check all templates at 390px width (iPhone) and 768px (iPad) minimum.
Known Issues Documented
If there are things you know aren't perfect yet — a third-party app that doesn't render on the preview, a content section waiting for final images — document them. Mention them proactively so the client doesn't discover them and assume you missed them.
Cross-Browser Verified
Run cross-browser screenshots before the presentation. If there's a Safari-specific issue, fix it first or disclose it. Don't let the client find it during the call — that's the worst time. See the full guide to cross-browser QA for Shopify themes for a complete pre-presentation checklist.
Setting Context: What to Explain Upfront
Before showing anything, spend 2-3 minutes setting expectations. This prevents 80% of confused questions:
What They're Looking At
"This is a preview of your new theme running on your actual store. Your current customers can't see it — only people with this preview link can. The URL will look different from your final site, but the design and content are what will go live."
What Might Differ from Final
"A few things might look slightly different from the final version: [specific items — e.g., 'the reviews widget isn't active on previews' or 'the search results use placeholder results']. I'll point these out as we go."
How to Navigate
"You can click through the site just like a normal website. The navigation works, product pages work, collections work. I'll walk you through the key pages first, and then you're free to explore on your own."
What Kind of Feedback You Need
"As we go through, I'd love your feedback on three things: (1) Does this feel like your brand? (2) Is anything confusing from a customer perspective? (3) Is anything missing that you expected to see?"
The Walkthrough Approach
Don't send a link and say "let me know what you think." That's an invitation for unfocused, decontextualized feedback. Instead, do a guided walkthrough first.
- ✓Real-time Q&A, gauge reactions
- ✓Address concerns immediately
- ✓Builds confidence and rapport
- –Requires scheduling, time zones
- –Client may not absorb everything
- ✓Client watches on their own time
- ✓Shareable with all stakeholders
- ✓Can re-watch key sections
- –No real-time interaction
- –Can't address questions immediately
- ✓No prep time, instant delivery
- –Unfocused, decontextualized feedback
- –Client confusion without context
- –Missed scope, missed context
- Homepage (2-3 min) — overall impression, hero, navigation, value proposition
- Key landing page (1-2 min) — custom template that's unique to this project
- Collection page (1-2 min) — how products are displayed, filtering, sorting
- Product page (2-3 min) — the money page; images, variants, add-to-cart, cross-sells
- Mobile view (2 min) — resize browser or show on phone; focus on navigation and product page
- Any unique templates (1-2 min each) — FAQ, lookbook, blog, etc.
Total: 10-15 minutes of structured walkthrough, followed by open Q&A.
Device and Browser Considerations
Clients review on whatever device they have in front of them. You can't control this, but you can optimize for it.
Suggest a Browser
"For the best experience, please use Chrome or Safari on your desktop for the initial review. You're welcome to check mobile too — it's fully responsive."
Why This Matters
If a client opens the preview in an outdated browser or a browser with aggressive ad-blocking, they might see issues that don't represent the real experience. A gentle suggestion reduces false-alarm feedback.
Mobile Preview Guidance
"On your phone, the site will adapt to your screen size. The navigation collapses into a menu button, product grids become single-column, and the hero section resizes. This is intentional — it's designed for thumb-friendly browsing."
Managing Expectations Around Content
Content-related confusion is the #1 source of unnecessary feedback during theme presentations. Get ahead of it.
Their Content vs. Placeholder
Be explicit: "The product images and descriptions are pulled directly from your current store. The homepage hero image is a placeholder — we'll replace it with your branded photography before launch."
What Changes Post-Launch vs. What's Permanent
Clients often don't understand what's "theme" and what's "content." Explain: "Everything about the layout, colors, and structure is what we're reviewing today. Your product descriptions, images, and prices are managed in Shopify admin and can be changed anytime without touching the theme."
Content Migration (If Applicable)
If content is being migrated as part of the project, clarify which content is final and which is still in progress. "The collection descriptions are final. The blog posts are still being formatted — please ignore those for now."
The Feedback Mechanism
After the walkthrough, give the client time to explore independently. But define how you want feedback returned.
Option A: Pin-Based Feedback Tool
The ideal: clients click on elements and type their comments directly on the page. This gives you context automatically and prevents the email-parsing problem. Tools like ThemeSync, Marker.io, or BugHerd provide this. Use the Feedback Scorecard to evaluate which approach fits your team.
Option B: Structured Form/Template
If you don't have a feedback tool, provide a template:
Option C: Consolidated Document
If the client insists on email or a Google Doc, ask them to organize by page and include screenshots. Emphasize: "A screenshot showing what you're referencing saves both of us 15 minutes of back-and-forth."
What NOT to Accept
Unstructured voice notes, scattered Slack messages across days, or "I'll send you my thoughts sometime this week." Set a clear deadline and format expectation: "Please submit all feedback by [date] using [method]. After that, we'll move to the revision round."
Handling Common Client Responses
Every developer hears the same client reactions. Here's how to address the most common ones:
"It's broken"
What they mean: A page is showing the wrong template (default instead of custom), or a third-party app widget isn't loading.
Response: "That page is showing a generic template because [explanation]. Let me fix the mapping — you'll see the correct design within [timeframe]."
"It doesn't match the Figma"
What they mean: Something about the live implementation looks different from the static design. Usually related to viewport differences, content length, or responsive behavior that designs don't capture.
Response: "Good catch — let me look at that specific difference. Some things look slightly different between a static design and a live responsive site, especially with real content lengths. Let me confirm whether this is intentional responsive behavior or something I need to adjust."
"Can we change the font / colors?"
What they mean: They're not sure the approved design direction is right, now that they see it live.
Response: "Absolutely possible. Since we approved the design direction in Figma, this would be a design change — I'll scope it for you. Would you like to see a few options, or do you know what direction you'd prefer?"
"My [competitor] has this feature..."
What they mean: They want scope expansion, often without realizing it's beyond the original agreement.
Response: "That's a great feature. It wasn't in our original scope, but I can absolutely add it. Let me put together a quick scope and timeline addition for you."
"It looks different on my phone"
What they mean: They're surprised by responsive behavior — which is working as intended.
Response: "That's the responsive design adapting to your screen size — it's intentional. On mobile, the layout switches to single-column and the navigation becomes a hamburger menu. This is how modern ecommerce sites work on smaller screens. Does anything specific about the mobile layout concern you?"
Post-Presentation: Next Steps
After the walkthrough and Q&A, send a follow-up email that captures what happened and sets clear next steps:
Next Steps Email Template
Use or adapt these client email templates for your post-presentation follow-up and feedback request emails.
Checklist: Pre-Client Presentation Quality Gates
Use this checklist before every client presentation. If any item fails, fix it before showing the theme:
Make client presentations effortless
ThemeSync auto-maps templates, verifies cross-browser rendering, and provides a client-friendly preview URL — so your presentation is always polished. Clients navigate normally, leave feedback directly on the page, and approve templates with one click.
Try ThemeSync Free →