- Create APIsDesign REST and GraphQL Content Delivery APIs to connect to any frontend.
- Content ManagementCraft experiences and easily manage editing, publishing, and translation.
- CustomizationPersonalize your CMS to meet your project's unique requirements.
- CollaborationWork together easily on code and content.
- HostingHost your projects on robust, secure servers in minutes.
- SecurityImplement robust security measures to protect your information.
- EcommerceLevel up your eCommerce experiences
- Mobile applicationsOne CMS, any devices.
- Corporate siteManage your brand narrative.
Looking for our logo ?
- Last updated: December 8, 2022 (Strapi v4 era)
- 6 min read
Building an Ecommerce Website with Jekyll, Strapi, Snipcart and Tailwind CSS - 3 of 5
In the third part of this series, learn how to create the homepage hero.
June 17, 2022
Welcome to the third part of our tutorial series, teaching you how to create an eCommerce website with Strapi, Jekyll, Tailwind CSS, and Snipcart. In the first part of the series, we completed our backend setup and our frontend installation. In the second part of this series, we created the default layout of our ecommerce website.
We created and added products to the bestsellers and weekend deals collections in the first part of this tutorial series. In this part of the series, we will create the homepage of our website. The homepage will include a hero section, a section displaying our best-selling products, and our weekend deals.
Creating the Homepage Hero
Add the following code samples to the index.html file in your project's root folder.
1 <div>
2 <div
3 class="
4 container
5 flex flex-col
6 px-6
7 py-4
8 mx-auto
9 space-y-6
10 md:h-128
11 md:py-16
12 md:flex-row
13 md:items-center
14 md:space-x-6
15 "
16 >
17 <div class="flex flex-col items-center w-full md:flex-row md:w-1/2">
18 <div class="max-w-lg md:mx-12 md:order-2">
19 <h1
20 class="
21 text-3xl
22 font-medium
23 tracking-wide
24 text-gray-800
25 dark:text-white
26 md:text-4xl
27 "
28 >
29 The best personal online shop
30 </h1>
31 <p class="mt-4 text-gray-600">
32 Shop for your personal effects at the Strapi eccomerce online tutorial
33 store. We sell only the best products with the best qualities.
34 </p>
35 <div class="mt-6">
36 <a
37 href="#"
38 class="
39 block
40 px-3
41 py-2
42 font-semibold
43 text-center text-white
44 transition-colors
45 duration-200
46 transform
47 bg-blue-500
48 rounded-md
49 md:inline
50 hover:bg-blue-900
51 "
52 >Make your first purchase</a
53 >
54 </div>
55 </div>
56 </div>
57 <div class="flex items-center justify-center w-full h-96 md:w-1/2">
58 <img
59 class="object-cover w-full h-full max-w-2xl rounded-md"
60 src="https://images.unsplash.com/photo-1579586337278-3befd40fd17a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80"
61 alt="apple watch photo"
62 />
63 </div>
64 </div>
65 </div> Your index should look something like this now.
Extending the Homepage
The next step will be to extend our homepage. In the first part of this tutorial series, we created two Strapi collection types named Bestsellers and Weekend deals in our Strapi backend. We will be querying these two collection types from the backend and displaying them on the homepage.
To do this, we will be using the Jekyll-strapi plugin. Strapi created this plugin for connecting Strapi applications with Jekyll.
Installing the Jekyll-Strapi Plugin
To install the Jekyll-strapi plugin, Navigate to your frontend repository, and add the following to your Gemfile.
1 gem "jekyll-strapi"Also, add the following to your config.yml file.
1 plugins:
2 - jekyll-strapi Then, run bundle install in your terminal to install the Jekyll-strapi plugin.
With Jekyll-strapi set up, we will extract content from the backend by adding the configurations directly to the config.yml file.
Fetching our Best-Selling Products
To import our best-selling products and weekend deals from the Strapi backend, we must make a GET request to the backend. Add the following configurations to the config.yml file.
1 strapi:
2 # Your API endpoint (optional, default to http://localhost:1337)
3 endpoint: http://localhost:1337
4 # Collections, key is used to access in the strapi.collections
5 # template variable
6 collections:
7 # Example for a "bestsellers" collection
8 bestsellers:
9 # Collection name (optional)
10 type: best-sellersThis code creates a Strapi endpoint and a collection named bestsellers. The most important part of this code sample is the type key. We will use the type key will be used to add our path and query parameters. The path to our Best Sellers collection type is best-seller.
Displaying our Best-Selling Products
To make our index.html code clean and readable, we will implement the best sellers view to include the file. Create a bestsellers.html file in the _includes folder and add the following code samples into the file.
1 <div>
2 <div class="bg-white">
3 <div
4 class="max-w-2xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8"
5 >
6 <div class="flex justify-center w-full mb-20">
7 <h1 class="text-4xl font-bold text-blue-900">Best sellers</h1>
8 </div>
9 {%- for bestseller in strapi.collections.bestsellers -%}
10 <div
11 class="
12 grid grid-cols-1
13 gap-y-10
14 sm:grid-cols-2
15 gap-x-6
16 lg:grid-cols-3
17 xl:grid-cols-4
18 xl:gap-x-8
19 "
20 >
21 {%- for item in bestseller.products -%}
22 <a
23 key="{item.id}"
24 href="/product{{ item.slug | relative_url }}"
25 class="group mb-10"
26 >
27 <div
28 class="
29 w-full
30 aspect-w-1 aspect-h-1
31 bg-gray-200
32 rounded-lg
33 overflow-hidden
34 xl:aspect-w-7 xl:aspect-h-8
35 "
36 >
37 <img
38 src="http://localhost:1337{{ item.Image.url }}"
39 alt="{item.id}"
40 class="
41 w-full
42 h-60
43 object-center object-cover
44 group-hover:opacity-75
45 "
46 />
47 </div>
48 <h3 class="text-center mt-4 text-sm text-gray-700">
49 {{ item.name }}
50 </h3>
51 <p class="text-center mt-1 text-lg font-medium text-gray-900">
52 ${{ item.price }}
53 </p>
54 </a>
55 {%- endfor -%}
56 </div>
57 {%- endfor -%}
58 </div>
59 </div>
60 </div>In this code, we used the Liquid Templating Language to loop through the data returned by the bestsellers collection and Tailwind CSS to display the output. The Liquid is an open-source Ruby templating language created by Shopify in 2006.
The Liquid is the templating language that is used to collect and display dynamic contents in Jekyll websites. Learn more about the Liquid templating language here.
Update your index.html file.
1 <div>
2 <div
3 class="
4 container
5 flex flex-col
6 px-6
7 py-4
8 mx-auto
9 space-y-6
10 md:h-128
11 md:py-16
12 md:flex-row
13 md:items-center
14 md:space-x-6
15 "
16 >
17 <div class="flex flex-col items-center w-full md:flex-row md:w-1/2">
18 <div class="max-w-lg md:mx-12 md:order-2">
19 <h1
20 class="
21 text-3xl
22 font-medium
23 tracking-wide
24 text-gray-800
25 dark:text-white
26 md:text-4xl
27 "
28 >
29 The best personal online shop
30 </h1>
31 <p class="mt-4 text-gray-600">
32 Shop for your personal effects at the Strapi eccomerce online tutorial
33 store. We sell only the best products with the best qualities.
34 </p>
35 <div class="mt-6">
36 <a
37 href="#"
38 class="
39 block
40 px-3
41 py-2
42 font-semibold
43 text-center text-white
44 transition-colors
45 duration-200
46 transform
47 bg-blue-500
48 rounded-md
49 md:inline
50 hover:bg-blue-900
51 "
52 >Make your first purchase</a
53 >
54 </div>
55 </div>
56 </div>
57
58 <div class="flex items-center justify-center w-full h-96 md:w-1/2">
59 <img
60 class="object-cover w-full h-full max-w-2xl rounded-md"
61 src="https://images.unsplash.com/photo-1579586337278-3befd40fd17a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80"
62 alt="apple watch photo"
63 />
64 </div>
65 </div>
66 {% include bestsellers.html %}
67 </div> The bestsellers section should look something like this, depending on the type of products that you added to the collection.
Fetching and Displaying the Weekend Deals Products
We will be repeating the same steps for weekend deals. Update the config.yml file by adding the weekend deals collection.
1 weekenddeals:
2 # Collection name (optional)
3 type: weekend-dealsCreate the _includes/weekenddeals.html file, and add the following code samples.
1 <div>
2 <div class="bg-white">
3 <div
4 class="max-w-2xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8"
5 >
6 <div class="flex justify-center w-full mb-20">
7 <h1 class="text-4xl font-bold text-blue-900 mt-20">Weekend deals</h1>
8 </div>
9 {%- for items in strapi.collections.weekenddeals -%}
10 <div
11 class="
12 grid grid-cols-1
13 gap-y-10
14 sm:grid-cols-2
15 gap-x-6
16 lg:grid-cols-3
17 xl:grid-cols-4
18 xl:gap-x-8
19 "
20 >
21 {%- for item in items.products -%}
22 <a
23 key="{item.id}"
24 href="/product{{ item.slug | relative_url }}"
25 class="group mb-10"
26 >
27 <div
28 class="
29 w-full
30 aspect-w-1 aspect-h-1
31 bg-gray-200
32 rounded-lg
33 overflow-hidden
34 xl:aspect-w-7 xl:aspect-h-8
35 "
36 >
37 <img
38 src="http://localhost:1337{{ item.Image.url }}"
39 alt="{item.id}"
40 class="
41 w-full
42 h-60
43 object-center object-cover
44 group-hover:opacity-75
45 "
46 />
47 </div>
48 <h3 class="text-center mt-4 text-sm text-gray-700">
49 {{ item.name }}
50 </h3>
51 <p class="text-center mt-1 text-lg font-medium text-gray-900">
52 ${{ item.price }}
53 </p>
54 </a>
55 {%- endfor -%}
56 </div>
57 {%- endfor -%}
58 </div>
59 </div>
60 </div>Then update your index.html file.
1 <div>
2 <div
3 class="
4 container
5 flex flex-col
6 px-6
7 py-4
8 mx-auto
9 space-y-6
10 md:h-128
11 md:py-16
12 md:flex-row
13 md:items-center
14 md:space-x-6
15 "
16 >
17 <div class="flex flex-col items-center w-full md:flex-row md:w-1/2">
18 <div class="max-w-lg md:mx-12 md:order-2">
19 <h1
20 class="
21 text-3xl
22 font-medium
23 tracking-wide
24 text-gray-800
25 dark:text-white
26 md:text-4xl
27 "
28 >
29 The best personal online shop
30 </h1>
31 <p class="mt-4 text-gray-600">
32 Shop for your personal effects at the Strapi eccomerce online tutorial
33 store. We sell only the best products with the best qualities.
34 </p>
35 <div class="mt-6">
36 <a
37 href="#"
38 class="
39 block
40 px-3
41 py-2
42 font-semibold
43 text-center text-white
44 transition-colors
45 duration-200
46 transform
47 bg-blue-500
48 rounded-md
49 md:inline
50 hover:bg-blue-900
51 "
52 >Make your first purchase</a
53 >
54 </div>
55 </div>
56 </div>
57
58 <div class="flex items-center justify-center w-full h-96 md:w-1/2">
59 <img
60 class="object-cover w-full h-full max-w-2xl rounded-md"
61 src="https://images.unsplash.com/photo-1579586337278-3befd40fd17a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80"
62 alt="apple watch photo"
63 />
64 </div>
65 </div>
66 {% include bestsellers.html %}
67 {% include weekenddeals.html %}
68 </div>Conclusion
In this part of the series, we created our homepage. We also learned some cool stuff like the liquid templating language. In the next part of our series, we will implement our product catalog and display our products information on the products page.
Here are the links to the final source code: Frontend Repository & Backend Repository