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

Store Design
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.