Introduction

Picksy

Picksy - React Gatsby Ecommerce Template

Demo: https://picksy.now.sh/

Picksy is a full featured modern headless eCommerce app powered by Shopify, Prismic & Gatsby. If you are here I guess by now you may have heard the term “Headless” or “Headless Shopify” when it comes to the next wave of bleeding edge eCommerce builds. Most of the popular eCommerce platform pushing it as “the next big thing”.

If you’re not fully up to speed on the definition of headless websites, in short it separates your frontend (i.e. the client side or the customer end) from the backend (i.e. the api the data end where we kept our products, orders etc).

What is Picksy

As the title suggests Picksy is a Gatsby powered headless shopify eCommerce app. In short, picksy is a Gatsby app which is the Frontend (i.e. the client side or the customer end as described above) of our headless shopify app.

Benefits of headless Shopify (Picksy)

As a member of Headless Shopify app built with Gatsby, Picksy comes to you as a ready made package of

  • Super Fast performance
  • Best Practices
  • Best SEO
  • Cheaper hosting cost
  • Cheaper shopify cost
  • PWA (Progressive Web App)
  • Modern User Interface
  • Bleeding edge technology developers prefer
  • Easy hosting solution compare to the traditional eCommerce app.
  • Say goodbye to your worries about security
  • Easily manageable by small to medium team
  • Deploy latest Code, Product, CMS changes using Continuous Integration

And much more. It's so flexible that you can easily change your content, design etc.

Technology we used

The main technology of our headless shopify app are Gatsby, Shopify & Prismic.

  1. Gatsby: Frontend or client side of the headless app.
  2. Shopify: Shopify provide us the backend where we add products, collection and handle our customer orders.
  3. Prismic: We have used Prismic as CMS to manage our content.
  4. Now: For hosting we have used Now (currently known as Vercel)

How Picksy Works

Picksy is a out of box headless shopify solution. So, what this means is you only care of your product in your store and picksy take care of your client side or customer end. So, whenever we make changes in our shopify product or Prismic CMS content we will want to have this changes in our live site without having to manually build and deploy the site each time there is a change. That's where Automatic Build with Webhooks comes into play. We will discuss about Automatic build with more details in the dedicated Automatic Build section.

Basically, Picksy works with below steps:-

  1. Setup Shopify store and add Product & Collection in your shopify store.
  2. Setup Prismic CMS add content in the Prismic CMS.
  3. Setup Picksy
  4. Setup Now (deployment)
  5. Setup Webhooks (for auto deployment)

Thats it, your Gatsby powered headless shopify eCommerce store is ready.

The setup part is discussed in details in the Installation section