As a software developer, I often hear that No-Code is the future of app development. That in a few years, automatically generated code will replace all the frameworks that we currently have. With my young experience in this field I’m quite sceptical, because I still believe that to truly answer a problem or a need you will always need something that can embrace it completely.
However, I was quite amazed by my last and first experience using one of the major tools in the No-Code business: Shopify.
Shopify became in the last few years the reference for online stores, and is now powering more than 18% of all eCommerce stores (according to BuiltWith). Their success can mostly be explained by the convenience of their product: by only using the platform, you can build a highly customized store, ready to use, in only 2 hours.
However, if you have very specific needs regarding your online store, you will quickly need a developer to be able to deep dive into Shopify’s technical documentation. Therefore, I decided to write this article to summarize the different things that I learnt using Shopify as a developer, and how I used them in my project.
Here are the different topics that will be covered:
- Front framework: Liquid
- Embed a React App inside Liquid’s engine
- Shopify’s API - Usage and Limitation
- Development Workflow: Automatize your deployment with CircleCI, Github and ThemeKit
Front framework: Liquid
Even though Shopify has the specificity to be used as a headless ecommerce solution (using their API), the native behavior of Shopify is to use their embedded front system (Wordpress-like).
And for our project, we decided to stick with the classic front system as it allowed us to have an instant-ready website, giving the possibility to our client to test different configurations.
So, we had to deal with their own programming language: Liquid.
Liquid is an open-source template language written in Ruby. As many template languages (like Jinja (Python) or Twig (PHP)), it makes a bridge between data and HTML, in which you can add logic (if, while loops…). In Shopify’s usage of Liquid, the data is the different entities related to your store (products, cart, collections…).
Before launching yourself into any Shopify development, I highly recommend you to read this introduction to the Liquid language, written by Keir Whitaker, a former Shopify Partner. It describes in an exhaustive way how Liquid is built and how Shopify use it for their front framework.
It also mentions one of the main downsides that we encountered during our project: Liquid doesn’t have any concept of state, which can really be a pain point if you are willing to make your website a little bit interactive, by creating a real user experience. In our case, we wanted to create an interactive quiz, in which our users could answer a few questions about themselves, and push to them the best matching products.
In order to develop our feature inside Shopify’s front engine, we decided to use React’s framework, embedded inside a liquid template.
Embed a React App inside Liquid's engine
Our challenge here was to be able to use the ease of front development with React without creating a separated hosted webapp. Our idea was to develop the React App in the same repository, and then build the static files (as for production) and add them to the assets of a Shopify theme.
Here was our deployment script:
#!/bin/bash
APP_BUILD_FILE=build/index.html
THEME_FILE=theme_live/sections/quiz.liquid
echo 'Adapting html file for shopify asset urls'
sed -E 's/(<script src=")\/static\/js\/([a-zA-Z0-9._-]*)("><\/script>)/\1{{'"'"'\2'"'"' | asset_url }}\3/g' $APP_BUILD_FILE > $THEME_FILE
echo 'Replacing built javascript files in theme'
rm -f theme_live/assets/quiz*
cp build/static/js/* theme_live/assets/
Once a React App is built, the entry file is the index.html that contains all the script tags pointing to the js files of your app, divided in different chunks.
The first command of our script catches all the script tags contained in the index.html file and then replaces them by a liquid syntax.
From:
<div id="root"></div>
<script src="/static/js/quiz_runtime-main.8923d629.js"></script>
<script src="/static/js/quiz_2.20b50bf0.chunk.js"></script>
<script src="/static/js/quiz_main.f9693573.chunk.js"></script>
We now have:
<div id="root"></div>
<script src="{{'quiz_runtime-main.8923d629.js' | asset_url }}"></script>
<script src="{{'quiz_2.b689c532.chunk.js' | asset_url }}"></script>
<script src="{{'quiz_main.d6725a08.chunk.js' | asset_url }}"></script>
The second command then removes the previous react JS files and replaces them with the new assets, in our quiz section.
However, this creates a separate app that can’t interact with the liquid framework. Therefore, we needed to analyze how we could retrieve data from our Shopify store and display it to the user. Hopefully, Shopify has a great API, which allows you to interact with a lot of different elements of your stores.
Shopify's API - Usage and Limitation
This is where Shopify becomes very interesting. As said before, using the built-in Liquid framework allows you to create a ready-to-use store in only 2 hours. However, you’ll sometimes find yourself in need to interact with your store data outside of your storefront, or maybe you want to only use Shopify as a backend, and make a completely custom frontend ,using gatsby or NextJS.
This gives you the possibility to move from a Liquid frontend to a much more customizable interface, by using Shopify’s back API.
Shopify has 2 APIs available:
- The Admin API (GraphQL and REST)
- The Storefront API (GraphQL only)
Shopify’s Admin API
The Admin API is the main API that allows you to interact with ALL the elements of your store. You can use it to follow your orders, products, payments… Well, pretty much everything. This API is mainly used by shopify’s app developers, to extend the behavior of the basic Shopify back office.
In my case, I used it to create our product recommendation algorithm. As said before, our challenge was to create a quiz in order to advise our customers on a very specific market. We wanted to know:
- The characteristics of the products they were looking for
- Their family composition
- What type of products they were looking for
Once the answers were given, our app then called the Admin API, in order to retrieve the best matching products. However, this is where I discovered the API’s rate limitations. Indeed, our main goal was to consider all the selected product categories by our user (that could go up to 15 categories - the aim of our quiz was to create big buckets of products), and to propose in each category the best product.
We went for the GraphQL API because it allowed us to:
- Make a single call with different product categories
- Get only the data that we needed
However, GraphQL’s API usage is limited by the cost of your query. This means that you cannot make a huge query in order to retrieve all your data at once. With classic Shopify, your query can have a maximum cost of 1000.
As we didn’t have a lot of products per category, we limited the number of products per category to retrieve per 20, and limited to the maximum the data that we wanted to retrieve:
productType1: products(first: 20, query: "product_type:'productType1'") {
edges {
node {
id
productType
tags
priceRangeV2 {
minVariantPrice {
amount
}
}
}
}
}
productType2: products(first: 20, query: "product_type:'productType2'") {
edges {
node {
id
productType
tags
priceRangeV2 {
minVariantPrice {
amount
}
}
}
}
}
Once we retrieved the best matching products, we then sent back only the selected productIds, to give the possibility to our front to call the storefront API.
Shopify’s Storefront API
Storefront’s API is a way to expose your store’s data to external apps (public or private), unauthenticated. The perfect usage of this API is when you want to use Shopify only as a merchant platform, and create your custom front platform (Shopify as a headless ecommerce solution).
It is important to remember that it’s an unauthenticated API, meaning that once the Storefront’s API is enabled, everybody can access the data that you exposed. However, you can control the data that you expose (you can only display the product details for example).
We used the storefront API for our store directly in our React App, in order to display the different products, and call the checkout to add the different items to the user’s cart. We got inspired from the different adaptation of the buy-sdk adapters that you can find on Shopify’s Github.
Development Workflow: Automatize your deployment with CircleCI, Github and ThemeKit
Last but not least, I will present the development workflow that we set up on our project.
Shopify has developed a command-line tool called Theme Kit, enabling you to interact with your shopify store and deploy code instantly.
Once Theme Kit is installed on your computer/server, you need to configure it inside your app folder, following this tutorial.
Theme Kit allows you to (in particular):
- Preview your code as you code it on your shopify store theme using the
theme watchcommand - Deploy code to one of your shop theme using
theme deploy --env=developmentor any other name that you would have defined in yourconfig.ymlfile.
development:
password: ${SHOPIFY_PASSWORD}
theme_id: ${SHOPIFY_DEV_THEME_ID}
store: store-name.myshopify.com
timeout: 1m0s
production:
password: ${SHOPIFY_PASSWORD}
theme_id: ${SHOPIFY_THEME_ID}
store: store-name.myshopify.com
timeout: 1m0s
Each developer had their own development theme (you can have up to 20 themes on one shopify store), and their was one “live theme” which was the production theme.
The different useful variables were stored in a variables file, that Shopify’s engine can interpolate. For further information, you can check Theme Kit configuration documentation.
Here was our developer workflow:
- Get the latest code from the master branch using git
- Push my code to my Shopify development theme using
theme deploy --env=development - Make modification while using
theme watch(so that you could see directly the changes on your Shopify theme) - Push your code, review it on github
- Merge on master.
- Once the code was merged, we had a CI/CD script that:
- Built the React App and moved the built files into the assets of our shopify theme
- Deploy the code to Shopify using Theme Kit
The last step was done using the following script in your CI:
echo 'Deploying runinng cd theme_live && theme deploy --allow-live'
cd theme_live && theme deploy --allow-live --env=production
The Shopify production Theme ID and user credentials were injected inside our CI configuration, to be able to deploy to the production environnement.
Conclusion
As you can see, on top of being a very easy-to-use product for non-tech people, Shopify is also a real state-of-art product. They thought of a simple workflow to automate your deployment, you can easily access your store using a highly documented API.
They created a real game changer when it comes to build an ecommerce website: you can start with a prototype using the classic Liquid templating product, then if you want to fully customize your storefront, you can change to a headless CMS version of Shopify using their API, and then you can even scale up by using their premium version Shopify Plus, allowing to manage different stores in different country.
And one thing that is important to notice: once your store is created, it’s already usable. Shopify has their own secured payment platform, PIM management, and many other features that are required in every ecommerce store, which you don’t need to develop anymore. And icing on the cake, by using Liquid’s framework, your SEO will be optimized and fully manageable from your store.
I highly recommend each developer to take the time (with Shopify’s 14 days trial) to build their own Shopify store, as it’s a great skill to have in a world where the shopping experience is becoming more and more digitized.
