Help me implement a Shopify theme change safely in an existing Online Store 2.0 theme. Treat the supplied repository details as the source of truth. Do not invent theme files, app APIs, metafields, Storefront API access, or Shopify capabilities that are not documented in my inputs. Change requested: [FEATURE REQUEST] Theme context: [THEME CONTEXT] Relevant files or code: [RELEVANT CODE] Store data and settings: [DATA AND CONTENT MODEL]
Design and behavior requirements: [DESIGN REQUIREMENTS]
First, restate the implementation scope and identify assumptions. Then provide: 1) the exact files to create or edit; 2) complete code blocks for each changed file, labeled with its path; 3) an explanation of Liquid objects, section schema, blocks, presets, CSS, and JavaScript used; 4) merchant-editor setup instructions; and 5) a manual test checklist.
Use section settings and blocks where a merchant should control content. Make no hard-coded collection handles, URLs, colors, or text unless I provide them. Preserve translation compatibility using locale keys when the theme already uses them. Use semantic HTML, keyboard-operable controls, visible focus states, appropriate image alt handling, responsive images, and reduced-motion behavior for animation.
Test mentally for an empty setting, no products, one block, maximum blocks, long translated copy, missing image, sold-out variant, mobile viewport, and JavaScript disabled where the feature should degrade gracefully. Before answering, flag any code that could conflict with theme architecture, duplicate an existing feature, hurt performance, or require a Shopify app. Ask up to 3 clarifying questions only if a required input is missing.Fill in
| Placeholder | What to enter | Example |
|---|---|---|
| [FEATURE REQUEST] | Describe the customer-facing feature, its page location, and the intended interaction. | Add a configurable product comparison strip below the collection grid, with up to four merchant-selected products and an Add to Cart button. |
| [THEME CONTEXT] | Name the theme, Shopify version or architecture, existing conventions, and any relevant dependencies. | Dawn 15.2.0 clone; Online Store 2.0; sections use main-product.liquid conventions; no build process. |
| [RELEVANT CODE] | Paste the relevant Liquid, JSON, CSS, JavaScript, and file paths from the current theme. | sections/main-collection-product-grid.liquid and assets/component-card.css; existing quick-add uses product-form.js. |
| [DATA AND CONTENT MODEL] | List products, metafields, metaobjects, navigation, tags, or other store data the feature needs. | Selected products must be section blocks; show title, featured image, price, availability, and selected variant. |
| [DESIGN REQUIREMENTS] | Specify layout, breakpoints, visual rules, copy, accessibility needs, and merchant controls. | Desktop four columns, mobile horizontal scroll, no autoplay, editor-selectable heading, match Dawn buttons and spacing. |
How to use
- Export or duplicate the theme before applying code, then paste the relevant files instead of describing them from memory.
- Ask the model to preserve your theme's existing patterns rather than mixing snippets from unrelated themes.
- Apply changes in a development theme and test the editor settings, products, mobile layout, and add-to-cart behavior.
- Follow up with: "Review this implementation against the exact files I changed and return only regressions or missing edge cases."
Variations
Section scaffold
Use this when you need a merchant-configurable section from a detailed specification.
Create an Online Store 2.0 Shopify section from this specification: [SECTION SPEC]. The relevant theme conventions are [THEME CONVENTIONS]. Return the complete section Liquid file, including valid JSON schema, settings, blocks, presets, responsive image markup, and any minimal CSS or JavaScript required. Explain where every file belongs. Use merchant-configurable settings for content and avoid unsupported Liquid filters. Check valid schema syntax, empty-state behavior, block limits, keyboard access, and mobile overflow before answering.
Bug diagnosis
Use this when a theme feature exists but fails in a specific state.
Diagnose this Shopify theme issue without guessing. Expected behavior: [EXPECTED BEHAVIOR]. Actual behavior: [ACTUAL BEHAVIOR]. Reproduction steps: [STEPS]. Relevant code and console output: [CODE AND ERRORS]. Give the most likely root causes in ranked order, the smallest safe fix for each, and a test that distinguishes them. Account for Liquid render-time behavior, variant state, section re-rendering, event listeners, and editor mode. Flag any claim that requires a file or error log I did not provide.
Performance review
Use this before publishing a theme feature that adds images or JavaScript.
Review this proposed Shopify theme implementation for performance and accessibility. Code: [CODE]. Page context: [PAGE TYPE]. Target behavior: [TARGET BEHAVIOR]. Return a prioritized findings table with issue, impact, evidence in the code, and specific fix. Check image dimensions and loading strategy, render-blocking assets, duplicate JavaScript initialization, event cleanup, layout shift, semantic structure, focus management, color contrast, and reduced motion. Do not rewrite unrelated files or assume third-party app behavior.
Tips
- Use a development theme and a real product set that includes unavailable, discounted, and image-less variants before publishing.
- Paste the existing section schema and nearby components so generated code follows the theme's naming, event, and CSS conventions.
- Keep business content in section settings, blocks, metafields, or metaobjects; hard-coded merchandising text creates avoidable maintenance work.
- Validate JSON section schema separately, since valid Liquid can still fail to appear in the Theme Editor.
FAQ
Can ChatGPT build a complete Shopify theme?
It can generate components and explain architecture, but an existing theme's files, conventions, and test environment are needed for reliable integration.
Will generated Liquid work in every theme?
No. Themes differ in snippets, CSS architecture, JavaScript events, and available settings. Supply the files around the change.
Should I paste store credentials or customer data?
No. Code, public product structure, and redacted errors are normally enough.