How to Design a Shopify Theme with Claude and Integrate It Into Your Existing Store

What designing a Shopify theme with Claude actually means

Designing a Shopify theme with Claude does not mean pasting one prompt and getting a finished store. It means using Claude as a fast, capable front-end engineer: you provide the design direction and brand rules, and Claude produces the Liquid, CSS, JavaScript, and section schemas that make up a real, editable Shopify theme.

The goal is a theme that looks custom, matches your brand, and stays fully editable in the Shopify theme editor, so your team can change content later without touching code.

Shopify theme architecture you need to know first

Modern Shopify themes use the Online Store 2.0 model. Before you build anything, it helps to understand the pieces Claude will generate:

• →Liquid: Shopify's templating language that renders store data into HTML
• →Sections: reusable, self-contained blocks with their own settings, defined in a {% schema %} tag
• →JSON templates: page templates that list which sections appear and in what order
• →Blocks: repeatable elements inside a section that merchants can add, remove, and reorder
• →settings_schema.json: global theme settings like colors, fonts, and layout
• →Assets: the CSS and JavaScript files the theme loads

The theme folder structure to work in

Claude will produce cleaner, drop-in code if you tell it the exact folder a file belongs in. Every Shopify theme follows the same structure, so name it in your prompt and ask for files that slot straight in:

• →layout/theme.liquid: the master wrapper that loads the head, header, footer, and scripts
• →sections/: one .liquid file per section (header.liquid, hero.liquid, featured-collection.liquid), each ending in a {% schema %}
• →blocks/: reusable block files a section can render and merchants can reorder
• →templates/: JSON files (product.json, collection.json, index.json) that list which sections render on each page
• →snippets/: small reusable partials pulled in with {% render 'snippet' %}
• →config/settings_schema.json and settings_data.json: global theme settings and their saved values
• →assets/: CSS, JavaScript, and images, referenced with the asset_url filter
• →locales/: translation strings, so text stays editable and translatable

Step 1: Write a design brief Claude can build from

Claude produces far better output when the brief is specific. Give it your brand colors and hex values, your fonts, spacing preferences, the pages you need (home, collection, product, cart), and reference sites you like. Attach screenshots of your current store so the new theme feels like an evolution, not a reset.

Be explicit that you want Online Store 2.0 sections with a {% schema %} for every section, so everything stays editable in the theme customizer rather than hard-coded.

Prompt patterns that get better theme code

The quality of a Claude-built theme tracks the quality of your prompts. A few patterns consistently produce cleaner, more editable Shopify code:

• →State the target: 'Build an Online Store 2.0 section file for sections/hero.liquid with a {% schema %} block.' Naming the file and the schema removes guesswork.
• →Expose every text, image, link, and colour as a schema setting, so nothing is hard-coded and merchants can edit it in the customizer.
• →Ask for accessible, semantic HTML: real heading levels, alt text bound to settings, focus states, and aria labels on interactive elements.
• →Request CSS scoped to the section (prefixed classes or the section id) so styles never leak across the theme.
• →Ask Claude to use native Shopify objects and filters (product, collection, image_url, money) rather than inventing data.
• →Iterate in small steps: generate one section, paste it in, preview, then ask for the next. Do not request the whole theme in one message.

Step 2: Generate sections, templates, and schemas

Work section by section rather than asking for the whole theme at once. Ask Claude to build the header, hero, featured collection, product grid, and footer as individual sections, each with its own settings schema for headings, images, and links.

For every section, request three things: the Liquid markup, the CSS scoped to that section, and the schema block that exposes settings to merchants. This keeps the theme modular and easy to maintain.

A worked example: a schema-driven hero section

It helps to know what good looks like before you generate a whole theme. A well-built hero section, the kind you want Claude to produce, has three parts that work together:

• →Liquid markup that reads from settings, for example the heading from section.settings.heading, the image through the image_url filter with a width for responsive sizing, and the button from a link and label setting.
• →A {% schema %} block that declares those settings: a text field for the heading, a richtext field for the subheading, an image_picker for the background, url and text fields for the button, plus a color setting for the overlay.
• →A presets entry in the schema so the section shows up in the customizer's Add section menu with sensible default content.

Step 3: Integrate into your existing store safely

This is the step that protects your live store. Never edit the published theme directly. The safe path uses the Shopify CLI:

• →Install the Shopify CLI and run shopify theme pull to download a copy of your current theme
• →Create a new working copy, or duplicate the live theme in Online Store, Themes so you have a rollback point
• →Add Claude's generated sections and templates into the theme folder
• →Run shopify theme dev to preview changes on a local server against real store data, with hot reload
• →Run shopify theme push --unpublished to upload it as an unpublished theme customers cannot see

Step 4: Test, QA, and publish

Before publishing, use the unpublished theme's preview link to check every template on desktop and mobile: home, a collection, a product with variants, cart, and checkout entry. Confirm the sections are editable in the theme customizer, test add-to-cart, and run a Lighthouse pass for performance and accessibility.

When it passes, publish from Online Store, Themes. Because the old theme is still saved, you can revert instantly if anything looks wrong on the live store.

Performance, accessibility, and SEO checks

A good-looking theme that loads slowly or breaks for screen readers will cost you sales and rankings. Run this checklist before you publish, and ask Claude to fix anything that fails:

• →Core Web Vitals: images served through image_url at the right size and lazy-loaded, minimal render-blocking CSS and JS, and a Lighthouse performance score you are happy with on mobile.
• →Accessibility: semantic headings in order, alt text on every image, visible focus states, sufficient colour contrast, and keyboard-operable menus and buttons.
• →SEO fundamentals: one h1 per page, descriptive title and meta from Shopify settings, clean heading structure, and product and breadcrumb structured data left intact.
• →App blocks: theme app extensions for reviews, upsells, and subscriptions still render, since a redesign that drops them quietly breaks revenue features.
• →Speed on real content: preview against your largest collection and a product with many variants, not just demo data.

Common pitfalls to avoid

A few mistakes turn a smooth rollout into a support ticket:

• →Editing the live theme instead of an unpublished copy, so mistakes hit real customers
• →Hard-coding text and images instead of exposing them through section schemas
• →Skipping mobile testing, where most Shopify traffic actually converts
• →Forgetting app blocks, so installed apps like reviews or upsells stop rendering
• →Not keeping the previous theme as a backup before publishing