"i only speak liquid" #32: Shopify Theme Editor Tricks & Tools

Hey all 👋!

Welcome to 'i_only_speak_liquid' by Storetasker, where active Shopify developers like me (Robert) share the learnings we face daily.

PS: I've been focusing my efforts on building my Shopify app called Orbe. I have also been a developer on Storetasker. Apply here if you want to join Storetasker's gated network of vetted Shopify developers.

What I’ve been thinking about:

Shopify theme development is an ever-evolving field, but sometimes, the simplest things can make a significant difference. While we often use JavaScript events and Liquid objects, not all of us dig deep into the toolbox. So today, let's talk about leveraging Shopify's built-in features to improve the Shopify Theme Editor experience, particularly when building custom sections for clients.

The Theme Editor generates specific JavaScript events for both sections and blocks. These events bubble up and can be quite handy. For instance, you've got events like shopify:section or shopify:block which can be useful in many scenarios.

Imagine you want to develop a popup section in a theme, where each popup is a block. If you're letting merchants customize these popups, you'd want to make sure the merchant sees the changes in real-time. That's where the shopify:block:select event comes in. You can use it to show the popup as they tweak it. A simple JavaScript snippet can make this happen:

This is just scratching the surface; you can do a lot more to enhance user experience in a clean, effective manner.

Oh, and let's not forget the Liquid objects like request.design_mode and request.visual_preview_mode. These are super helpful for modifying the behavior of JavaScript elements depending on whether you're in the Theme Editor or just previewing your work.

You can find all the events and objects here.

3 links you can’t miss:

• Theme file usage now tracked in the file section in admin. Now, files used in themes are now tracked in the files section of admin. This allows you to easily know when (and by which theme) a file is being used in online store.

• AI in the Help Center. Although Sidekick isn’t available for everyone yet, the revamped Shopify Help Center now has an AI chat feature. In my experience, it's pretty good at clearing up any confusions you might have.

• Change the primary market of your store. Starting October 1st, Shopify will allow merchants to set their primary market in any currency, regardless of their shop currency. Super useful and claimed feature!

One app I like:

Orbe

Orbe is a geolocation app that recommends the appropriate version of the store to customers based on their geo IP location and browser language, enhancing localized experiences. It’s super easy for developing geolocation setups for clients quicker with Orbe and its developer reference.

Some of their amazing features:

• Customize the entire welcome pop-ups within Shopify Theme Editor as an app embed to match your client's branding.

• Translate in multiple languages based on the user’s preferred language.

• It simplifies the process of switching between markets by intuitive country and language selectors.

• It supports precise attribution for marketing campaigns and even integrates with Klaviyo for localized email marketing.

Orbe is trusted by brands like Victoria Beckham, Timex, or Flying Tiger plus it’s granted by the “Built for Shopify” badge. For developers, Orbe's partner program offers:

• 20% commission on any upgrade.

• Priority support for you and your clients, making setups hassle-free.

• Tackle your clients' geolocation needs in minutes, not hours. Its unique Developer Docs allow you to implement fast, ready-made solutions while still charging your standard rate.

And if you join within the next 15 days and contact Orbe, saying that you come from this newsletter, you'll get a 40% commission on any 2023 referrals!

One learning as a freelancer:

Organization isn't just a buzzword—it's the bedrock of a successful freelance career and a balanced life. Let's cut to the chase; here are some game-changing tools that help me stay on point:

• ClickUp: If you’re tired of jumping between project management apps, give ClickUp a whirl. What sets it apart is its customization. I organize my workflow by client folders and task lists, but the Workload view on their premium plan is the real gem. It’s like having a project manager in your pocket.

• Loom: Skip the endless client meetings and send quick video updates or demos instead. It's a game-changer for showing clients how to test new developments.

• Tango: Think of it as Loom for written and image-based tutorials. Just hit 'record' on the Chrome extension, walk through the steps, and voilà! You’ve created an easily-shareable guide in minutes.

• Toggl: It integrates flawlessly with ClickUp and helps me ensure I’m not overshooting client hours. Plus, the quarterly reports are a treasure trove of insights into where my time actually goes.

You might be familiar with some of these, but I'd consider it a win even if you pick up just one new tool from this list. Got a go-to tool you swear by? I'd love to hear about it.

I hope you enjoy my last issue!

Stay in touch,

Roberto
Linkedin
Twitter