Welcome to the second part of our tutorial series, teaching you how to create an e-commerce website with Strapi, Jekyll, Tailwind CSS, and Snipcart. In the first part of the series, we completed our frontend and backend installation. We also implemented the full setup of our Strapi backend. Click here to read the first article in this series.
In this part of the series, we will create the layout of our project. To do this, we will create the header and footer templates wrapped around our website pages—Jekyll ships with a custom _layouts folder where custom layouts are created and stored. To apply the custom layout to a page, add the layout to the front matter at the top of the page. Learn more about Jekyll layouts here.
Creating the Website’s Layout
To implement our default layouts, add the following code snippets to your _layouts/default.html file.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/style.css" />
</head>
<body>
<section>
<div class="flex flex-col h-screen">
{% include header.html %}
<div class="flex-grow mx-2 mt-5 lg:mx-20">{{ content }}</div>
{% include footer.html %}
</div>
</section>
</body>
</html>We wrapped our content with the header.html and footer.html files using the Jekyll includes tag in this code. The includes tag allows us to add content from another file stored in the Jekyll _includes folder. You can learn more about the Jekyll includes tag here.
To create our header and footer files, navigate to the _includes folder, add a header.html file and a footer.html file. Add the following code samples to the header.html file.
<div
class="
flex
justify-between
relative
px-5
py-6
h-4
items-center
shadow-lg
p-4
lg:px-20
"
>
<div
class="
container
mx-auto
px-6
py-3
md:flex
md:justify-between
md:items-center
"
>
<div class="flex justify-between items-center">
<div>
<a
class="
text-blue-900 text-xl
font-bold
"
href="/"
>Strapi eccomerce app</a
>
</div>
</div>
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div class="md:flex items-center">
<div class="hidden flex flex-col md:flex-row md:mx-6 lg:block">
<a
class="
my-1
text-sm text-gray-700
font-medium
hover:text-indigo-500
md:mx-4
md:my-0
"
href="/"
>Home</a
>
<a
class="
my-1
text-sm text-gray-700
font-medium
hover:text-indigo-500
md:mx-4
md:my-0
"
href="/products"
>Shop</a
>
<a
class="
my-1
text-sm text-gray-700
font-medium
hover:text-indigo-500
md:mx-4
md:my-0
"
href="#"
>Contact</a
>
<a
class="
my-1
text-sm text-gray-700
font-medium
hover:text-indigo-500
md:mx-4
md:my-0
"
href="#"
>About</a
>
</div>
<div class="flex justify-center md:block">
<a class="relative text-gray-700 hover:text-gray-600" href="#">
<svg
class="h-5 w-5"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<span
class="
absolute
top-0
left-0
rounded-full
bg-indigo-500
text-white
p-1
text-xs
"
></span>
</a>
</div>
</div>
</div>
</div>Then, add the following code samples to the footer.html file:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@iconscout/unicons@3.0.6/css/line.css"
/>
<footer class="h-auto w-auto bg-blue-900 pt-10 sm:mt-10 pt-10">
<div
class="
max-w-6xl
mx-2
text-gray-800
flex flex-wrap
justify-left
inset-x-0
bottom-0
lg:mx-20
"
>
<div class="p-5 w-1/2 sm:w-4/12 md:w-3/12">
<div class="text-md uppercase text-gray-400 font-medium mb-6">
Community
</div>
<a
href="#"
class="
my-3
block
text-gray-300
hover:text-gray-100
text-sm
font-medium
duration-700
"
>
Become our sales agent
</a>
<a
href="#"
class="
my-3
block
text-gray-300
hover:text-gray-100
text-sm
font-medium
duration-700
"
>
Blog
</a>
<a
href="#"
class="
my-3
block
text-gray-300
hover:text-gray-100
text-sm
font-medium
duration-700
"
>
Help
</a>
</div>
<div class="p-5 w-1/2 sm:w-4/12 md:w-3/12">
<div class="text-md uppercase text-gray-400 font-medium mb-6">
Contact us
</div>
<a
href=""
class="
my-3
block
text-gray-300
hover:text-gray-100
text-sm
font-medium
duration-700
"
>
Help center
</a>
<a
href=""
class="
my-3
block
text-gray-300
hover:text-gray-100
text-sm
font-medium
duration-700
"
>
How to shop
</a>
<a
href=""
class="
my-3
block
text-gray-300
hover:text-gray-100
text-sm
font-medium
duration-700
"
>
Careers
</a>
</div>
<div class="p-5 w-1/2 sm:w-4/12 md:w-3/12">
<div class="text-md uppercase text-gray-400 font-medium mb-6">
About Us
</div>
<a
href=""
class="
my-3
block
text-gray-300
hover:text-gray-100
text-sm
font-medium
duration-700
"
>
What's new
</a>
</div>
<div class="lg:flex space-x-10 p-5 w-1/2 sm:w-4/12 md:w-3/12">
<div class="text-md uppercase text-gray-400 font-medium mb-6">
<a href="#" class="w-10 h-10 mx-1">
<i class="uil uil-facebook-f"></i>
</a>
</div>
<div class="text-md uppercase text-gray-400 font-medium mb-6">
<a href="#" class="w-10 h-10 mx-1">
<i class="uil uil-twitter-alt"></i>
</a>
</div>
<div class="text-md uppercase text-gray-400 font-medium mb-6">
<a href="#" class="w-10 h-10 mx-1">
<i class="uil uil-linkedin"></i>
</a>
</div>
</div>
</div>
<div class="pt-2">
<div
class="
flex
justify-center
pb-5
m-auto
pt-5
border-t border-gray-500
text-gray-400 text-sm
flex-col
px-2
lg:px-20
md:flex-row
"
>
<div class="mt-2">(c) Copyright 2021-year. Built by Sheriff</div>
</div>
</div>
</footer>Start the Jekyll development server with npm run dev . You will be redirected to http://localhost:4000/ . The homepage should look something like this now.
Conclusion
In this part of the series, we implemented our project's default layout. We also learned about Jekyll's includes and layouts tag. These two tags are going to be very useful in the upcoming part of this tutorial series. In the next part of this series, we will add the homepage to our e-commerce website.
Here are the links to the final source code: Frontend Repository & Backend Repository
