AI can generate a Shopify section that looks fine, not one you can edit
A theme I was reviewing had a section that would not move. You could pick it up in the theme editor, drag it, and it would return to its original position. Nothing in the console, no error in the editor. The section rendered correctly on the storefront.
The cause was one attribute. The section had id="hero-1" in its markup instead of {{ section.id }}. Shopify uses that value to tell one section instance from another, so two instances of the same section had the same ID, and the editor could not keep track of which one you were dragging. Replacing the hardcoded value with {{ section.id }} fixed it.
That theme came from an AI tool. The four issues below are the ones I keep finding in themes built this way. Two of them show up as bugs in the editor, two of them show up months later.
#1. Hardcoded IDs in the section markup
Liquid sections need {{ section.id }} for their identity. A hardcoded value works while there is only one instance of the section on the page. Add a second one, or duplicate the section into a template twice, and both render with the same ID. The storefront still looks right. The editor stops behaving predictably.
#2. Missing presets
Sections that merchants should be able to add need a presets array in the schema. Without it, the section renders wherever it is already placed in a template, so it passes a visual check. It never appears in the Add section menu.
The same applies to {{ block.shopify_attributes }}. Without it on a block, the block renders but cannot be selected in the editor, so merchants cannot change its settings or reorder it.
Both of these only appear when someone tries to edit the theme. That is why they survive a review, a screenshot check, and a demo.
#3. CSS inside the section markup
Many generated sections include a <style> block in the section itself. This works, and it has two costs. The rules reload on every page where the section appears, and when two sections define the same selector, the result depends on load order rather than on which file owns the style. Shopify's {% stylesheet %} tag handles this: one request, deduplicated, scoped to the section.
The same pattern shows up in responsive rules. Generated sections often contain the desktop layout and skip the breakpoint at 750px, so the section tests clean at 1440px and breaks on a phone. For a store where most sessions are mobile, that is the layout that matters most.
#4. Code that disappears on theme update
When a theme update is published, Shopify keeps the merchant's settings and template edits and leaves custom code alone. Code that sits outside the theme's own structure can be missing from the new version. This is the expensive one, because the merchant ends up with a feature that has no readable source and no one who remembers how it was built.
#What Shopify says about this
Shopify's theme support page lists AI-generated theme blocks among the customizations its support team will not troubleshoot. That means the merchant has no support path if the person who wrote the code is unavailable.
The requirements for listing a theme in the Shopify Theme Store set a higher bar than "it renders":
- Average Lighthouse performance of at least 60 and accessibility of at least 90, measured on the home, product, and collection pages, on desktop and mobile, with real content in the sections.
- Original code. Themes derived from Dawn or Horizon are not eligible as new submissions.
- No fake urgency components such as countdown timers or low-stock counters.
Those requirements apply to the official store. Themes sold elsewhere are not reviewed against them.
#A five-minute check for any theme
- Open the theme editor on a page that has your sections and try to move one to a different position.
- Check whether the section appears in the Add section menu.
- Open the store on a phone, add a product to the cart, and complete the flow to the cart page.
- Press Tab through the page and confirm you can see where focus is.
If the section does not move, does not appear in the menu, breaks on mobile, or the focus indicator is missing, the theme needs work before a merchant can rely on it.
#How I build sections
I built a theme for pet stores with 44 sections and 20 page templates. Each section uses {{ section.id }}, ships with presets, includes {{ block.shopify_attributes }} on its blocks, and keeps its CSS in a stylesheet tag.
Before release I loaded the home, collection, and product pages at six widths from 375px to 1440px and checked for horizontal overflow, broken images, dead links, and keyboard traps. No horizontal overflow at any width. Touch targets measured at 24x24 or larger to meet the WCAG 2.5.8 minimum, which required resizing six link styles that were initially smaller.
None of that is visible in a screenshot. It shows up when the merchant changes the store themselves.