I created a custom landing page that has a totally different look from my main Shopify store theme. I want to add this page directly to my existing store instead of putting it on a different subdomain.
I need this page to be accessible at something like mystore.com/pages/custom-landing instead of landing.mystore.com. The tricky part is that this landing page needs to use completely different CSS and JavaScript files than my main store theme.
Is there a way to do this in Shopify? Can I create a page that ignores the main theme styling and uses its own custom files?
u can also use liquid conditionals in your main theme files. I just did this - wrap your default css/js includes with {% unless template contains 'custom-landing' %} and add custom assets only when that template loads. it’s a bit hacky but works great and u don’t have to rebuild everything from scratch.
I’ve had good luck with a standalone page template approach. Start with a CSS reset to wipe out all theme styles, then load only the stylesheets you need for that specific page. This avoids the inheritance headaches you get with conditional loading methods. Keep your template simple - I usually just grab the essentials like shop URL and page content from Shopify, everything else comes from custom assets. Performance is better too since you’re not loading a bunch of theme stuff you don’t need. Just test it on different devices since you’re bypassing your main theme’s responsive setup.
I’ve done this for several clients - couple ways that work great. The template method works, but I prefer building a completely custom page template with minimal liquid and loading assets externally. Upload your CSS and JS files to the assets folder, then reference them directly in your custom template while skipping the main theme files. Build a bare-bones template that doesn’t inherit the standard theme structure. Just heads up - you’ll need to handle cart functionality separately if your landing page needs Shopify features, since you’re bypassing the main framework.
Yes, it is indeed possible to create a custom landing page on Shopify with its own CSS and JavaScript. You’ll need to create a new template, for example page.custom-landing.liquid, in your templates folder. In this template, ensure you override the default theme styling and include links to your custom CSS and JavaScript files. This method allows you to have a clean structure without any influence from the main theme. I’ve implemented this approach for various projects, ensuring that specific styles remain intact. Just remember to handle any potential CSS conflicts with the main theme to avoid unexpected design issues.