Shopify recently introduced that they will be adding a feature where Shopify apps can finally and easily import liquid files to Shopify stores without writing a bunch of long codes.

The feature is called App Snippets.

Note that app snippets are still on beta and is only available for Shopify development stores with a developer preview store enabled and is using the online store design experience.

What is App Snippet?

According to Shopify, App snippets are Liquid code that can be included in other Liquid files.

Now you might be asking…

Isn’t it just the same when you use the Theme API?

Yes, you’re absolutely correct. However, the difference is that when you use App Snippets instead of Theme API, Shopify store owners won’t finally need to remove liquid files in Shopify themes.

It’s a relief not just for the developers but also for the online store owners.

But… You will still have to insert one line of code to render your liquid files in their theme. Yep. But that’s better than writing a long code.

How To Create App Snippets

In this guide, we’ll take a look at how to create app snippets in Shopify using PHP. We’ll also create a liquid file that we’ll render in our development store.

If you’re new to Shopify app development, we suggest reading our complete guide on how to develop Shopify apps using PHP or Laravel.

Let’s start by creating the snippets.

Log in to your Shopify Partners account, go to the apps page, and select your app.

Then select Extensions.

We need to access the Online Store tab and so if you don’t have it beside the Shopify admin tab, then click the Manage extension areas.

In the Manage extension areas, scroll down and look for the Online Store section. On its right, click the Enable extension area.

Then, go back to extensions page and you should find the Online Store tab.

Scroll down and look for App Snippets. Then click Add Snippet.

In the Create snippet page, enter a snippet title.

Notice that it ask us to drop a liquid file.

We’ll have to upload a liquid file and this is the liquid file that the app will be importing to Shopify stores. So for the sake of making this guide as simple as possible, we’ll create a very short liquid file that only displays an HTML.

Creating a Liquid File

Open your text editor and save the following code as snippet_test.liquid

<div>
<h1>This is an example Snippet</h1>
</div>
Code language: HTML, XML (xml)

Once you have created the file, upload the file to the create snippet page.

Underneath the form, you should see a code snippet that looks like this.

{% render 'shopify://apps/example-app/snippets/example-snippet/<id>' %}
Code language: HTML, XML (xml)

This code is what you will be using to import the file into Shopify stores.

Now, save the snippet.

Using the App Snippet

For us to be able to use this app snippet, we’ll have to create a development store with a Developer preview enabled.

Once again, this feature is still in beta and will not work on online stores.

To create a development store, navigate to your Store pages and click the Add Store button.

For store type, select Development store.

Fill out the form and right on the Developer preview section, tick the checkbox to enable the Developer preview. This should give you a dropdown to select Online store design experience.

Hit save.

Navigate back to your Store page and log in to your development store with Online store design experience enabled.

Once you’re logged in, install the app (with the snippet applied/enabled) into your development store.

Testing the Snippet

There are two ways to test if your snippets are working.

The first one is by using the Theme API.

Obviously, using Theme API is your only way to push your code to Shopify store’s theme files but since snippets are still on beta. You can test your snippet by just going to your theme files.

That’s the second way of testing your snippets. It’s by editing your liquid files and adding the snippet code into your theme.

Let’s try that.

Under the Sales Channels, select Online Store and navigate to your themes page.

In your Theme library, select the theme that the store is currently using then select Action and click on Edit Code.

Then, look for the theme.liquid and paste the snippet code right at the top of the script like below, for example:

If you save the script and check your store, you should be able to see that the snippet is working like below.

Awesome! Now you can start customizing your snippet codes and update it directly with Shopify.

Removing App Snippets on Uninstallation

With app snippets, you don’t really need to worry about the removal of your scripts from Shopify stores. App snippets will do it all for you.

But like we said in the beginning, the snippet code that we added to the theme.liquid, it will stay until the store owner removes it themselves. So it’s better to always add a note/comment that the snippet code came from your app and they should remove it once they uninstall your application.

But hey! App snippets are still on beta so who knows? Maybe Shopify will provide a way to make it happen.

Conclusion

Shopify app development has been there since the very beginning and Shopify always provide updates not just to their API but to the entire software. Now that they’re working on App snippets, Shopify developers will probably start using webhooks and other API less.