How to Build an Ecommerce Website with Jekyll, Strapi, Snipcart and Tailwind CSS
Tags: snipcart, tailwindcss, jekyll, ecommerce
Published: 2021-10-07 11:27:32


Welcome to the first part of building an e-commerce website with Jekyll, Strapi, Snipcart, and Tailwind CSS series. In this tutorial series, we are going to build an Ecommerce store. After completing the tutorial series, you should have a website that looks like this.


Below is a preview of the project we will be building in this article and here are the links to the final source code [Frontend repository](https://github.com/Quadrisheriff/Strapi-Eccomerce-website) & the [Backend repository](https://github.com/Quadrisheriff/Strapi-ecommerce-app)



[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/034en1cgkxl3xp88wm9c.png)](https://www.youtube.com/watch?v=ZhTA9kYibIs)


&nbsp;

## Introduction

[**Strapi:**](https://strapi.io/) 
[Strapi](https://strapi.io/) is the world-leading node.js open-source headless CMS. Strapi simplifies our development process, making it easier to access our content by providing us fast and secure APIs built in an efficient and scalable manner.

[**Jekyll:**](https://jekyllrb.com/) 
Jekyll is a simple blog-aware static site generator used for creating personal websites, blogs, documentation websites, corporate websites, etc. 
Jekyll was built with the Ruby programming language, and it uses the liquid templating engine as its templating engine. Jekyll is also the engine powering GitHub pages.

[**TailwindCSS:**](https://tailwindcss.com/) 
Tailwind is a utility-first CSS framework for rapidly building custom user interfaces. By using Tailwind, we can write our css directly in our HTML classes. This leads to faster development time since writing CSS this way is much easier.

[**Snipcart:**](https://snipcart.com/) 
Snipcart is an easy-to-implement shopping cart platform. With Snipcart, you can create a seamless online buying experience no matter your web stack with just 2 lines of code. 

## Prerequisites 

To complete this tutorial series, you need to have:


- Ruby, RubyGem, and Bundler installed locally - Visit the [installation page](https://jekyllrb.com/docs/installation/) for instructions on installing Ruby, RubyGem, and Bundler on your local machine.


- Node.js and NPM installed locally - Visit this [article from Teamtreehouse](https://treehouse.github.io/installation-guides/windows/node-windows.html) for instructions on installing Node.js and NPM on your local machine.


- Git installed locally and GitHub account - Follow the instructions [here](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) to install Git on your local machine. Create a GitHub account [here](https://github.com/).

&nbsp;

## Project Setup


### Strapi installation

The first step in our tutorial will be to install and set up Strapi as our headless CMS. 
*Note - Make sure Node.js and NPM are fully installed before running this step.*

Create a new project with the following command.

```bash
    npx create-strapi-app my-project
```

Change `my-project` to the preferred name of your project. Select `Quickstart` and select `n` when asked for a configuration template.

Wait for the complete installation. You will be redirected to [**http://localhost:1337/admin**](http://localhost:1337/admin), where you will be prompted to register your details.


![](https://lh4.googleusercontent.com/dNye7UWiKpp1wyu2OcyH1lu0NTW3uYqr8eG10lOxqQbWx8pU2FXQ79bOEwYkLFXP3697O4nWGNkFKVgLwRvl9iznYE0uNQhVYPxsR3aF-Nb2-x3vWg5dO0N35asB5G8RuJf8tgyL=s0)


Add your details and click **LET’S START** access the Strapi dashboard.


![](https://lh4.googleusercontent.com/w1867JqFhv1EgvoSMw87VLMFyR91iFGNZPl8crZYWtWxm9WKyERr36CK95e3vl0rPL4Nc6uIuOfxPq-KJ1J5ucXwe6jvj2b4UexbAR6bQraQtqIoDUGCv8YInebwkwrY0VQkmpHV=s0)


Also, we will add a folder with the project name to the root directory of your computer. Open the folder in your preferred code editor to access the backend code and configurations.


### Jekyll and Tailwind CSS installation and setup

We will be using Jekyll as our preferred static site generator for this tutorial. Jekyll is a simple blog-aware static site generator used for building blogs, personal websites, corporate websites, documentation websites, etc.

*Note - Make sure Ruby, Ruby gems, and Bundler are fully installed before running this step.*

**Jekyll Installation**

The first step in the frontend setup will be to install Jekyll locally on your computer. 

For mac installation, run.

```
    sudo gem install bundler jekyll
```

For windows installation, run. 

```
    gem install jekyll bundler
```

Visit the [Jekyll installation page](https://jekyllrb.com/docs/installation/) for more information on installing Jekyll on your local computer.

**Adding Tailwind CSS to Jekyll**

For this guide, we will be using the Jekyll starter styled with Tailwind CSS template.
This template has Tailwind CSS ultimately set up with Jekyll, making our development journey more accessible and faster. To set up the starter project, navigate to the Tailwind starter [GitHub repository](https://github.com/taylorbryant/jekyll-starter-tailwind) on your browser. 

Click **Use this template** on the top right part of the repository.

![](https://lh6.googleusercontent.com/B8fpsvVEY5ETl7fpLngTiovH7c8zkN10I43jMgHyEKWqIOA3_DgD_2LX84kiSNVTXv-WJbTPKCiXCrgLHFIDHJM0okb4p7bGNn8oolBy4UbocumaVpR59EbUsLWYbX0X0LlstSu8=s0)


You will be directed to the Create a repository page. 


![](https://lh4.googleusercontent.com/ylRJtw_u-NosXqgQNKm1bC6vtHGiEKpR9kcNOikkrxsIIQig5uq-EKHRdNh_nOGLAExlf5jgbKNU5Z1jLrQT7aKBJ9vsfa7hK-oDHEP-9e-cLZqckzSj9BiuL9XMOD0OWKzVwnHe=s0)


Add your project name as the **Repository Name**, and Click **Create repository from the template** to create a new repository with the template.

![](https://lh3.googleusercontent.com/AcZ-53l6FWpFwKJaRkal8P1TOSVtirFDI0FHpo9ltpZxl3fBHvmDq7ne6V_pTQwShdzPxkvMzEHxLPD1bJwl_NFtlIrEnO_QgKBnOc0M6ZBRTZqKy53KBokFqklfs5ldD1Rb5cw4=s0)



Clone the newly created repository. Navigate to the cloned repository, and run `bundle install` to install all the required gems. 

Run `npm ci` to install the required NPM packages in the project’s `package.lock.json` file, and run `npm run dev` to start the Jekyll development server.

You will be redirected to [http://localhost:4000/](http://localhost:4000/), where the development server is hosted. The page should look like this - 


![](https://lh6.googleusercontent.com/HYEECO71l9N75uoBw6G3DViOQRV_lQ3tFGrrjrp1xggwSgOimiyh_fWyQMcCbtOtDCHiaL5Ac_QIxmOxMkJXi95jEXA208Z5ITmsIGsq_nvjF8I95rZnf6QRciixKr1sAseTsR8n=s0)

### Backend Setup

**Creating the Product collection types**

The next thing to do is to add our products to the backend. Navigate to your backend repository and start the backend with `npm run develop`. We are using `npm run develop` instead of `npm run start` because we will be making changes to the server collection types.

Login to your dashboard, navigate to **Content-Types Builder** and click **create new collection type**. Set the display name to **Product** and add the following fields to the collection type:


- name(Text(Short text))
- price(Number(float))
- description(Text(Long text))
- image(Media(single media))
- images(Media(multiple media))
- videos(Media(multiple media))
- additional_information(Text(Long text))

Click **Save** to register your changes and restart the server.

**Adding Slug to the Product collection type**

Next, we will be adding a dynamic autogenerated slug system to the `Product` collection type. Using a slug will make it easier to query for our products in the frontend.

First, navigate to **Content-Types Builder** and click **Product**, then click **Add another field**. Select **UID.** Set the field `slug`, and set the attached field to `name`. Save your changes and click **Configure the view**, and select the `slug` field. Then, set **the Editable field** off in the window that appears. Click **Save** to register your changes.

With the slug system fully set up, a new slug will be automatically generated in an uneditable slug field anytime you create a new product. The Slug will be created from the product name.

**Adding products to our backend**

Now that we are done creating our collection types, we need to add products to our [backend](https://masteringbackend.com/posts/backend-development-the-ultimate-guide/). On the Strapi dashboard, click **Products** under **COLLECTION TYPES** to navigate to the product page. 

Select **Add New Products** to create new products. You will be directed to the create an entry page. 


![](https://lh5.googleusercontent.com/qWxEEXz7HOaJDLcrjgX1fg-UugnyQp9wMcqC6uIhhePoTM_eVbrGpNsreZ4klDBxMFmyzjyw8LKONjBrziuOIjvH4bEMC_Ny4j1zk5jSMxsvJwCJkawflCzuXdLMfDIJ--dp9KWd=s0)


Make sure to add many products to your backend before moving to the next step in this tutorial. After adding a product, click **publish** to publish the product.

**Storing our products under different collections**

To create different product collections, we will be storing our products in different collection types. 

*We won’t use single types because single type requests are not retrievable in* [***Jekyll with the Strapi-Jekyll plugin.***](https://github.com/strapi/jekyll-strapi/issues/14)

To create the collection, navigate to **Content-Types Builder** and click **create new collection type**. Add your collection name as the **Display name**, and add the following fields to the collection type:


- products(Text(Short text))

To connect products to a collection, select the collection and click **Add another field**. Select **Relation**, select `product` on the left menu, and set the **relation** field to  `The collection name has and belongs to many products`, ie. 

![](https://lh4.googleusercontent.com/laHL0ZGp9MsK2E_Z_6bNYeR8o6CE0mbWpMezA49VyAsYAZRy9uD89MKCUNroXn7JjG6yOj6e6xY_S_9H4yJypVTYmMS394UxEDVIyBlD6yjSP-6rebxkcC1NrnUjA1LSyUiWB-C-=s0)


Click **Save** to register your changes. For this tutorial, I will be using four product collections:


- BestSellers
- Gadgets
- Fashion items
- Weekend deals

Please make sure to create these product collections as they will be needed going forward. 

**Adding products to your collections**

To add your products to your collections, click the collection name under **COLLECTION TYPES** to navigate to the collection’s page. Click **Add new** `Collection name`.
Click the **Product** dropdown menu on the left side of the page to reveal your products, and select the products you want to add to the collection.

![](https://lh6.googleusercontent.com/oimBxJqam9FVABny8E8qmqESoMQdeQoHJWty-Jprbm7F9tq6hnu_miTdcBQfGQhb11ifUqiXnMw6WSJnB1oZby_xL_4Mi15813x-uIsPmlVB7y5Z1fPuBF8HEU5YDyB-lWsFzApz=s0)


Click **Save** to register your changes and **Publish** to publish the collection.

**Allowing access to our backend**

The last step in our backend setup is to allow access to our backend by editing user roles and permissions. This is done to enable our frontend to access our backend without the need for a token. 

To do this, navigate settings on the Strapi dashboard. Click **Roles** under **USERS AND PERMISSIONS PLUGIN** and select **Public**. Tick **finds** and **findone** for all collection types and click **Save** to register your changes.

By setting the `find` and `findone` permissions, a user will make GET requests for each collection type from any medium without the server asking for any authorization.


## Conclusion

The backend setup for this part of our tutorial series is complete. You can now add products and categories to the backend. In the next part of this tutorial series, we will start implementing our frontend and create a layout for our eCommerce website.


Make sure to add plenty of products to your backend before moving to the next part of the tutorial series.

In the [first part](https://strapi.io/blog/building-an-ecommerce-website-with-jekyll-strapi-snipcart-and-tailwind-css-1-of-5) of the series, we completed our backend setup and our frontend installation. In the [second part](https://strapi.io/blog/building-an-ecommerce-website-with-jekyll-strapi-snipcart-and-tailwind-css-2-of-5), we created the default layout of our eCommerce website. We added the homepage in the [third part](https://strapi.io/blog/building-an-ecommerce-website-with-jekyll-strapi-snipcart-and-tailwind-css-3-of-5) of the series, and we implemented the product catalog and single product views in the [fourth part](https://strapi.io/blog/how-to-build-an-ecommerce-website-with-jekyll-strapi-snipcart-and-tailwind-css-4-of-5) and final in the [fifth part](https://strapi.io/blog/building-an-ecommerce-website-with-jekyll-strapi-snipcart-and-tailwind-css-5-of-5) we will add a cart functionality to our website with Snipcart