One of the best ways one can make a successful e-commerce website is to host it on the Shopify Platform. Shopify is a website which eases the process of running an online store for small merchants by providing them with tools which assist in managing their payments, marketing strategies, shipping and customer engagements. I plan to publish a series of blog posts documenting the process of building an online store (Shopify Theme) from scratch (in 7 working days) and open-source all of the code.

A couple of years ago, I had built a child theme on Shopify for one of my clients. One of the best ways to define a child theme is through WordPress's Developer Documentation: A child theme is a theme created by making slight changes to appearance and functionality of an existing fully functional theme (parent theme) while preserving most of its functionality. Most of the changes done during my project were presentational only (CSS Specific).

A lot has changed in terms of the platform itself since the last time I developed that child-theme. So, I planned to create a theme from scratch. Building a theme requires learning Shopify's open-source template language, Liquid. The Liquid is simple Ruby-based language, much like Handlebars and it acts as an intermediary between Shopify store and the HTML content that gets rendered in the browser. It takes in store's data, uses placeholder constructs (very much like handlebars templates) and outputs relevant data.

Linking Shopify Store with a custom Domain (or a subdomain)

Before building a theme, one needs to create a Shopify developer/partner account first, but we are not going to in detail with all the Account set up processes in this article.

One of the first things I planned to do is create a subdomain for the theme so that it could be linked and shared for demo purposes. The process is rather simple, one needs to log-in to the respective Domain Control Panel (like GoDaddy, BigRock, and so on) and edit the CNAME details. Since I manage my domain using Cloudflare, The process is pretty straight forward:-

  1. Log in to your Cloudflare Account
  2. Go to DNS section  and add the following record
CNAME entry for Shopify on subdomain

Setting up development Environment for Development (Shopify Slate)

Theme Kit is a command line interface that allows you to manage and edit theme files directly through a local development machine. Once Theme-kit has been set up, a theme developer upload, download, and sync assets (manually or automatically) with Shopify Store.

Shopify's Slate is toolkit provided by Shopify that facilitates building Shopify themes. While building a theme with Slate, a new project is automatically scaffolded with Slate’s Starter Theme. Starter Theme is the default starting point when generating a new Slate project. It represents Shopify’s opinionated approach to building themes and includes up-to-date best practices and solutions. Slate uses Theme Kit (and other tools) behind the scenes to give you a professional workflow to create Shopify Themes.

It contains all the files the Shopify Themes team considers to be the bare essentials to building a Shopify theme, such as templates and snippets, and standard Liquid tags and logic. There is little to no markup, classes, or other code needs to be removed. There is very little CSS in this theme, and that’s intentional—Starter Theme is not a framework, but rather a starting point for the project.

Image Courtesy: Shopify 

  1. You will have to install Node, and NPM or Yarn. You can also run and manage different versions of Node using NVM or N. Create Slate Theme as of the publish date of this article requires Node 8.9.4 or higher.
  2. Use either yarn create slate-theme my-new-theme or npx create-slate-theme my-new-theme depending on your choice of package manager. I chose to use Yarn.
  3. Once the slate installs a starter theme, Create an app by going to this url https://{store-name}
  4. Click on Create New Private App and add Name and set the Theme templates and theme assets to “Read and write”.
  5. Once the app has been created, open up the theme folder and update contents of a hidden file by the name .env . The next point discusses on what value needs to be added in the same.
  6. The first variable SLATE_STORE should be something like SLATE_STORE={store-name} . The next variable should include the API password generated from a Private App SLATE_PASSWORD=*************. The next variable should be . You can head to https://{store-name} to list all the available themes and each theme entry has a unique id tag. All the changes will be deployed to the theme which matches the id set to SLATE_THEME_ID.
  7. You can also refer to this link in case you need a detailed understanding of each of the above variables.
  8. Create a self-signed certificate (for localhost) using this link.
  9. If you are following along, you might not be inside the theme folder, so ideally you would go inside the theme folder by typing something like this cd my-new-theme and once inside the theme folder, type yarn start
  10. In case you have an error which  states "[API] Invalid API key or access token (unrecognized login or wrong password)";  head on to https://{store-name} and again check the password.
  11. Once the process has been successfully done, the output of the terminal would be much similar to one below. (And one can start developing themes and auto-deploy them!  🕺🏻)

I use Visual Studio Code as my code editor and  doesn’t ship with support for Liquid out of the box. As a workaround for this, I installed Liquid Theme Snippets Extension to highlight syntax for all .liquid themes. It also facilitates code auto-completion.

development workflow: snippets
Image Courtesy: Shopify 

Plan for Next 6 Working Days:
  • Custom E-commerce Portal in 7 Days - Design and Wireframe Day - 2
  • Custom E-commerce Portal in 7 Days - Design and Basic CSS - Day 3
  • Custom E-commerce Portal in 7 Days - Home, Product and Checkout Pages - Day 4
  • Custom E-commerce Portal in 7 Days - Blog and Article Pages - Day 5
  • Custom E-commerce Portal in 7 Days - Parallax - Day 6
  • Custom E-commerce Portal in 7 Days - Final Touches, Schema Tags and Accessibility - Day 7

(Cover Image Photo Credit: Clark Street Mercantile on Unsplash)

  1. Github Repo link
  2. Shopify Developer Documentation
  3. Shopify Liquid Cheat Sheet
  4. Shopify Design and Theme Fundamentals (Requires login)
  5. SCSS Documentation on Shopify - Part 1
  6. SCSS Documentation on Shopify - Part 2
  7. SCSS Documentation on Shopify - Part 3
  8. Shopify Partner Youtube Channel
  9. WooCommerce, An alternate option built as a WordPress plugin. be continued