How a Confirmation Modal Broke My Shopify Store's SEO
Creating Shopify Theme with AI - #4
TL;DR
✅ If you add an age-check / confirmation modal, do not hide your entire page content behind it.
⚠️ If your main content is hidden (for example with
display: none), Googlebot may see an “empty” page and indexing can fail.
Situation: the shop was live, but Google could not find it 🔎
I launched my friend's Shopify store, removed the password protection, and waited. A month later, still couldn't find it on Google. Shop Instagram account come first then somebody else's website that talking about the shop.
At first, I assumed, “Shopify is a big platform. Google will find it soon.” I also remembered reading a post saying something similar.
I waited for a month. Still nothing.
First guess: Search Console setup? 🤔
My first instinct was to check the basics:
Sitemap
Google Search Console setup
Indexing request
Shopify generates a sitemap automatically, so that part was easy.
The tricky part was permissions: the store owner is my friend, and Search Console had to be set up under her Google account. So I told her how to set up, since shopify has good article: Sitemap setup
Tried: Search Console setup + request indexing 🛠️
Another month passed. Still not in search results. I searched for other reasons, but found nothing that matched my case.
So I visited my friend’s shop and asked her to open Search Console.
It turned out it was not set up yet. 🫠 So I set it up.
After we set it up, we used:
URL Inspection
Request indexing
The real cause: code hid the entire page 🤦
Even after that, the result did not change.
While checking the site again, I noticed something:
when the modal was shown, the page content was effectively empty.
The shop sells alcohol, so I added an age verification modal. While building it, I noticed the carousel behind the modal was still animating.
It looked a bit strange, so I asked an AI assistant for a fix.
The suggestion was: hide the page until the user clicks “Yes”.
I accepted it without thinking about SEO. What I did not realize — I hid the entire main content.
So when Googlebot visited the page, it could not see real content to index.
Original (broken) 🚫
The biggest cause was setting main as hidden.
<!-- layout/theme.liquid -->
<body class="age-verification-pending">
<script>
if (localStorage.getItem('ageConfirmed') === 'true') {
document.body.classList.remove('age-verification-pending');
}
</script>
<!-- other contents -->
</body>
body.age-verification-pending main {
display: none;
}
This 👆 one rule was the problem. It removed main from the page entirely — so Googlebot loaded the page and found nothing to index.
So unless the visitor clicked Yes, the content was hidden.
const onYes = () => {
localStorage.setItem("ageConfirmed", "true");
document.body.classList.remove("age-verification-pending");
};
The actual fix ✅
Remove the CSS rule that hides main.
/* removed */
body.age-verification-pending main {
display: none;
}
That's it for SEO. The page content now stays in the DOM whether the modal is open or not.
While we're at it: use the native <dialog> element 💡
The original code used <div role="dialog"> — a custom modal built by hand.
Since we no longer need display: none on main, we can switch to the browser's native <dialog> element.
It handles the visual overlay automatically, without touching page content.
<!-- before -->
<div class="age-modal" role="dialog">
<!-- contents here -->
</div>
<!-- after -->
<dialog class="age-modal">
<!-- contents here -->
</dialog>
What this improves:
::backdropcovers the page visually — no need to hidemainNative accessibility (focus trapping,
aria-modal) built inshowModal()/close()replace manual class toggling
.age-modal[open] {
/* style here */
}
.age-modal::backdrop {
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
}
if (document.body.classList.contains("age-verification-pending")) {
ageModal.showModal();
}
const onYes = () => {
localStorage.setItem("ageConfirmed", "true");
document.body.classList.remove("age-verification-pending");
ageModal.close();
};
Why this works 💡
The SEO fix was just one CSS rule removed.
Googlebot doesn't click buttons. It loads the page once and reads whatever is already visible in the DOM.
With body.age-verification-pending main { display: none; }, the page looked completely empty to the crawler.
The native <dialog> element uses ::backdrop to visually cover the page — but the content underneath stays in the DOM. The overlay is cosmetic. The content is real.
Conclusion ✨
I removed the “hide the whole page” logic.
I allowed the carousel to keep running behind the modal.
After that, the shop started to appear in Google search results.
If an AI suggests “hide the content”, double-check what it means for SEO.
Prefer UI patterns that overlay content instead of removing it.
When SEO looks broken, check the rendered page as a bot might see it: “Is there real content without clicks?”
