Build Shopify Front-end using React JS
Shopify is a Ecommerce SAAS platform where we can set up a fully functional Ecommerce in a couple of hours. Shopify robust and secure online store platform. Using Shopify Apps we are able to provide additional features and functionality to Shopify. All the above points make Shopify a perfect solution for Small business to Largest Enterprise.
Shopify Theme and Liquid
Shopify stores are self manager, they have a free and paid theme in Shopify Theme store for the best user experience, for customizing the design Shopify using frame-work call liquid in Shopify Themes. Which was based on Ruby on Rails
Shopify Store in React JS
Since React JS is booming fast and a lot of websites are moving to React JS, Shopify needs to provide an option to integrate React JS to their store. Since Shopify uses the liquid and a lot of Shopify developers use this framework they can’t move directly form liquid and go to React JS, but Shopify also knows the power of React JS since Shopify dashboard was created using React JS and Shopify provide an admin framework Polaris in React JS.
So Shopify provides a new way to integrate React JS to their Shopify store using Shopify Storefront API. Using the Shopify Storefront and JS buy SDK we are able to use the React JS for Shopify store front.
Required for Development:
Please make sure you have the below requirements for develop the React JS App
Create a Private App in Shopify:
You need to create a private app in Shopif. It will give you the Storefront API which we are going to use in out React JS App to get the Product and other detail from Shopify to React jS
- Go to Shopify Dashboard > Apps.
- Click Manage private apps.
- Click Create a new private app.
- In the App details section, enter a name for your private app and a contact email address. Shopify uses the email address to contact the developer if there is an issue with the private app, such as when an API change might break it
- Select Allow this app to access your storefront data using the Storefront API
- Copy Storefront access token
Install React JS Storefront App:
Clone the Shopify Storefront API Examples
git clone https://github.com/Shopify/storefront-api-examples.git
- Go to the storefront-api-examples/react-js-buy-sdk folder
- Enter yarn install
- Enter yarn start
- Open src/index.js and update the domain and storefrontAccessToken
Go to http://localhost:3000/ you can able to see similar like below Screenshot
you can change the React JS code and check how it is affecting the store front. Now you have integrated the Shopify store with the React JS. Shopify also provide lot of other example code for other front-end library like
- Angular with Graphql
- Ember JS with Apollo
- Ember JS with Graphql
- Ember JS with buy API
- Node JS with Graphql
- Node JS with buy API
- React JS with Apollo
- React JS with Graphql
- React JS with Hooks and Apollo
- React JS with Hooks and Redux and buy API