"i only speak liquid" #16: Offline Apps on Shopify 🛌

Written by Tony Gonzalez 🚴

Hey all 👋!

Welcome to 'i_only_speak_liquid' by Storetasker, where active Shopify developers like me (Tony) share learnings we face daily. This is my final edition of 4. We’re rotating out to another developer for the next newsletter. Hope you enjoy my last piece!

PS: I'm an expert on Storetasker: It’s a gated network of vetted Shopify developers. Apply here if you want in.

What I’ve been thinking about:

Oftentimes, I get the request to create a Shopify app that performs a background job.

For this, we can use an offline app. The problem is Shopify’s offline app documentation is very outdated, so; basically, there is no documentation about creating offline apps in 2023.

Here, I will show how to switch an online node.js Shopify app (default) to offline.

Step 1:

Create your Shopify node.js app using Shopify CLI in the command line.

Step 2:

Inside the app's root directory, find the .env file and fill the SHOP variable with the myshopify.com URL of the store you want to connect the app to.

Step 3: 

In the app's root directory, find the index.js file inside the server folder and open it with your favorite code editor.

Inside the index.js file, create the following endpoint

Also, find the USE_ONLINE_TOKENS constant and set it to false.

Step 4: 

In the root directory of the app, find the Homepage.jsx file inside the src/components/ folder and add the following button and function inside the <Page> component

Step 5: 

In the command line, serve the app using the following code: 

Once the app is served, create an installation link in your partner apps dashboard, install it and open it.

Once you open the app, click the button you created in step four.

Step 6: 

In the command line where you performed the command shopify app serve, you will see an object with the following form:

Copy that object, we are using it in the next step.

Step 7: 

Above the constant USE_ONLINE_TOKENS insert the following constant

And voila! Every time you need to perform a background job using your Shopify app, just call the offline_session constant instead of creating a session on the fly.

I.e., fetch the first 250 products in Shopify,

3 links you can’t miss:

  • Shopify Polaris for VS Code -Official VS Code extension to work with the Polaris design system. Very useful when you are creating Shopify apps.

One app I like:

This Shopify to Google Analytics 4 app allows you to view your entire conversion funnel in GA4. This app adds all conversion and product data formatted to the new Google Analytics 4 standard. No more missed events or incorrectly formatted product information. You can complete your GA4 migration in minutes, not days. It includes the following GA4 events: purchase add_to_cart add_payment_info add_shipping_info begin_checkout remove_from_cart view_cart view_item view_item_list refunds

One learning as a freelancer:

Recently, I had an issue with my communication cadence with a client. That made me reflect about how important communication is as a freelancer.

Proper communication is essential for any freelancer to be successful. It is important to establish clear communication with clients to ensure that expectations are met and that projects are completed on time and to the highest quality. Good communication also helps to build trust and rapport with clients, which can lead to repeat business and referrals. Additionally, proper communication can help to avoid misunderstandings and disputes, which can be costly and time-consuming.

If you want to improve your communication style with your client, keep in mind the following tips:

1. Be Professional: Always maintain a professional attitude and demeanor when communicating with clients. This includes using proper grammar and spelling, being polite and courteous, and responding to messages in a timely manner.

2. Be Clear: Make sure that your messages are clear and concise. Avoid using jargon or technical terms that the client may not understand.

3. Be Responsive: Respond to client messages promptly and keep them updated on the progress of their project.

4. Be Transparent: Be honest and open with clients about any issues or delays that may arise.

5. Listen: Listen to the client’s needs and concerns and be willing to make changes or adjustments as needed.

6. Set Expectations: Set clear expectations for the project timeline, deliverables, and payment terms.

7. Follow Up: Follow up with clients after the project is complete to ensure that they are satisfied with the results.

That's it from me! Next writer is up next. Stay in touch via Linkedin!Â