# Claude code produced HTML (beginner)

**URL:** <https://community.shopify.com/t/claude-code-produced-html-beginner/631503>\
**Category:** AI Build Your Business\
**Created:** [June 7, 2026, 12:59pm UTC](https://community.shopify.com/t/claude-code-produced-html-beginner/631503 "2026-06-07T12:59:26Z")\
**Posts on this page:** 10\
**Page:** 1

## 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.

<div class="post-metadata">

**Author:** ![retrodesire](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/retrodesire/32/375657_2.png) [@retrodesire](https://community.shopify.com/u/retrodesire)\
**Post date:** [June 7, 2026, 12:59pm UTC](https://community.shopify.com/t/claude-code-produced-html-beginner/631503/1 "2026-06-07T12:59:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Maximus3](https://avatars.discourse-cdn.com/v4/letter/m/7ab992/32.png) [@Maximus3](https://community.shopify.com/u/Maximus3)\
**Post date:** [June 7, 2026, 1:20pm UTC](https://community.shopify.com/t/claude-code-produced-html-beginner/631503/2 "2026-06-07T13:20:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tim\_tairli](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/tim_tairli/32/283567_2.png) [@tim\_tairli](https://community.shopify.com/u/tim_tairli)\
**Post date:** [June 7, 2026, 1:21pm UTC](https://community.shopify.com/t/claude-code-produced-html-beginner/631503/3 "2026-06-07T13:21:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![retrodesire](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/retrodesire/32/375657_2.png) [@retrodesire](https://community.shopify.com/u/retrodesire)\
**Post date:** [June 7, 2026, 1:41pm UTC](https://community.shopify.com/t/claude-code-produced-html-beginner/631503/4 "2026-06-07T13:41:37Z")

</div>

i asked claude to design each page my current theme is premium [www.retrodesire.net](http://www.retrodesire.net)

---

<div class="post-metadata">

**Author:** ![Maximus3](https://avatars.discourse-cdn.com/v4/letter/m/7ab992/32.png) [@Maximus3](https://community.shopify.com/u/Maximus3)\
**Post date:** [June 7, 2026, 2:13pm UTC](https://community.shopify.com/t/claude-code-produced-html-beginner/631503/5 "2026-06-07T14:13:15Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![retrodesire](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/retrodesire/32/375657_2.png) [@retrodesire](https://community.shopify.com/u/retrodesire)\
**Post date:** [June 7, 2026, 2:15pm UTC](https://community.shopify.com/t/claude-code-produced-html-beginner/631503/6 "2026-06-07T14:15:48Z")

</div>

replacing a full page layout

---

<div class="post-metadata">

**Author:** ![retrodesire](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/retrodesire/32/375657_2.png) [@retrodesire](https://community.shopify.com/u/retrodesire)\
**Post date:** [June 7, 2026, 2:20pm UTC](https://community.shopify.com/t/claude-code-produced-html-beginner/631503/7 "2026-06-07T14:20:52Z")

</div>

claude is building the liquid files

---

<div class="post-metadata">

**Author:** ![Maximus3](https://avatars.discourse-cdn.com/v4/letter/m/7ab992/32.png) [@Maximus3](https://community.shopify.com/u/Maximus3)\
**Post date:** [June 7, 2026, 2:45pm UTC](https://community.shopify.com/t/claude-code-produced-html-beginner/631503/8 "2026-06-07T14:45:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Choong](https://avatars.discourse-cdn.com/v4/letter/c/9f8e36/32.png) [@Choong](https://community.shopify.com/u/Choong)\
**Post date:** [June 8, 2026, 6:05am UTC](https://community.shopify.com/t/claude-code-produced-html-beginner/631503/10 "2026-06-08T06:05:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bchen27](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/bchen27/32/400064_2.png) [@bchen27](https://community.shopify.com/u/bchen27)\
**Post date:** [June 17, 2026, 7:50am UTC](https://community.shopify.com/t/claude-code-produced-html-beginner/631503/12 "2026-06-17T07:50:07Z")

</div>

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.
