Home > BigCommerce > Docs > How to Integrate Progressive Web App (PWA) for BigCommerce?

How to Integrate Progressive Web App (PWA) for BigCommerce?

Last updated: August 01, 2024
Written and researched by experts at AvadaLearn more about our methodology

By Sam Nguyen

CEO Avada Commerce

Since the appearance of Progressive Web App on the worldwide market, it has yielded extended advantages to eCommerce businesses, including BigCommerce sites and stores. Whether your BigCommerce store is mid-sized or small-sized, the application of PWA in BigCommerce promises to deliver better experiences for customers.

It is a fact that mobile traffic tends to grow higher than desktop traffic. More and more business is implementing the integration of their eCommerce site in general and BigCommerce site in particular with PWA. So, don’t miss this cutting-edge technology to boost your online store.

Get started with our instruction on how to integrate Progressive Web App (PWA) in BigCommerce and you will be fond of it!

What is a Progressive Web App?

A progressive web app is a kind of app built with the most up-to-date technologies such as JavaScript, CSS, and HTML. However, it owns the functionality and the feel of an app. This is to say, a progressive web app represents a perfect combination of both mobile and web apps. In other words, it is much like a website that is built with the use of web technologies.

Progressive Web App

PWA is also built with cutting-edge APIs to provide enhanced capabilities, coupled with installability as well as reliability on all devices. Contemporary technology has turned any site into one PWA. The reason is that you can construct a Progressive Web App much quicker than building a native app.

How to integrate Progressive Web App in BigCommerce?

There are myriad benefits that you can get from this integration. So, it is a smart idea to install this PWA to your BigCommerce to offer a highly engaging experience for users. Follow us strictly with two different ways to integrate PWA in your BigCommerce site.

1. Use app JMango360 PWA which is available on Marketplace

Step 1: Penetrate Marketplace of BigCommerce Apps

The first and foremost thing in this integration process is to penetrate the Marketplace of BigCommerce Apps.

Penetrate Marketplace of BigCommerce Apps

Search for BigCommerce apps marketplace, you will be taken to its homepage where a lot of apps are available. And you can find JMango360 PWA here.

Find JMango360 PWA

Step 2: Install app JMango360

It is time to enable this installment. You can do it with your eyes shut. This means installing this app is easy and does not take much time. All you need to do is to get the app JMango360 PWA from the marketplace of BigCommerce Apps.

As there are a lot of apps here, you can search in the box for JMango260 PWA to save your time scrolling down. Then, click “Get this app”.

Get this app

Once you get the app, you will navigate to the app’s login screen. Here, you are supposed to choose the store in which your app will be set up. When you finish logging in, the page of app install is where you will reach out. As shown in the below image, select “Install” to keep processing.

Install app JMango360

As soon as you are done with the installation, you are about to go to one page which will outline what your app accesses. There, you could notice a check box, just select it and choose “Confirm”. This check box aims at acknowledging that the non-compliance or compliance of this app fully belongs to your responsibility. It assures that you accept to launch, indemnify, hold harmless, and prevent BigCommerce from liabilities involving the actual use of the app or for unknown or known vulnerabilities.

Choose Confirm

After confirming, keep going by clicking “Continue”, you have succeeded in setting up your PWA in BigCommerce.

Select Continue.

Step 3: Create an account for JMango360 and design your progressive web app

To sign up for an account, you are required to fill in necessary information related to your first name, last name, email address, business name (optional), and password. Next, choose “Sign Up” for creating the app’s account. In case, you have already owned an account for JMang360, the form of logging in shows up, then it lets you log in easily and quickly.

Sign up for an account

Congratulation! You have succeeded in setting up your PWA in BigCommerce. Now, you can begin designing your app by customizing it to your needs and purposes. Some of the suggestions are to create an appealing home screen, customize your icons, and design your background colors as you want.

Designing your app by customizing it

2. Use API account

Besides using the JMango360 app to integrate PWA in BigCommerce, the second way to perform this integration is to apply an API account. You can select the one that serves your specific needs.

Step 1: Create the API Token

To create this token, you need to go to the Control Panel of BigCommerce. Then, move to the section of “Advanced Settings”, choose “API Accounts”, and select “Create API Account”. In this section, you could notice “V2/V3 API Token”, click “Create”.

Go to the Control Panel of BigCommerce

Step 2: Specify the permissions and resources

Once you finished creating the token, it is time to enter the name for your integration or app, which is linked to your account. Next, navigate to OAuth Scopes; your task is to specify permissions and resources of the API.

To be more specific, this specification includes numerous fields such as content, checkout content, customers, customers login, settings & information, marketing, orders, order transactions, create payments, channel settings, channel listings, themes, products, and so on.

Specify the permissions and resources

The next step is to click “Save” for the above specifications or changes you have made. If you save successfully, the page tends to show up a pop-up by displaying your API credentials required for your OAuth access. In the meantime, it is also a must for you to download a file with form “.txt” prompted by the browser. This desires to maintain the credentials to keep your computer safe.

Click “Save” for the above specifications or changes you have made

Go forward with another step by logging into your account of JMango360 Back Office. Approach the “My Apps” section, go to “New App”, then choose “BigCommerce” before navigating to “Progressive Web App”. When your reach this point, you will create a draft PWA in BigCommerce.

Choose BigCommerce in "New App" section

Then, go to the settings of “BigCommerce Integration, copy your API credentials information and paste them into their corresponding fields. Select the section “Integrate with your BigCommerce store” as shown on the screen below.

Integrate PWA in BigCommerce

Step 3: Customize your PWA

Make some more attempts as you are almost done with this integration. Now, you can customize your PWA by selecting the content pages or categories for your PWA. Choose “Save Changes” when you complete your integration.

What are the benefits of PWA to BigCommerce?

Are you curious about the outstanding features and advantages that PWA has made to BigCommerce? It is obvious that Progressive Web App brings about magical benefits that are beyond your expectation; hence, keep reading to explore all of them and make no hesitation to install it to your BigCommerce.

1. Boost conversion

Conversion plays a key role in measuring if your marketing campaigns are effective or not. There is nothing quite like if you can boost the conversion naturally. Let us point out several examples of brands who get interrupted success since switching to the PWA.

PWA

They are Lancôme, AliExpress, and Alibaba are all excellent examples of progressive web app. These brands have witnessed a significant increase in conversion after they choose Progressive Web App. That is why PWA is raising the time amount that users are spending on their sites.

This is to say, PWA has assisted in uplifting the traffic for your BigCommerce sites with the increased time that users reach out to your online stores.

2. Be responsive to customers

With PWA, you can utilize the most efficient marketing channels. One of them entails pushing messages to appear on the lock screen of users. Therefore, it works better than emails in getting a higher rate of response.

3. Enable the fast checkout

With the latest technology, PWA comes with technical capabilities to make purchasing process be a breeze. It provides wonderful features such as one-tap checkout or storing users’ data to eliminate some repetitive information, including numbers of credit cards and addresses. As a result, customers can enjoy a painless and fast checkout by shortening some steps.

4. Strengthen SEO

PWA is used in some strategies related to SEO. Thus, it enhances the rankings as well as provides outstanding performance metrics in comparison with mobile-responsive sites.

5. Increase users’ engagement

You can discover a lot of advanced functionality, along with seamless feels in PWA. And, it is convenient for busy users who can process their orders wherever and whenever they are. Thanks to its convenience, users are more likely to spend much more time browsing your BigCommerce store.

Final words

In short, no one can deny the amazing advantages that a Progressive Web App makes for your BigCommerce site. If you are looking for an improvement in your customer service, this integration extremely matters. So, right now spend some time reading our guides on how to integrate Progressive Web App (PWA) in BigCommerce to reward yourself with growing revenue and success. Share this piece of article with those who are on the way to seek an app-like experience for your customers.


Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.

Stay in the know

Get special offers on the latest news from AVADA.