What to Use When Building a Custom Shopify Store

Iskandar Kurbanov
4 min readDec 30, 2020

--

Quick warning before you read this blog post. It does not contain any code alongs and it’s not a step by step guide.

There are a few options for building a custom Shopify storefront right now. In this blog post I will try my best to briefly cover all of them. This is a topic that I have spent a lot of time researching but I have not used all of these methods so I can’t comment on all of their features.

Without further ado, let’s get into it.

Building a custom theme using Liquid

This is the most basic method but not easiest for those coming from a non-Shopify background. This method will require you to know the Shopify theme structure and the Liquid templating language. With this method you will need to use ThemeKit which is the way to connect your local development environment to the Shopify theme platform. From there you will be able to view your theme within the Shopify dashboard and use the customizer to edit the website.

As a starting point you can either the “theme new” command in ThemeKit, Slate (which Shopify no longer supports), or work off a free theme such as Debut (which many agencies do).

Headless Shopify storefront using React

This is where it all gets crazy. The options are plenty. Using the Shopify JavaScript Buy SDK you can pretty much pull data from Shopify with anything you want.

1. Gatsby

Gatsby is a technically a Static Site Generator (SSG). But in reality is it a bit more than that. There is a whole ecosystem of plugins that you can use to help your development. Being a SSG, it is very quick and responsive. As we know speed is very important in e-commerce, so this is a good option.

2. Next.js

Next.js is quickly becoming my favorite framework to use. In my opinion it is better than Gatsby and provides a lot more features and freedom for your development. Next.js is capable of both Static Site Generation (SSG)as well as Server Side Rendering (SSR). So it is very versatile and everything is just very well thought out. They also recently introduced Hybrid rendering which features a mix of SSG and SSR. Using the Next.js framework you are also able to easily and quickly deploy to Vercel (the parent company of Next.js). Vercel is similar to Netlify in that it allows for seamless deployment. It quickly deploys whatever you push to your github repo.

What I am particularly excited about with Next.js is their Serverless application capability. Which basically allows you to build a Full-Stack application without a server! What that means is no server costs and potentially quicker response times. I am completely blown away by the Next.js team. If you are interested to learn more about how it all works there is a great free course by Lee Robinson called React 2025.

3. React Storefront

No, that’s the name of the framework. React Storefront is a new player in the game. They are trying to make your life easier with creating an e-commerce storefront using React and Next.js. I have not personally used their framework yet but it seems very promising. They are platform agnostic so you can use whatever headless cms you want, whether it’s Shopify or anything else.

Plain JavaScript

Yes, this is still an option. Using the Shopify JavaScript Buy SDK you can even build a plain JS site.

Vue.js, Angular, Etc.

While I can’t personally comment on these frameworks as I haven’t used them, I have seen it being utilized in storefronts. The concept is the same, connect to the Shopify JavaScript Buy SDK to pull Shopify data and the checkout url and build your store with any other framework.

I hope this blog post helped answer some of the questions around the vast landscape of frameworks out there for building a Headless Shopify store.

Quick note. Check out my new project called Storegurus.io. It is a project that I started to scratch my own itch. I am a huge Shopify junky so I am always curious to see what theme and apps a store is using, but there were no good websites out there for it. Storegurus.io is definitely the best and most reliable tool out there! I know because I have tried them all. The project is still in BETA but all of the important features are working!

--

--

Iskandar Kurbanov
Iskandar Kurbanov

Written by Iskandar Kurbanov

Software Developer | Programming Instructor and Shopify Consultant

No responses yet