Shopify Archives - WeeklyHow

We’ve tried building three (3) apps including a Shopify app using the newest model from OpenAI: GPT-5 but we haven’t really tried making a Shopify theme with this model. And as you probably know, Shopify themes are not like regular apps. In fact it’s not an app. They’re made up of Liquid templates, sections, snippets, JSON templates, and a bunch of files that need to follow strict Shopify guidelines. So the big question is this: can GPT-5 actually build a Shopify theme? I decided to put it to the test. Video tutorial https://www.youtube.com/watch?v=4F6yTUp8G7c Shopify Theme Development with GPT-5 If you’ve been following my experiments or my videos, you’ll know I’ve tried building apps with GPT-5 before. But this time, I wanted to see how it handles theme development, which is trickier than apps. To make this experiment fair, I used the Shopify Dev MCP server. If you’re not familiar, MCP (Model Context Protocol) servers let AI agents interact with external tools and resources. In this case, the Shopify Dev MCP server gives GPT-5 a special tool called validate_theme. This tool checks if your theme follows Shopify’s guidelines. Think of it as a linter for your entire theme. Without it, AI will happily generate code that looks fine but uses deprecated codes or worse completely breaks your store. Debugging With GPT-5 In the video above, I loaded up an old Shopify theme I’ve worked on before and ran validate_theme. Right away, it returned a massive list of issues: CSS links not using preload tags Missing snippet, section, and asset files Unknown objects like scheme_classes Script tags not using defer and many many more The kind of stuff that Shopify would reject if you tried to ship it. So how did GPT-5 handle this? 🤔 It started fixing issues — sort of. Instead of solving them directly though, GPT-5 created stubs (placeholders) to bypass errors. This technically “fixed” the theme but didn’t really solve the underlying problems. Still, the fact that GPT-5 re-ran validate_theme, saw fewer errors, and iterated on fixes is pretty impressive. Can GPT-5 Build a Product Template From Scratch? Before trying to build a Shopify theme from scratch, I wanted to try if GPT-5 can build a product template since I believe this is the most difficult template to make and surprisingly, it only encountered easy-to-solve issues. It created a new section called main-product, which is actually consistent with Shopify’s theme naming. The first version only showed images, but after tweaking the blocks in the Theme Editor, we got a working product page with “Add to Cart” and “Buy Now” buttons. Was it perfect? No. There were translation issues and missing cart logic. But with some prompting (and copy-pasting fixes), we got it working. Building a Shopify Theme with GPT-5 After trying to make a template, it's time to build a new Shopify theme from scratch. When building web apps, I try to be very specific and building Shopify themes, I think, is not an exception. So I asked ChatGPT to help me write a perfect prompt for building a Shopify theme and this is what it gave me: Create a production-ready Shopify Online Store theme inspired by Shopify’s Horizon family (visual language, layout patterns, and theme-block capabilities). Prioritize conversion, speed, accessibility, and SEO. Use the latest theme architecture with theme blocks and JSON templates. Keep code clean, modular, and fully configurable in the Theme Editor.## Tech + Architecture Requirements- Online Store (latest architecture with theme blocks): sections everywhere, app blocks, JSON templates, dynamic sources, and theme blocks. - Liquid + HTML + CSS + JS with minimal dependencies.Follow Shopify’s docs for the roles of layout, templates, sections, snippets, and assets.## Design System (Horizon-inspired)- Look & feel: bold product cards, generous whitespace, modern type, clean grid; works beautifully on mobile; fast-loading.- Typography: variable font pairing (humanist sans for UI, display for headlines). Adjustable scale in Theme settings.- Color: 1 primary, 1 accent, 2 neutrals (light/dark modes optional).- Components: buttons (primary/secondary/ghost), badges, cards, drawers, modals, accordions, tabs.- Animation: subtle, GPU-friendly (transform/opacity only). Respect prefers-reduced-motion.Expose global design tokens in settings_schema.json (colors, fonts, radius, shadows, spacing scale).## Conversion Features (must-haves)1. Sticky add-to-cart on product pages (mobile + desktop).2. Cart drawer with inline upsells, shipping threshold progress, and discount code input.3. Cross-sell & “Recently viewed” sections across PDP/Cart.4. Merch blocks: USP/benefit bar, social proof (ratings, review count), trust badges, low-stock/fast-selling cues (configurable).5. Checkout guidance: delivery estimates, returns info, payment icons (theme section/snippets).6. Collection filters: server-backed faceted filters + sort, with URL params preserved.7. Predictive search: products + collections + pages, in a drawer with keyboard nav.8. Mega menu: image slots, featured collections, promo badges.## SEO & Structured Data- Semantic HTML with correct headings order per template.- Meta tags: titles, descriptions, canonical, Open Graph, Twitter Cards from settings/metafields.- JSON-LD for products, collections, breadcrumbs, articles, organization; render via snippets/json-ld.liquid.- Images: responsive (srcset, sizes), lazy loading, width/height attributes to prevent CLS.## Accessibility- WCAG 2.2 AA targets: focus states, color contrast, landmark roles, ARIA for interactive controls.- Full keyboard navigation, skip-to-content, semantic labels on forms and buttons.- Respect prefers-reduced-motion.## Page Templates (JSON Sections Layouts)For each template, define a sensible default section composition and expose max flexibility in the Editor.Home (index.json)announcement-bar → header → hero → usp-bar → featured-collection (x2) → image-with-text → testimonials → newsletter → footerProduct (product.json)product-media-gallery (zoom, video, 3D ready), product-info (title, price, rating, variant-picker, buy-buttons, inventory-status, pickup-availability), cross-sell, product-recommendations, rich-text, countdown (optional), recently-viewedCollection (collection.json)hero (collection banner), facet-filters, sort-by, collection-grid, usp-barSearch (search.json)predictive-search-drawer (component), results grid with facets/sort (works for no-results messaging)Cart (cart.json)cart-items, cart-upsell, trust badges, shipping threshold progressContent pages (page.json)Rich content via rich-text, image-with-text, contact-form, store-locatorBlog/Article, 404, Account templates: clean, readable layouts with breadcrumbs and SEO best practices.## Header, Navigation, & Footer- Announcement bar (free shipping threshold or promo).- Header with mega menu (desktop) and collapsible drawer (mobile).- Sticky header on scroll.- Footer with newsletter, quick links, store policies, and social icons.## Performance Guardrails- Keep main thread JS minimal; split into small, route-scoped modules.- No jQuery; use progressive enhancement.- Defer non-critical images (lazy), and intersection-observer for below-the-fold sections.- Lighthouse targets: 90+ Performance, 100 SEO/Best Practices on product & collection pages.## Theme Settings (config)- Create robust controls in settings_schema.json:- Brand: logos (light/dark), favicon, primary/accent colors, typography scale.- Layout: container widths, grid gaps, corner radius, shadows.- Header/Footer toggles and menus.- Product: show/hide swatches, low-stock threshold, badges, share buttons.- Cart: drawer vs page, upsell source (collection/algorithmic), shipping threshold.- SEO: default meta patterns, social image, JSON-LD toggles.- Integrations: review app block placeholder, analytics/consent flags.## Developer Notes- Use asset_url and .css.liquid / .js.liquid only where necessary (keep logic in Liquid files otherwise).- Comment every section/snippet top with purpose + usage.- Strict schema validation—no orphaned settings.- Avoid global CSS bloat—use utility classes and component scopes.- Ship with a small set of presets (e.g., Minimal, Editorial, Bold Commerce) for fast setup.QA Checklist (pass before delivery)✅ Theme Editor: all sections movable, hideable, and reusable.✅ No console errors; network panel shows minimal requests; all third-party scripts gated by consent.✅ A11y: keyboard-only checkout flow to cart drawer works, ARIA roles valid.✅ SEO: unique titles, canonicals, JSON-LD renders, no duplicate H1s, breadcrumbs present.✅ Performance: CLS < 0.05, LCP < 2.5s on mobile test PDP, JS under strict budget.✅ Internationalization: strings localized; currencies format correctly.Visual Guidance (Horizon Reference)Match the sleek, launch-ready minimalism of Horizon: large product cards, confident typography, straightforward navigation, and fast feel. Do not copy code verbatim, but mirror the UX patterns and flexibility. With this prompt, I really believed that GPT-5 could produce a great output but guess what. Here's what it gave me: That's right, it's a whole mess haha! Final thoughts So... can GPT-5 build a Shopify theme? Not with just a single prompt. I think it would need a lot of back and fourth with GPT-5 to make it work. That said, this is the closest I’ve seen an AI come to “vibe coding” a full Shopify theme and nope, it's still far from perfect.