DEV Community

Cover image for Things that you should Know before building the first Shopify Application
Zobi Web Solutions Private Limited
Zobi Web Solutions Private Limited

Posted on

Things that you should Know before building the first Shopify Application

Shopify is a well-documented platform to create eCommerce applications with an application program interface and ecosystem for more than 1500 applications to choose from them. But before starting to build a Shopify web application you should aware of some important points of Shopify development.

When we are going to start working on our application Application Program Interface (API) does not always best suit the task of the application. Most of the developers might be explored Shopify as a platform to develop an eCommerce Apps are also confused from where to start, for those people we are putting here the things those keep in mind before developing an application in Shopify.

Shopify Web Applications have three user-facing component

APP Admin for the merchent

1. Shopify Polaris

The user interface of the application is built in Shopify Polaris. The Polaris supports typescripts. The extensive library components are available in the Polaris. For easily building Shopify application, Polaris includes all of the general and common components. There's a tabular display-oriented to displaying similar objects collections like products and customer lists. Each and every component provides great benefits and helps to understand the right language and text for use.

2. Styling Components

Polaris components come with a huge prop list for styling components. Some time only these things are not enough but you should use more control using the CSS. Polaris does not support any of the components for styling. It means that it has a bunch of wrapped components for custom styling and designing.

Use Polaris to built simple blocks for your Application is suggested. With the use of this, you can save your lots of time and you have not to write basic components and application integrates right in the Shopify design.

Injected Scripts

Shopify allows you to the integration with the section of the storefront by direct injecting a script tag in the store. The script tags do not set to the checkout pages for security reasons. The script tags linked with each store. Window.Shopify object with some basic information about shop including open myShopify domain when the injected script loads. This is used to get configuration from the API and initialize it with a static script.

1. Track of Carts

Recovery of the dumped cart is one of the important part of a product. For this recovery, you have to take the cart status as the navigate through the store. Every user gets the 32 bits unique cart-id at the time of land on the store. This cart-id helps you to track customers on the Shopify store. The cart-id is not constant across the page visits until the item added into the cart.

2. Automatically Applied Discounts

The Shopify splits the concepts of the cart and the checkout. The code of discount is applied to the only checkout. There is not run any of the script tags on the checkout page for the security purpose, you can not run a script directly on the checkout page to apply discount code. It's possible to create sharable links for the discount codes and after then redirect again to the shopper to the link. Like this, during checkout, the discount code will be applied automatically.

Backend API

At the time when the application is installed, it asks you to access the APIs depending on the app that you are developing. When choosing with the scopes to access, considers all possible features and use cases as well.

1. API Access Scops

At the time of starting a Shopify that only allows one app URL which could be a new install for the application or an existing customer. This needs to be made at the end with a database query. This limitation is a result of 0auth, which is used by Shopify for authentication.

2. Shop Identifier

Shopify does not use the numerical unique ID as a shop identifications. Every shop has own subdomain on This subdomain set at once when the store is created and it's not changed after created. Shopify uses it as a unique id in the database.

3. Cart Permalinks

As an abandoned cart recovery process, Shopify redirects customers to the checkout page with the same content they had previously. It's possible to create cart permalinks in Shopify development, but it's hidden on unrelated pages in Shopify.

4. Recurring Charge Updates

Shopify has an issue when you added recurring billing to the application. Shopify does not have any of the webhooks for the payment status. To get the status of active recurring charges Shopify is pulling the billing API at planned intervals is the only way to identify the recurring charges.

5. WebHooks

Webhooks offers a great way to plug in the events that happen in the Shopify stores. We are able to know from the webhooks that a shop uninstalled application so stop the entries into the databases. When the store owner again installs an application then it's necessary to trigger again the needed steps. The shop update webhooks inform the shop details on an email that is used and helps to keep in touch with the store-owner.


Shopify's platform offers you to provides value to shoppers and merchants quickly alike. Every Shopify developer who works for a Shopify Development Agency has to be aware of these. For someone who has been worked with custom billing and authentication in the past, they got the same result with Shopify application.

Top comments (0)