Claude code produced HTML (beginner)

AI-generated summary

A beginner wants to use Claude-generated code to redesign Shopify pages but is unsure where to paste it in the theme editor and whether existing code should be deleted.

The main guidance is to avoid deleting theme code unless fully understood. Shopify themes do not work like standalone HTML pages; they use Liquid files, JSON templates, sections, snippets, and page data. A full HTML document with <!DOCTYPE html>, <html>, <head>, or <body> is not directly compatible and could break the theme.

Suggested approaches:

  • For small elements like banners or styled blocks, use the Shopify theme customizer and add a “Custom Liquid” section.
  • For a full page layout, Claude should generate a Shopify Liquid section, not a full HTML page. Create a new .liquid file under Sections, ensure it includes a {% schema %} block, then add it to a new template and assign the page to that template.

Several replies strongly caution against coding or replacing whole pages without understanding Shopify’s theme structure. The issue remains open, with the next step being to verify exactly what Claude generated and convert it into the correct Shopify format if needed.

hi i asked claude to produce HTML code but im slightly confused where bouts im entering the code i know i have to go into theme editor>edit code but this is where i get confused, does the code go at the top of the pages or is there anything of the original code to be dleted?

many thanks

That last part… don’t delete stuff if you’re not absolutely sure it needs to be deleted.

I would seriously consider not doing anything until I have a full understanding of what the theme files do, how the theme is structured, how the files and parts are connected.

What is this code for?
Can you share it here?

What theme you’re using?

Unless you’ve instructed AI specifically, the code may be a complete HTML page, while you need a fragment.
You may want to instruct AI specifically to create a Shopify section, block, or fragment of HTML/Liquid code to paste it into “Custom Liquid” section, depending on your goal.

i asked claude to design each page my current theme is premium www.retrodesire.net

A Shopify theme is structured very different from full HTML files, which have <html> <head> and <body> tags, so if that’s what you’re doing, it will not be compatible and will most definitely break things.

Shopify pages are structured as a json template file, liquid section files, and rendered liquid snippets, with the Page being the data that gets injected at read time.

So it really depends on what exactly you’re trying to do. Are you adding a new section to an existing page, replacing a full page layout, or building something from scratch?

replacing a full page layout

claude is building the liquid files

Ok but you need to understand that even though you want it to be a full page layout, it still needs to be saved as a Section file.

Still not advisable but if everything is correctly formatted:

So if it’s truly a Liquid file, go to the code editor, right click on Sections and create a new file. Name it, and put “.liquid” at the end. The new file will open. Make sure it’s blank. Then paste your Liquid code and save. It must have a {% schema %} block at the bottom.

Once that is done, you can go back to the theme editor, create a new Template, and add the section and remove any old ones you don’t want.

Then you can assign the Page to the new template in Admin.

Is there any specific design or requirement that couldn’t be fulfilled by any Shopify theme?

If you are just looking for a specific feature, potentially you can get Claude to code it as an embeddable static html and just embed that specific part (using content editor in your page / blog).

Highly not recommend coding the whole page, or the whole site. Wherever / whoever gives you the idea to do this, maybe you should consult with them before going at it.

the answer depends on what the code is for. if claude gave you a full HTML page (starts with ), that’s not going to work directly in shopify because themes use liquid templates, not standalone HTML files. you’d need to ask claude to convert it into a shopify section instead.

if it’s just a snippet of HTML like a banner or styled block, go to online store > themes > customize, then add a “custom liquid” section wherever you want it on the page. paste the HTML there. don’t touch the existing theme code files unless you know what you’re doing, one wrong delete and you can break the whole layout.