"i only speak liquid" #42: Making Theme Previews Easy

Written by Joe (a Storetasker Expert)

Author

Joe Callon
January 24, 2024

Hey all 👋!

Welcome back to my second edit of ‘i_only_speak_liquid’ to kick off 2024, hope your new year is going well so far! I’m Joe, a Storetasker expert and front-end developer who has worked within Shopify’s Plus Support team, agencies, and as a freelancer for a good few years. Let’s get going!

What I’ve been thinking about:

If you’re a front end developer within the Shopify space, you’re probably pretty used to sharing your work with your team or client by heading into the Shopify admin, clicking the three small dots and right-clicking the Preview link to grab the URL for the version of your client’s store with your latest changes. This works, but it feels clunky, and will only ever direct the recipient to the homepage of the store you’re working on. 

Shopify’s theme preview bar is also buggy, and the .shopifypreview.com links it generates don’t send you to the exact URL they’re generated from, and don’t allow for checking out whilst browsing, which is all to say, it’s a pretty poor experience.

To get around this, I’ve added a bookmarklet in my Chrome bookmarks bar which when clicked, automatically copies the URL of the page you’re on and appends the Shopify theme ID parameter to the end, with the ID of the theme you’re currently previewing added.

To do this, right-click in your bookmarks bar and click Add Page, you can name this whatever you like, I just have it as “Preview Theme”. Then in the URL field, add the following:

javascript:(function()%7Bif(window.location.href.indexOf('%3F') > -1) %7B%0Anavigator.clipboard.writeText(window.location.href%2B'%26preview_theme_id%3D'%2Bwindow.Shopify.theme.id)%3B%0A%7D else %7B%0Anavigator.clipboard.writeText(window.location.href%2B'%3Fpreview_theme_id%3D'%2Bwindow.Shopify.theme.id)%3B%0A}})()%3B

Now click save, and when you click the Preview Theme link while browsing a Shopify store, the URL will be automatically copied to your clipboard:

This will handle any other parameters on there too, so if you’re browsing a specific variant or have any tracking parameters in your URL, it’ll still work as expected:

This allows you to share the URL of the exact page you’re working on with the theme ID, and ensures you don’t run into a scenario where your client has forgotten to click the preview link before taking a look at the page, and wondering where all your incredible work has gone.

Shopify Editions Winter ‘24 - registration is now available for the latest drop of Shopify features!

Updates from Shopify engineering - if you’re interested in the nitty gritty details of what changes are being made to the Shopify admin and backend, this is for you

Algomo for Shopify - whilst I remain broadly skeptical of AI, I think it has its uses, and this is an interesting upcoming integration from Algomo which will give customers really quick access to different information from your store including their order info and product availability, could be useful!

1 app I like:

Easy Student Discounts - admittedly, I’m somewhat biased here since Radiant, the app dev, are my most recent employer. However, they do great work with the app side of their agency and ESD is a really well designed, easy to use app for any of your clients who are looking to offer a student discount without partnering with a third-party system and losing a large chunk of the revenue to them.

One learning as a freelancer:

This week marks my first as a full-time Shopify freelancer! I’ve been working with Storetasker alongside my full time job at a Plus agency (h/t to Radiant who I mentioned a mere paragraph ago) for a couple of years and steadily growing my portfolio as a freelancer, so I think my number one learning for this edit is patience. 

I’ve been doing this job (or at least, something very similar) for coming up to ten years, and once you see that the freedom of freelancing is available to you, it’s very tempting to jump in with both feet. But, I’d exercise caution, making sure to build a lasting relationship with your employer and freelance clients to set yourself up and making sure you’re fully ready before committing yourself to being out there on your own. 

After all, you’re not just going to be able to turn on your laptop on a Monday and have work there ready for you, you have to bring that work in yourself, and it’s worth asking yourself if it’s worth the added stress and effort. Get everything you can from the experience of being employed, and then only when you feel like you are in a prime position, go for it!

Take the time to save financially, but also save yourself from taking on too much at once to rush your career, and trust me, you’ll feel the benefits in the long run.

Cheers,

Joe