Build Shopify Front-end using React JS

Build Shopify Front-end in React JS

Shopify

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.

 

React JS

React Js is an open source JavaScript library from Facebook. Which is adapted by web developers all over the world and all the major websites are reconstructed with React JS. High Performance, easy to develop and quickly deploy to the code to production make React JS is the best solution for front-end development.

 

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

 

 

Screen Shot

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

If you have any queries regarding this please Contact US.

 

Leave a comment

Please note, comments must be approved before they are published