- Last updated: December 8, 2022 (Strapi v4 era)
- 4 min read
Building an Ecommerce Website with Jekyll, Strapi, Snipcart and Tailwind CSS - 2 of 5
In the second part of the tutorial series, learn how to create the Website’s Layout.
June 17, 2022
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.
1 <head>
2 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
3 <meta charset="utf-8" />
4 <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/style.css" />
5 </head>
6 <body>
7 <section>
8 <div class="flex flex-col h-screen">
9 {% include header.html %}
10 <div class="flex-grow mx-2 mt-5 lg:mx-20">{{ content }}</div>
11 {% include footer.html %}
12 </div>
13 </section>
14 </body>
15 </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.
1 <div
2 class="
3 flex
4 justify-between
5 relative
6 px-5
7 py-6
8 h-4
9 items-center
10 shadow-lg
11 p-4
12 lg:px-20
13 "
14 >
15 <div
16 class="
17 container
18 mx-auto
19 px-6
20 py-3
21 md:flex
22 md:justify-between
23 md:items-center
24 "
25 >
26 <div class="flex justify-between items-center">
27 <div>
28 <a
29 class="
30 text-blue-900 text-xl
31 font-bold
32 "
33 href="/"
34 >Strapi eccomerce app</a
35 >
36 </div>
37 </div>
38 <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
39 <div class="md:flex items-center">
40 <div class="hidden flex flex-col md:flex-row md:mx-6 lg:block">
41 <a
42 class="
43 my-1
44 text-sm text-gray-700
45 font-medium
46 hover:text-indigo-500
47 md:mx-4
48 md:my-0
49 "
50 href="/"
51 >Home</a
52 >
53 <a
54 class="
55 my-1
56 text-sm text-gray-700
57 font-medium
58 hover:text-indigo-500
59 md:mx-4
60 md:my-0
61 "
62 href="/products"
63 >Shop</a
64 >
65 <a
66 class="
67 my-1
68 text-sm text-gray-700
69 font-medium
70 hover:text-indigo-500
71 md:mx-4
72 md:my-0
73 "
74 href="#"
75 >Contact</a
76 >
77 <a
78 class="
79 my-1
80 text-sm text-gray-700
81 font-medium
82 hover:text-indigo-500
83 md:mx-4
84 md:my-0
85 "
86 href="#"
87 >About</a
88 >
89 </div>
90 <div class="flex justify-center md:block">
91 <a class="relative text-gray-700 hover:text-gray-600" href="#">
92 <svg
93 class="h-5 w-5"
94 viewBox="0 0 24 24"
95 fill="none"
96 xmlns="http://www.w3.org/2000/svg"
97 >
98 <path
99 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"
100 stroke="currentColor"
101 stroke-width="2"
102 stroke-linecap="round"
103 stroke-linejoin="round"
104 />
105 </svg>
106 <span
107 class="
108 absolute
109 top-0
110 left-0
111 rounded-full
112 bg-indigo-500
113 text-white
114 p-1
115 text-xs
116 "
117 ></span>
118 </a>
119 </div>
120 </div>
121 </div>
122 </div>Then, add the following code samples to the footer.html file:
1 <link
2 rel="stylesheet"
3 href="https://cdn.jsdelivr.net/npm/@iconscout/unicons@3.0.6/css/line.css"
4 />
5
6 <footer class="h-auto w-auto bg-blue-900 pt-10 sm:mt-10 pt-10">
7 <div
8 class="
9 max-w-6xl
10 mx-2
11 text-gray-800
12 flex flex-wrap
13 justify-left
14 inset-x-0
15 bottom-0
16 lg:mx-20
17 "
18 >
19 <div class="p-5 w-1/2 sm:w-4/12 md:w-3/12">
20 <div class="text-md uppercase text-gray-400 font-medium mb-6">
21 Community
22 </div>
23 <a
24 href="#"
25 class="
26 my-3
27 block
28 text-gray-300
29 hover:text-gray-100
30 text-sm
31 font-medium
32 duration-700
33 "
34 >
35 Become our sales agent
36 </a>
37 <a
38 href="#"
39 class="
40 my-3
41 block
42 text-gray-300
43 hover:text-gray-100
44 text-sm
45 font-medium
46 duration-700
47 "
48 >
49 Blog
50 </a>
51 <a
52 href="#"
53 class="
54 my-3
55 block
56 text-gray-300
57 hover:text-gray-100
58 text-sm
59 font-medium
60 duration-700
61 "
62 >
63 Help
64 </a>
65 </div>
66 <div class="p-5 w-1/2 sm:w-4/12 md:w-3/12">
67 <div class="text-md uppercase text-gray-400 font-medium mb-6">
68 Contact us
69 </div>
70 <a
71 href=""
72 class="
73 my-3
74 block
75 text-gray-300
76 hover:text-gray-100
77 text-sm
78 font-medium
79 duration-700
80 "
81 >
82 Help center
83 </a>
84 <a
85 href=""
86 class="
87 my-3
88 block
89 text-gray-300
90 hover:text-gray-100
91 text-sm
92 font-medium
93 duration-700
94 "
95 >
96 How to shop
97 </a>
98 <a
99 href=""
100 class="
101 my-3
102 block
103 text-gray-300
104 hover:text-gray-100
105 text-sm
106 font-medium
107 duration-700
108 "
109 >
110 Careers
111 </a>
112 </div>
113 <div class="p-5 w-1/2 sm:w-4/12 md:w-3/12">
114 <div class="text-md uppercase text-gray-400 font-medium mb-6">
115 About Us
116 </div>
117 <a
118 href=""
119 class="
120 my-3
121 block
122 text-gray-300
123 hover:text-gray-100
124 text-sm
125 font-medium
126 duration-700
127 "
128 >
129 What's new
130 </a>
131 </div>
132 <div class="lg:flex space-x-10 p-5 w-1/2 sm:w-4/12 md:w-3/12">
133 <div class="text-md uppercase text-gray-400 font-medium mb-6">
134 <a href="#" class="w-10 h-10 mx-1">
135 <i class="uil uil-facebook-f"></i>
136 </a>
137 </div>
138 <div class="text-md uppercase text-gray-400 font-medium mb-6">
139 <a href="#" class="w-10 h-10 mx-1">
140 <i class="uil uil-twitter-alt"></i>
141 </a>
142 </div>
143 <div class="text-md uppercase text-gray-400 font-medium mb-6">
144 <a href="#" class="w-10 h-10 mx-1">
145 <i class="uil uil-linkedin"></i>
146 </a>
147 </div>
148 </div>
149 </div>
150 <div class="pt-2">
151 <div
152 class="
153 flex
154 justify-center
155 pb-5
156 m-auto
157 pt-5
158 border-t border-gray-500
159 text-gray-400 text-sm
160 flex-col
161 px-2
162 lg:px-20
163 md:flex-row
164 "
165 >
166 <div class="mt-2">(c) Copyright 2021-year. Built by Sheriff</div>
167 </div>
168 </div>
169 </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