Every time I create a Custom Liquid, my products are alligned wrong

Store Design
1

For my shop I’ve created a few custom liquids. However whenever I do this, for some reason my products on my collection page are alligned wrong on mobile:

image
image412×573 52.4 KB

When I remove the custom liquid, they’re alligned correctly (gotta use imgur cus I can only upoad 1 image to this post): Imgur: The magic of the Internet

Now what baffles me, is that even if I place a custom liquid on a different page, the products on the collecting page still allign wrong.

Yes I did create all of these with AI, but unfortunately neither me or AI seem to have the solution for this.

Store: https://createe.nl/

Below one of my custom liquids:

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Banner met Aleo knoppen</title>
    
    <!-- Tailwind CSS voor de styling -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Aleo lettertype van Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    
    <style>
        .font-aleo {
            font-family: 'Aleo', serif;
        }
    </style>
</head>
<body class="bg-gray-100 p-8">

    <!-- De Banner Container -->
    <div class="w-full pt-6">
        
        <!-- 
          Hier zit de padding van 20px aan de linkerkant (pl-[20px]), 
          ruimte tussen de knoppen en de balk (pb-3),
          en de gekleurde streep onderaan (border-b-4 border-[#174D13]) 
        -->
        <div class="flex pl-[20px] pb-3 border-b-4 border-[#174D13]">
            
            <a href="https://createe.nl/collections/all" class="nav-link font-aleo text-sm px-4 py-2 bg-transparent border border-black hover:bg-gray-200 text-black mr-2 transition-colors duration-200 inline-block">
                Alle Items
            </a>
            
            <a href="https://createe.nl/collections/polos" class="nav-link font-aleo text-sm px-4 py-2 bg-transparent border border-black hover:bg-gray-200 text-black mr-2 transition-colors duration-200 inline-block">
                Polo's
            </a>
            
            <a href="https://createe.nl/collections/tees" class="nav-link font-aleo text-sm px-4 py-2 bg-transparent border border-black hover:bg-gray-200 text-black transition-colors duration-200 inline-block">
                Tees
            </a>

        </div>
    </div>

    <!-- Script om de actieve pagina zwart te maken -->
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const navLinks = document.querySelectorAll('.nav-link');
            // Pak het pad van de huidige URL (bijv. /collections/all)
            const currentPath = window.location.pathname;

            navLinks.forEach(link => {
                const linkPath = new URL(link.href).pathname;
                
                // Controleer of het huidige URL-pad overeenkomt met het pad van de knop
                if (currentPath === linkPath || window.location.href === link.href) {
                    // Verwijder de standaard styling
                    link.classList.remove('bg-transparent', 'text-black', 'hover:bg-gray-200');
                    // Voeg de actieve zwarte styling toe
                    link.classList.add('bg-black', 'text-white', 'hover:bg-black');
                }
            });
        });
    </script>

</body>
</html>
2

Hey!
I can see the problem right away in your code. Two things are breaking your collection page layout:

1. You’re loading a full HTML document inside a Shopify section. Your custom liquid has <!DOCTYPE html>, <html>, <head>, and <body> tags. When Shopify injects this into your page, you end up with a page-inside-a-page. That breaks the DOM structure and causes layout issues everywhere.

2. Tailwind CSS is the main culprit. This line: <script src="https://cdn.tailwindcss.com"></script> loads an entire CSS framework that resets and overrides your theme’s styles globally. That’s why your collection grid breaks even when the custom liquid is on a different page. Tailwind’s base styles are overriding your theme’s grid CSS across the entire site.

The fix: strip everything down to just the content. No DOCTYPE, no html/head/body, no Tailwind. Use inline styles instead:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

<div style="width: 100%; padding-top: 24px;">
  <div style="display: flex; padding-left: 20px; padding-bottom: 12px; border-bottom: 4px solid #174D13;">
    
    <a href="/collections/all" class="nav-link" style="font-family: 'Aleo', serif; font-size: 14px; padding: 8px 16px; background: transparent; border: 1px solid black; color: black; margin-right: 8px; text-decoration: none; display: inline-block;">
      Alle Items
    </a>
    
    <a href="/collections/polos" class="nav-link" style="font-family: 'Aleo', serif; font-size: 14px; padding: 8px 16px; background: transparent; border: 1px solid black; color: black; margin-right: 8px; text-decoration: none; display: inline-block;">
      Polo's
    </a>
    
    <a href="/collections/tees" class="nav-link" style="font-family: 'Aleo', serif; font-size: 14px; padding: 8px 16px; background: transparent; border: 1px solid black; color: black; text-decoration: none; display: inline-block;">
      Tees
    </a>

  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const navLinks = document.querySelectorAll('.nav-link');
    const currentPath = window.location.pathname;
    navLinks.forEach(link => {
      const linkPath = new URL(link.href).pathname;
      if (currentPath === linkPath) {
        link.style.background = 'black';
        link.style.color = 'white';
      }
    });
  });
</script>

Do the same for your other custom liquids: remove the HTML wrapper and Tailwind, replace with inline styles. Your collection grid should go back to normal immediately

3

Interesting! How come the AI writes the <html> and <head> tags in Liquid?

4

That’s probably not Shopify’s AI.

The recommendation is to either use Shopify’s AI, or be very specific about what you ask from 3rd party AI – that you want a Shopify section and you want all CSS scoped to this section

Having entire HTML document in your Custom Liquid, while technically, is not right, but browser should be able to recover from this.

However, blindly adding Tailwind CSS, especially via script is a no go.
It includes a lot of rules which affect/override rules from the theme.

If you must use Tailwind CSS, then ask AI to use Tailwind prefixed (TW – using a prefix).

Say, your problem with product grids is because Tailwind redefines

.grid {
  display: grid;
}

while theme expects it to be display: flex;

If you use Tailwind prefixed, it will use class like .tw-grid instead of .grid for these sections/CSS and would not hurt the rest of the theme.

5

It does not understand the context of where you are adding the code. I’d definitely recommend learning some HTML and CSS so that you could spot these mistakes when AI spits out this code