Building an Ecommerce Website with Jekyll, Strapi, Snipcart and Tailwind CSS [1 of 5]

Jekyll

Tailwind CSS

Snipcart

Prerequisites

Project Setup

Strapi installation

  • Create a new project with the following command.
npx create-strapi-app@latest my-project --quickstart
  • Change my-project to the preferred name of your project. Select n when asked for a configuration template.
  • Wait for the complete installation. You will be redirected to http://localhost:1337/admin, where you will be prompted to register your details.
  • Add your details and click LET’S START to access the Strapi dashboard.
  • We need to 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

A. Jekyll Installation

sudo gem install bundler jekyll
gem install jekyll bundler

B. Adding Tailwind CSS to Jekyll

  • Click Use this template on the top right part of the repository.
  • Add your project name as the Repository Name, and click Create repository from the template to create a new repository with the template.
  • 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.

Backend Setup

A. Creating the Product-Collection Types

  • 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:
  • Click Finished and then click Save to register your changes and restart the server.

B. Adding a Slug to the Product-Collection Type

  • 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.

C. Adding Products to Our Backend

  • Click Add new entry to create new products. You will be directed to an entry page.

D. Storing Our Products Under Different Collections

  • products(Text(Short text)):
  • BestSellers
  • Gadgets
  • Fashion items
  • Weekend deals

E. Adding Products to Your Collections

  • Click the collection name under COLLECTION TYPES eg(BestSellers). Click on “configure the view” and click on collection type (BestSeller) then click add new entry to navigate to the collection page.
  • 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.
  • Click Save to register your changes and Publish to publish the collection.

F. Allowing Access to Our Backend

  • 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.

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store