Debugging app issues in Shopify themes

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 {{ content_for_header }} 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!