# How a Confirmation Modal Broke My Shopify Store's SEO ## 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](https://help.shopify.com/en/manual/promoting-marketing/seo/find-site-map) ## 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. ```liquid ``` ```css 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. ```javascript const onYes = () => { localStorage.setItem("ageConfirmed", "true"); document.body.classList.remove("age-verification-pending"); }; ``` ### The actual fix ✅ Remove the CSS rule that hides `main`. ```css /* 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 `` element 💡 The original code used `
` — a custom modal built by hand. Since we no longer need `display: none` on `main`, we can switch to the browser's native `` element. It handles the visual overlay automatically, without touching page content. ```html ``` What this improves: * `::backdrop` covers the page visually — no need to hide `main` * Native accessibility (focus trapping, `aria-modal`) built in * `showModal()` / `close()` replace manual class toggling ```css .age-modal[open] { /* style here */ } .age-modal::backdrop { background-color: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); } ``` ```js 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 `` 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?”