Shopify development, centered around its powerful templating language Shopify Liquid for storefronts, offers developers the chance to customize design elements and access store data to tailor the appearance and functionality of the stores. Additionally, the integration of third-party applications through features like the app embed block further enhances the capabilities of Shopify stores, allowing for seamless incorporation of additional features and functionalities. In this blog, we'll delve into the world of Shopify development, exploring the potential of Shopify Liquid, its limitations, and how we at ExpertGuru.ai have integrated and used a JS library like React together with Shopify technologies to create a stunning and powerful Personal Shopping Assistant.
What is a Shopify app?
A Shopify web app extends the existing functionality of Shopify. Most Shopify apps are built by third-party developers, not by Shopify.
You can build an app to add features to Shopify stores and extend the Shopify admin experience, or to create unique buying experiences for customers. You can also pull Shopify store data into your app, platform, or integration.
To tailor experiences to their specific needs, users install Shopify apps to help build their business, integrate with external services, and add features to their Shopify admin.
Hereʼs a simple illustration for you to understand where the apps sit within the Shopify ecosystem, straight from shopify.dev.
For more information on this topic, visit How apps fit into Shopify.
What are Shopifyʼs App Embed Blocks?
Ok great! I understand what Shopify apps are. What are App Embed Blocks though?
This simple illustration from the docs will help you get started on it; we are here for the rest.
The app embed block is a feature within Shopify's theme customization options that facilitates the integration of Shopify apps directly into the store's frontend. Merchants can easily add app functionality to various sections of their store, such as product pages, collection pages, or the homepage, by inserting an app embed block into the theme's layout.
Using the app embed block, merchants can seamlessly incorporate the features of third-party apps without extensive coding knowledge or modifying the theme's Liquid files. This allows for greater flexibility in enhancing the store's capabilities and improving the shopping experience for customers.
Overall, Shopify Liquid and the app embed block work together to empower merchants to create customized and feature-rich online stores that meet their specific needs and preferences.
What is Liquid and how is it used in the Shopify ecosystem?
As per the official website of Liquid,
Liquid is an open-source template language created by Shopify and written in Ruby. It is the backbone of Shopify themes and is used to load dynamic content on storefronts.
Shopify Liquid is the templating language used in Shopify themes, originally created by Tobias Lütke, one of Shopify's co-founders. It serves as the backbone for rendering dynamic content and design elements on Shopify online stores. Liquid is versatile and powerful, allowing developers to create custom layouts, access store data, and manipulate content to tailor the storefront's appearance and functionality.
Liquid, as the templating language of choice for Shopify, offers a robust set of features that empower developers to create highly customizable and dynamic online stores. Liquid files used in a Shopify theme are agnostic and have no concept of the store they are currently being used in.
Enough talk, show me how to get started you say. Let's get hands-on and dive straight into it!
Setting up a Shopify App using the Node and React template
Shopify provides the option of multiple templates for the apps with various tech stacks one can choose as per their preferences. We will be using Shopify App Template for Node today. Before we start, please go through the prerequisites and make sure you have these already set up:
- You've created a Partner account and a development store.
- You understand how apps fit into Shopify.
- You've installed Node.js 18 or higher.
- You've installed a Node.js package manager: either npm, Yarn 1.x, or pnpm.
- You've installed Git 2.28.0 or higher.
- You're using the latest version of Chrome or Firefox.
- Make sure you have a code editor of your choice installed in your machine. Here are some popular ones: Visual Studio Code, WebStorm by JetBrains, & Atom. We will be using VS Code.
Once you are done with the above list, then you are ready to create your first Shopify app.
⯆ Setting up the Shopify App Node template locally
1. Open VS Code and open a new terminal, type the following command into the terminal.
This will clone the repository into your local machine.
2. Switch into the directory and run the command to install all the npm dependencies.
Note: In case the app fails to run, you might have to install the “@shopify/cliˮ in your machine. In which case, run the following command (remove ‘-gʼ if you do not want to install it globally).
That's it, now your app is installed locally. But it is still not ready to run because it is not yet integrated with a Shopify development store.
3. Run the following command to start a local server for your app.
After you run this command, the CLI walks you through the following:
- Logging into your Shopify Partner account and, if needed, selecting a Partner organization.
- Linking your app to an existing app in the Partner Dashboard or creating a new app.
- Creating a new configuration file for your local development environment.
- Creating a tunnel between your local environment and the development store using Cloudflare.
To preview and install the app in your store, press “p” to get a preview of the app in the browser. When you are prompted to install the app, click “Install.”
Once you've successfully completed all the steps, you will be able to see a sample app running in the admin portal.
⯆ Setting up an App Embed Block
By default, there are no app embed blocks in the sample app. The following steps will help you generate one:
- We can set it up simply by running the following command in the terminal.
- You'll be greeted with a list of options to choose from. For the scope of this blog, we will select “Online store > Theme app extension” and hit “Enter.”
- Run the following command again to start the local server.
- To enable the extension and run it in your local app, click the link to enable your theme extension. After you have enabled it, you must set it up in the host theme of the store you are working with.
- To preview your theme extension, you can open the link “http://127.0.0.01:9292ˮ in your browser.
- Now, replace the code with the below snippet in the following location - “/extensions/sample-extension/blocks/stars_rating.liquidˮ.
- Save & reload the storefront and you should see something like the below screenshot.
Note: For further reference, you can go through the official docs - Getting started with theme app extensions (shopify.dev)
There you go! We have set up the app successfully, and generated and added a working app embed block in the development store.
What are the limitations of using Liquid?
Learning and utilizing Shopify Liquid presents challenges due to its limited functionality compared to traditional programming languages, a potentially steep learning curve for beginners and posing risks of security vulnerabilities if customizations are not carefully implemented. Moreover, understanding Liquid's syntax and constraints requires a learning curve, and complex logic or large datasets may impact performance. Development is tied to Shopify's platform, limiting portability, and version control can be challenging due to its limited capabilities. Debugging is complex with fewer tools and error messages available.
To solve some of these issues, we can use a React app and make it work in our app embed block with some clever and smart workarounds.
Using React in App Embed Block
What! Is it even possible? How can I use React to develop an app embed block?
This might be a bit of a surprise because Shopify is very strict about what you can and can't do inside the “/extensionsˮ folder, which includes the folder structure and file organization.
Let's quickly get set up with a basic React app using Vite, which is incidentally used by Shopify for their React Node template which we have been using all along in this blog.
- To quickly set up a new React app using Vite, pull up a new terminal and run the following commands one by one.
- This should set up and start running a React app in your local server at - http://localhost:5173/
- Navigate to “App.jsxˮ in the “my-react-appˮ directory and replace the code there with
- You should be able to see something like this one on the screen.
Before we need to proceed to our final steps, letʼs quickly recap what have we accomplished up until now.
- How to set up Shopify App Template for Node in our machine.
- How to set up an app embed block and configure it on our development store.
- Added a new React app which we will compile at build time in our “/extensions/stars_ratings.liquidˮ file.
- Now we need to add the configuration in the “vite.config.jsˮ file in the “my-react-appˮ directory, which will help in compiling the React code and adding it in the “/extensions/assetsˮ folder.
- Run the following command in the terminal at the location of “my-react-appˮ.
- If you observe the file explorer on the left, you'll see “bundle.jsˮ & “bundle.cssˮ have been added inside the “/extensions/assets.ˮ
- Voila! And we are done, just reload “http://127.0.0.1:9292/ˮ and you'll be able to see the fruits of our conquests.
Challenges with this approach
While our current discourse has provided valuable insights into leveraging the amalgamation of React and the Shopify development ecosystem for enhanced storefront functionality and utility, it's imperative to acknowledge certain challenges yet to be addressed.
Foremost among these is the absence of comprehensive coverage on other aspects such as styling, asset management (for e.g., images), and the implementation of developer-friendly features like Hot Module Reloading (HMR). These elements, pivotal for ensuring seamless user experiences and robust store management, demand meticulous attention and thorough exploration.
Rest assured, our commitment to excellence remains unwavering. We are fully dedicated to delving deeper into these technical intricacies in forthcoming discussions, where we shall unravel the complexities and present viable solutions.
Until our next encounter, let's continue our pursuit of excellence in crafting innovative solutions that elevate both user experiences and business efficiency.
