Why does Shopify edit HTML content in the custom liquid section?

Store Design

Topic summary

A developer encountered an issue where Shopify’s editor was unexpectedly modifying HTML code in a custom liquid section for a header banner. The original HTML appeared scrambled or reversed in certain sections when saved.

Troubleshooting attempts included:

  • Testing whether JavaScript libraries (lazy loading, etc.) were interfering by removing CSS classes
  • Adding self-closing slashes to image tags
  • Correcting the href path from relative to absolute (/pages/halloween-costumes)
  • Removing whitespace between elements

Root cause identified: The developer was nesting one <a> tag inside another, which is invalid HTML. Removing the nested button link resolved the scrambling issue.

Remaining concern: While this specific case is resolved, the developer notes that Shopify’s page editor still modifies HTML in some situations, which remains frustrating even though it’s unrelated to this particular example. The discussion highlights that Shopify’s editor may auto-correct or reformat invalid HTML markup.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

I have this block of HTML for a banner in my header:

<div class="grid grid-cols-1 md:grid-cols-2 overflow-hidden md:max-h-[600px]">
    <div class="order-0 flex relative overflow-hidden">
        <img src="//cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-mobile.jpg?v=1665682170&width=1024" srcset="//cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-mobile.jpg?v=1665441767&width=256 256w, //cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-mobile.jpg?v=1665441767&width=512 512w, //cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-mobile.jpg?v=1665441767&width=1024 1024w" width="1024" height="295" loading="lazy" class="block md:hidden h-full w-auto absolute">
        <img src="//cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-desktop_e331677a-5bf1-40b9-9653-924a8e1497e8.jpg?v=1665441775&width=1024" srcset="//cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-desktop_e331677a-5bf1-40b9-9653-924a8e1497e8.jpg?v=1665441775&width=256 256w, //cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-desktop_e331677a-5bf1-40b9-9653-924a8e1497e8.jpg?v=1665441775&width=512 512w, //cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-desktop_e331677a-5bf1-40b9-9653-924a8e1497e8.jpg?v=1665441775&width=1024 1024w" width="1024" height="514" loading="lazy" class="hidden md:block max-w-full max-h-full h-auto absolute">
        <div class="flex relative h-auto w-100 py-20 md:py-0">
            <div class="w-100 text-white self-center items-center justify-center text-center display">
                <h2 class="page-semigiga uppercase m-0">Ready to slay this</h2>
                <p class="page-giga text-anc m-0 lobster">Halloween?</p>
                <a class="mt-6 inline-block halloween-one-off-button bg-white" href="pages/halloween-costumes">Shop Now</a>
            </div>
        </div>
    </div>
    <div class="-order-1 md:order-1 flex overflow-hidden">
        <img src="//cdn.shopify.com/s/files/1/0240/9337/files/jlab-cosutmes-mobile.jpg?v=1665443113&width=1024" srcset="//cdn.shopify.com/s/files/1/0240/9337/files/jlab-cosutmes-mobile.jpg?v=1665443113&width=256 256w,//cdn.shopify.com/s/files/1/0240/9337/files/jlab-cosutmes-mobile.jpg?v=1665443113&width=512 512w, //cdn.shopify.com/s/files/1/0240/9337/files/jlab-cosutmes-mobile.jpg?v=1665443113&width=1024 1024w" width="1024" height="410" loading="lazy" class="block md:hidden max-w-full max-h-full h-auto">
        <img src="//cdn.shopify.com/s/files/1/0240/9337/files/costumes-textoverlay-dekstop.jpg?v=1665682172?v=1665441733&width=1024" srcset="//cdn.shopify.com/s/files/1/0240/9337/files/costumes-textoverlay-dekstop.jpg?v=1665441733&width=256 256w, //cdn.shopify.com/s/files/1/0240/9337/files/costumes-textoverlay-dekstop.jpg?v=1665441733&width=512 512w, //cdn.shopify.com/s/files/1/0240/9337/files/costumes-textoverlay-dekstop.jpg?v=1665441733&width=1024 1024w" width="1024" height="510" loading="lazy" class="hidden md:block max-w-full max-h-full h-auto">
    </div>
</div>

When I attempt to make the whole banner a link by wrapping it in an a tag, Shopify takes it upon themselves to screw it up and make a bunch of them all over the HTML:

Input HTML:

<a href="pages/halloween-costumes">
    <div class="grid grid-cols-1 md:grid-cols-2 overflow-hidden md:max-h-[600px]">
        <div class="order-0 flex relative overflow-hidden">
            <img src="//cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-mobile.jpg?v=1665682170&width=1024" srcset="//cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-mobile.jpg?v=1665441767&width=256 256w, //cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-mobile.jpg?v=1665441767&width=512 512w, //cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-mobile.jpg?v=1665441767&width=1024 1024w" width="1024" height="295" loading="lazy" class="block md:hidden h-full w-auto absolute">
            <img src="//cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-desktop_e331677a-5bf1-40b9-9653-924a8e1497e8.jpg?v=1665441775&width=1024" srcset="//cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-desktop_e331677a-5bf1-40b9-9653-924a8e1497e8.jpg?v=1665441775&width=256 256w, //cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-desktop_e331677a-5bf1-40b9-9653-924a8e1497e8.jpg?v=1665441775&width=512 512w, //cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-desktop_e331677a-5bf1-40b9-9653-924a8e1497e8.jpg?v=1665441775&width=1024 1024w" width="1024" height="514" loading="lazy" class="hidden md:block max-w-full max-h-full h-auto absolute">
            <div class="flex relative h-auto w-100 py-20 md:py-0">
                <div class="w-100 text-white self-center items-center justify-center text-center display">
                    <h2 class="page-semigiga uppercase m-0">Ready to slay this</h2>
                    <p class="page-giga text-anc m-0 lobster">Halloween?</p>
                    <a class="mt-6 inline-block halloween-one-off-button bg-white" href="pages/halloween-costumes">Shop Now</a>
                </div>
            </div>
        </div>
        <div class="-order-1 md:order-1 flex overflow-hidden">
            <img src="//cdn.shopify.com/s/files/1/0240/9337/files/jlab-cosutmes-mobile.jpg?v=1665443113&width=1024" srcset="//cdn.shopify.com/s/files/1/0240/9337/files/jlab-cosutmes-mobile.jpg?v=1665443113&width=256 256w,//cdn.shopify.com/s/files/1/0240/9337/files/jlab-cosutmes-mobile.jpg?v=1665443113&width=512 512w, //cdn.shopify.com/s/files/1/0240/9337/files/jlab-cosutmes-mobile.jpg?v=1665443113&width=1024 1024w" width="1024" height="410" loading="lazy" class="block md:hidden max-w-full max-h-full h-auto">
            <img src="//cdn.shopify.com/s/files/1/0240/9337/files/costumes-textoverlay-dekstop.jpg?v=1665682172?v=1665441733&width=1024" srcset="//cdn.shopify.com/s/files/1/0240/9337/files/costumes-textoverlay-dekstop.jpg?v=1665441733&width=256 256w, //cdn.shopify.com/s/files/1/0240/9337/files/costumes-textoverlay-dekstop.jpg?v=1665441733&width=512 512w, //cdn.shopify.com/s/files/1/0240/9337/files/costumes-textoverlay-dekstop.jpg?v=1665441733&width=1024 1024w" width="1024" height="510" loading="lazy" class="hidden md:block max-w-full max-h-full h-auto">
        </div>
    </div>
</a>

Output HTML:

<a href="pages/halloween-costumes">
    </a><div class="grid grid-cols-1 md:grid-cols-2 overflow-hidden md:max-h-[600px]"><a href="pages/halloween-costumes">
        </a><div class="order-0 flex relative overflow-hidden"><a href="pages/halloween-costumes">
            <img src="//cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-mobile.jpg?v=1665682170&width=1024" srcset="//cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-mobile.jpg?v=1665441767&width=256 256w, //cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-mobile.jpg?v=1665441767&width=512 512w, //cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-mobile.jpg?v=1665441767&width=1024 1024w" width="1024" height="295" loading="lazy" class="block md:hidden h-full w-auto absolute">
            <img src="//cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-desktop_e331677a-5bf1-40b9-9653-924a8e1497e8.jpg?v=1665441775&width=1024" srcset="//cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-desktop_e331677a-5bf1-40b9-9653-924a8e1497e8.jpg?v=1665441775&width=256 256w, //cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-desktop_e331677a-5bf1-40b9-9653-924a8e1497e8.jpg?v=1665441775&width=512 512w, //cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-desktop_e331677a-5bf1-40b9-9653-924a8e1497e8.jpg?v=1665441775&width=1024 1024w" width="1024" height="514" loading="lazy" class="hidden md:block max-w-full max-h-full h-auto absolute">
            </a><div class="flex relative h-auto w-100 py-20 md:py-0"><a href="pages/halloween-costumes">
                </a><div class="w-100 text-white self-center items-center justify-center text-center display"><a href="pages/halloween-costumes">
                    <h2 class="page-semigiga uppercase m-0">Ready to slay this</h2>
                    <p class="page-giga text-anc m-0 lobster">Halloween?</p>
                    </a><a class="mt-6 inline-block halloween-one-off-button bg-white" href="pages/halloween-costumes">Shop Now</a>
                </div>
            </div>
        </div>
        <div class="-order-1 md:order-1 flex overflow-hidden">
            <img src="//cdn.shopify.com/s/files/1/0240/9337/files/jlab-cosutmes-mobile.jpg?v=1665443113&width=1024" srcset="//cdn.shopify.com/s/files/1/0240/9337/files/jlab-cosutmes-mobile.jpg?v=1665443113&width=256 256w,//cdn.shopify.com/s/files/1/0240/9337/files/jlab-cosutmes-mobile.jpg?v=1665443113&width=512 512w, //cdn.shopify.com/s/files/1/0240/9337/files/jlab-cosutmes-mobile.jpg?v=1665443113&width=1024 1024w" width="1024" height="410" loading="lazy" class="block md:hidden max-w-full max-h-full h-auto">
            <img src="//cdn.shopify.com/s/files/1/0240/9337/files/costumes-textoverlay-dekstop.jpg?v=1665682172?v=1665441733&width=1024" srcset="//cdn.shopify.com/s/files/1/0240/9337/files/costumes-textoverlay-dekstop.jpg?v=1665441733&width=256 256w, //cdn.shopify.com/s/files/1/0240/9337/files/costumes-textoverlay-dekstop.jpg?v=1665441733&width=512 512w, //cdn.shopify.com/s/files/1/0240/9337/files/costumes-textoverlay-dekstop.jpg?v=1665441733&width=1024 1024w" width="1024" height="510" loading="lazy" class="hidden md:block max-w-full max-h-full h-auto">
        </div>
    </div>

  </div>

Why is Shopify screwing up my HTML?

1 Like
2

The classes indicate that this block of code is marked for javascript interaction, I wonder if it’s something with the library(ies) you have interacting with it? (lazy loading, or banner setup, etc)

You could test that by removing all the classes, and then just use the html elements. That would at least help you isolate the problem.

Another thing you could try, remove all the whitespace between that first and the next

after it. In a normal code editor it shouldn’t make a difference but since it’s happening because of adding that first element, I would give that a try.

Another thing you could try is closing your image tags, put a “/” before the last “>” so it follows the format .

3

Hi @joeybab3

Can you try to add a slash on your href? It should be , instead of 

<a href="/pages/halloween-costumes">
    <div class="grid grid-cols-1 md:grid-cols-2 overflow-hidden md:max-h-[600px]">
        <div class="order-0 flex relative overflow-hidden">
            <img src="//cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-mobile.jpg?v=1665682170&width=1024" srcset="//cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-mobile.jpg?v=1665441767&width=256 256w, //cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-mobile.jpg?v=1665441767&width=512 512w, //cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-mobile.jpg?v=1665441767&width=1024 1024w" width="1024" height="295" loading="lazy" class="block md:hidden h-full w-auto absolute">
            <img src="//cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-desktop_e331677a-5bf1-40b9-9653-924a8e1497e8.jpg?v=1665441775&width=1024" srcset="//cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-desktop_e331677a-5bf1-40b9-9653-924a8e1497e8.jpg?v=1665441775&width=256 256w, //cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-desktop_e331677a-5bf1-40b9-9653-924a8e1497e8.jpg?v=1665441775&width=512 512w, //cdn.shopify.com/s/files/1/0240/9337/files/jlab-pumpkin-desktop_e331677a-5bf1-40b9-9653-924a8e1497e8.jpg?v=1665441775&width=1024 1024w" width="1024" height="514" loading="lazy" class="hidden md:block max-w-full max-h-full h-auto absolute">
            <div class="flex relative h-auto w-100 py-20 md:py-0">
                <div class="w-100 text-white self-center items-center justify-center text-center display">
                    <h2 class="page-semigiga uppercase m-0">Ready to slay this</h2>
                    <p class="page-giga text-anc m-0 lobster">Halloween?</p>
                    <a class="mt-6 inline-block halloween-one-off-button bg-white" href="pages/halloween-costumes">Shop Now</a>
                </div>
            </div>
        </div>
        <div class="-order-1 md:order-1 flex overflow-hidden">
            <img src="//cdn.shopify.com/s/files/1/0240/9337/files/jlab-cosutmes-mobile.jpg?v=1665443113&width=1024" srcset="//cdn.shopify.com/s/files/1/0240/9337/files/jlab-cosutmes-mobile.jpg?v=1665443113&width=256 256w,//cdn.shopify.com/s/files/1/0240/9337/files/jlab-cosutmes-mobile.jpg?v=1665443113&width=512 512w, //cdn.shopify.com/s/files/1/0240/9337/files/jlab-cosutmes-mobile.jpg?v=1665443113&width=1024 1024w" width="1024" height="410" loading="lazy" class="block md:hidden max-w-full max-h-full h-auto">
            <img src="//cdn.shopify.com/s/files/1/0240/9337/files/costumes-textoverlay-dekstop.jpg?v=1665682172?v=1665441733&width=1024" srcset="//cdn.shopify.com/s/files/1/0240/9337/files/costumes-textoverlay-dekstop.jpg?v=1665441733&width=256 256w, //cdn.shopify.com/s/files/1/0240/9337/files/costumes-textoverlay-dekstop.jpg?v=1665441733&width=512 512w, //cdn.shopify.com/s/files/1/0240/9337/files/costumes-textoverlay-dekstop.jpg?v=1665441733&width=1024 1024w" width="1024" height="510" loading="lazy" class="hidden md:block max-w-full max-h-full h-auto">
        </div>
    </div>
</a>
4

The classes are tailwind which is a CSS library, no javascript is used here. Regardless, why would Shopify’s editor care what CSS classes are? It shouldn’t be editing it, as that should be done by the theme.

5

Yeah that didn’t do anything unfortunately.

6

The issue seems to be that I was wrapping one tag in another which you can’t do. I removed the button link and it works fine.

Shopify does edit HTML in some cases in the page editor which is annoying but that is unrelated to this specific example.