How to make Shopify theme previews easy

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%7D%7D)()%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:

‍https://domain.com/products/test?preview_theme_id=XXXXXXXXX

‍

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:

‍https://domain.com/products/test?variant=1234567890&preview_theme_id=XXXXXXXXX

‍

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.

‍

3 links you can’t miss:

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.

‍