Theme Kit updated with checksums
This CLI for downloading and deployment of Shopify assets is well known for all Shopify devs. A time ago, Theme Kit was working by simply replacing all files on the server, without comparing files from the local machine with files on the server. This behavior has been improved by adding checksums. Basically, each file you deploy will have its own generated checksum value.
It brought us a faster way of downloading and deploying. And finally, we can control what has been deployed on the Shopify theme code and what hasn’t.
Speed score tool
This is what I have been looking for while working for 3 years as a Shopify developer. I was constantly struggling with SEO agencies, who were sending default SEO recommendations without knowing Shopify nuances.
They say: “We need custom URL for collections, products, and we need 100% optimization according to the Google Page Speed”, “What do you mean by saying you can not provide 100%? Why is optimization value somehow connected to app quantity installed?”.
My answer was “I can optimize a lot on the Shopify store, but there are some areas, which are restricted to access, like apps assets, or even in what way apps are built”.
This fall we have got an official tool from Shopify, which scores store performance.
Where you can see your Speed score
Click Online store->View Report.
How the score is calculated
As the manual says “Score is based on a weighted average of the Lighthouse performance scores for your store’s home page, your product page with the most traffic over the last 7 days, and your collection page with the most traffic over the last 7 days. Weights are based on multiple factors, including the relative traffic to each of these page types across all Shopify stores.”.
Another thing is that this score is a result of comparison with other Shopify stores that were run using the same Shopify environment. If you test your store from your local Chrome Lighthouse dev tools, you will have different values simply because your connection speed or browser extensions affect your test.
Things we can’t control:
- Shopify infrastructure like CDN, server caching, settings, etc. But generally, they are pretty snappy.
- Shopify apps code and behavior.
Things we can control:
- Theme liquid code efficiency.
- Theme assets like scripts, styles, images.
I hope you already know the ways to make images weight lighter, how to minify JS and CSS files so I will not explain the optimization of those things because we have something more interesting.
It is time to optimize Liquid. Install Shopify Theme Inspector for Chrome extension.
Make sure that you have access to the Shopify store you want to test.
Shopify Subscription APIs
The subscription-based model has been extremely popular in small and medium e-commerce business. In the Shopify world, this niche has been occupied with 2 major apps: ReCharge and Bold Subscriptions. The simplified basic principle for example of the ReCharge app is: creating product copies, which were added to the recurring automated orders, according to the subscription settings were made. The initial purchase was made inside of a custom-made Checkout, not the Shopify original one. Now the game has changed, and Shopify rolled out official APIs to make our own subscription service.
This feature has been built upon several pillars:
The Selling Plan API
https://shopify.dev/docs/admin-api/graphql/reference/object/sellingplan
This API will be available in the API version 2021-01 version. As the documentation says, this API “enables you to extend Shopify’s merchandising model to support new ways of selling a variant, other than Shopify’s historical default: “buy now”.”
The Subscription Contract API
https://shopify.dev/docs/admin-api/graphql/reference/object/subscriptioncontract
This API will be available in the API version 2021-01 version. API handles such ideas as contracts. After a customer purchases a subscription product at checkout, Shopify generates a subscription contract and shares it with your application using a webhook.
The Customer Payment Method API
https://shopify.dev/docs/admin-api/graphql/reference/object/customerpaymentmethod
This API will be available in the API version 2021-01 version as well. Represents stored payment methods that can be used to pay for future orders without requiring the customer to manually go through checkout.
Product subscription app extension
At this point, Shopify introduces Argo, an app extension framework, that allows apps to integrate directly into the Shopify admin, mobile apps, checkout, or POS. It consists of a set of UI components and development tools.
We can use JavaScript, React, or TypeScript to define an app’s behavior and describe the user interface.
The overall principle of Argo and Subscription app extensions is simple. We will be able to render custom UI elements on the Product pages, Admin area, and even POS terminals to build the complete experience.
Check out the list of available JS components to use: https://github.com/Shopify/argo-admin-template/tree/master/docs/Components.
Useful links: Shopify subscriptions overview, Product subscription app extension overview. If you want to know more about how to start, go to https://shopify.dev/tutorials/getting-started-product-subscription-extension doc, but take notice that this set of APIs is in the Beta period adoption.
