Shopify Advanced Previewing: Redirect all non-staff using a quick snippet (Staff-only live previews of any page or template)

Photo by Arnold Francisca on Unsplash

The Problem

If your a Shopify developer or even a Shopify “Expert”, then you’ve had to battle your way round the odd workaround situation due to the limitations of the system — that's how life is when you work primarily on a platform that is closed off apart from Liquid theme templates containing pre-defined objects and filters, HTML, CSS & JS. This means that a lot of the time, you have to bend stuff round to get Shopify to act how you require it too.

Recently at the company I work for (A large food supplement Shopify company), we realised that you can have preview themes, but you can’t preview a hidden product on a preview theme — even if you juggle the URLs and parameters around it seems that you can have one or the other. You can either preview a hidden product on the live theme, or preview a non-live theme but without the product.

We need to carry out mission critical shopping experience updates to our theme & product purchase flow by adding more variant options and then develop a preview theme around the new hidden duplicated products, so we had to come up with a way we could do both so here it is.

The Snippet

All we need to do is use a bit of a workaround and make it includable on any page we want that is live on the live theme, that will redirect the user before the page is displayed. I called it is-admin.liquid but you can call it is-staff.liquid or whatever makes most sense.

The snippet itself explains how it works in the top comment, but basically it looks for the preview theme bar that shows up on every page load if your previewing a theme, this allows you to have a live product that is a duplicate with new data and simply do:

{% include 'is-admin' %}

The snippet has to use some questionable technique to work round Shopify and how it processes the header data for its own JS, so we use its capture method to capture the content_for_header, the way I designed it is so it can be used anywhere on a page, but that does mean content_for_header gets processed twice, the best case scenario would be to include the snippet in the header of every page and echo the content_for_header where it has been captured — this way you would only have to have Shopify process your header only once but for most stores and developers this shouldn’t really be much of a concern.

Including the snippet anywhere in the page should be alright, but your best off getting it as close to the top of the page as possible — so the redirect is called before the page starts to fully render, the choice we made is to just direct them to the standard 404 page but another choice is sending them back to the homepage. You could even use a flash notice to notify your users that part of your site is still under construction, this will also work for Collections, Pages, any Shopify template type basically.

The snippet itself, commented up so you can remember its use.

Now at the time of writing, this is how Shopify inject their preview bar as explained in the Gist. As it says Shopify can at any time change the way they inject the bar, rename objects or references used or any change could essentially break this method — you will then have to track down the change and modify the part of the snippet that uses the contains operator to get it working again.

Shopify is a great platform, but it has its limitations and sometimes even with the minor performance hit you’ll get from this snippet, it's better than having your preview-live hybrid development available for anyone/any search engine to see.

Things to remember

1. Make sure you only ever include the snippet on a page once, including it more than once will decrease performance further and not actually help in any way apart from confusing the browser further.
2. Keep checking the code works and Shopify haven’t modified anything — this is not built for long term production use but more for short term sprints where there is no other option due to needing to use live data but hide it from non-staff.
3. Make sure anyone you do want to view it gets provided the correct preview link and they use it before they try to visit the hidden page, a common mistake you wouldn’t believe!
4. Try get the snippet as high as you can up the page, so it fires before the page starts building itself out.
5. Please make sure you don’t have a link to the hidden page floating around in a loop of collections or the main menu, another surprising common oversight.
6. Once included on the page, you can also use & test the isAdmin variable that has been assigned to true, just in case you wish to use it for non-redirect reasons, this snippet can easily be modified to carry out another action such as flashing a notice, changing how the page renders or anything you can come up with! Get creative now you can tell whos a staff member or not.

Little Advanced Tip

If you have no choice but to use this workaround for a while, consider adding support for the search engine noindex meta tag like below, which will also help disguise people from ending up on pages they shouldn’t be on anyway.

All Engines:
<meta name="robots" content="noindex" />
Specifically Google:
<meta name="googlebot" content="noindex" />

Right, I hope you guys have good luck hiding your new exciting development from the world until they are ready to see it!

If you require Shopify help, use their Expert program or email myself at root@ livingthedream.fun and I can direct you to recommended Shopify developers with many years experience.

Its now 2020 as well, happy new year!