I added a third-party platform pop-up form code to the section of the Theme.Liquid file, but this is causing the pop-up form to appear on all pages which is quite annoying.
How do I ensure the code is only applied to the store’s Home Page?
Topic summary
Main issue: A third-party pop-up form added to the Shopify theme.liquid appears on all pages; the goal is to show it only on the Home page.
Key context: In Shopify, theme.liquid is shared across all pages (header/footer), so code in applies site-wide. A CSS-based approach can selectively hide the popup on non-Home pages. “template-index” refers to the Home page body class.
Action taken: After sharing the store link, a CSS fix was proposed to add at the end of theme.css. It hides the modal globally (.fd-modal set to display:none; visibility:hidden) and shows it on the Home page (.template-index set to display:block; visibility:visible).
Outcome: The user confirmed the CSS resolved the issue, limiting the popup to the Home page. No further changes requested; discussion appears resolved.
Note: A specific code snippet is central to the solution (CSS targeting .fd-modal and the Home page’s .template-index).
@Empyrean - shopify shares templates hence theme.liquid is shared by all pages for header and footer
we can use css to hide this popup on other pages and keep it activated on home page only
Thanks, Can you tell me what to insert to hide the popup on other pages?
@Empyrean - can you please share your page link?
@Empyrean - add this css to the very end of your theme.css file and check
.fd-modal{display: none; visibility: hidden;}
.template-index{display: block; visibility: visible;}
1 Like
Seems to have done the trick! thanks a ton 