"i only speak liquid" #41: Debugging app issues in Shopify themes

Hey all 👋!

Welcome to my 1st ever edition of 'i_only_speak_liquid'. I’m Joe, an expert on Storetasker & a front-end developer. I have worked within Shopify’s Plus Support team, agencies, and as a freelancer for a good few years. I’m looking forward to sharing some of my findings with you lovely lot!

What I’ve been thinking about:

Apps are an essential part of the Shopify ecosystem, but they can occasionally throw up unexpected behaviour in your theme, and they’re often hard to pin down as the culprit for any issues you might be facing, whether it’s a broken add to cart or just a visual bug you can’t quite figure out. Disabling each app embed within the theme editor can sometimes bring you joy, but app developers aren’t always as transparent about their integrations and it can lead you down a confusing path.

This was an issue facing us within Shopify’s support team daily as merchants implemented apps over the top of complex themes, resulting in knock-on effects that could have a huge impact on the merchant’s sales and customer trust. Thankfully, the team found a solution for most scenarios (full credit to the Plus Front End team for the snippet of code!).

Essentially this bit of Liquid deconstructs the content_for_header tag which contains the app scripts for your store, and removes any URLs you don’t want based on an index. Starting with 0 as your urls_to_remove variable will log all the app URLs into your console and remove them all from content_for_header, essentially disabling these apps from running. From here, you can narrow it down to the apps you suspect might be causing the problem, until you find the offending URL. You can grab the code here, just add it above the tag within your theme.liquid file.

Word of warning: make sure this code isn’t included in any published themes, editing content_for_header isn’t supported by Shopify in any way and could have some unintended consequences, this is purely an investigative tool meant for testing themes only.

3 links you can’t miss:

SVGOMG - a GUI editor for SVGs which I use almost daily to help clean up SVG code

Liquid Weekly podcast - Managing Product Data - I thought this was a great chat which is food for thought on how data such as metafields and metaobjects should be managed to make data as flexible as possible for your clients in the future

Bulk Product Editor - piggybacking off the last recommendation, Ablestar apps are really solid and their editor app is a really effective time-saver, it’s a perfect example of app developers picking up where Shopify are lagging behind in certain areas, data management being a key one

1 app I like:

HouseParty - It’s nice to see app developers trying something new rather than rehashing the same old ideas:

This app allows you to add an embedded customer forum to a store, which fosters a sense of community with customers and creates more brand loyalty in a way that feels genuine and useful.

It works using Shopify’s customer records, so you’re not introducing another layer of account registration or management, which is ideal to keep things simple. The app itself is very nicely designed and works great from my testing!

One learning as a freelancer:

Coming from a background of working in agencies, it can be overwhelming to be expected to handle all aspects of a piece of work, from conception to project management to the actual development, but I’ve found the greatest weapon we hold as freelancers is setting clear boundaries with a client. When putting together the quote for a project, make sure your scope is water-tight and it’s clear, step by step, what you’ll be doing as part of the agreed project and what you’re expecting from your client. This could be adding a numbered list of the steps you’ll carry out within the quote, being verbose about things at this stage is key to ensuring everyone’s on the same page.

Providing this information not only helps you should the client begin to scope-creep (it happens to us all), but it also leaves the merchant clear on what to expect from you. This can massively reduce the anxiety that comes with handling a project solo, and if you’re ever feeling out of your depth, you have something to refer back to that outlines where you need to focus your attention next.

Cheers,

Joe