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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
        <div>
          <div
            class="
              container
              flex flex-col
              px-6
              py-4
              mx-auto
              space-y-6
              md:h-128
              md:py-16
              md:flex-row
              md:items-center
              md:space-x-6
            "
          >
            <div class="flex flex-col items-center w-full md:flex-row md:w-1/2">
              <div class="max-w-lg md:mx-12 md:order-2">
                <h1
                  class="
                    text-3xl
                    font-medium
                    tracking-wide
                    text-gray-800
                    dark:text-white
                    md:text-4xl
                  "
                >
                  The best personal online shop
                </h1>
                <p class="mt-4 text-gray-600">
                  Shop for your personal effects at the Strapi eccomerce online tutorial
                  store. We sell only the best products with the best qualities.
                </p>
                <div class="mt-6">
                  <a
                    href="#"
                    class="
                      block
                      px-3
                      py-2
                      font-semibold
                      text-center text-white
                      transition-colors
                      duration-200
                      transform
                      bg-blue-500
                      rounded-md
                      md:inline
                      hover:bg-blue-900
                    "
                    >Make your first purchase</a
                  >
                </div>
              </div>
            </div>
            <div class="flex items-center justify-center w-full h-96 md:w-1/2">
              <img
                class="object-cover w-full h-full max-w-2xl rounded-md"
                src="https://images.unsplash.com/photo-1579586337278-3befd40fd17a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80"
                alt="apple watch photo"
              />
            </div>
          </div>
        </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
2
    plugins:
     - 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
2
3
4
5
6
7
8
9
10
        strapi:
         # Your API endpoint (optional, default to http://localhost:1337)
         endpoint: http://localhost:1337
         # Collections, key is used to access in the strapi.collections
         # template variable
         collections:
           # Example for a "bestsellers" collection
           bestsellers:
             # Collection name (optional)
             type: best-sellers

This 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
        <div>
          <div class="bg-white">
            <div
              class="max-w-2xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8"
            >
              <div class="flex justify-center w-full mb-20">
                <h1 class="text-4xl font-bold text-blue-900">Best sellers</h1>
              </div>
              {%- for bestseller in strapi.collections.bestsellers -%}
              <div
                class="
                  grid grid-cols-1
                  gap-y-10
                  sm:grid-cols-2
                  gap-x-6
                  lg:grid-cols-3
                  xl:grid-cols-4
                  xl:gap-x-8
                "
              >
                {%- for item in bestseller.products -%}
                <a
                  key="{item.id}"
                  href="/product{{ item.slug | relative_url }}"
                  class="group mb-10"
                >
                  <div
                    class="
                      w-full
                      aspect-w-1 aspect-h-1
                      bg-gray-200
                      rounded-lg
                      overflow-hidden
                      xl:aspect-w-7 xl:aspect-h-8
                    "
                  >
                    <img
                      src="http://localhost:1337{{ item.Image.url }}"
                      alt="{item.id}"
                      class="
                        w-full
                        h-60
                        object-center object-cover
                        group-hover:opacity-75
                      "
                    />
                  </div>
                  <h3 class="text-center mt-4 text-sm text-gray-700">
                    {{ item.name }}
                  </h3>
                  <p class="text-center mt-1 text-lg font-medium text-gray-900">
                    ${{ item.price }}
                  </p>
                </a>
                {%- endfor -%}
              </div>
              {%- endfor -%}
            </div>
          </div>
        </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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
        <div>
         <div
           class="
             container
             flex flex-col
             px-6
             py-4
             mx-auto
             space-y-6
             md:h-128
             md:py-16
             md:flex-row
             md:items-center
             md:space-x-6
           "
         >
           <div class="flex flex-col items-center w-full md:flex-row md:w-1/2">
             <div class="max-w-lg md:mx-12 md:order-2">
               <h1
                 class="
                   text-3xl
                   font-medium
                   tracking-wide
                   text-gray-800
                   dark:text-white
                   md:text-4xl
                 "
               >
                 The best personal online shop
               </h1>
               <p class="mt-4 text-gray-600">
                 Shop for your personal effects at the Strapi eccomerce online tutorial
                 store. We sell only the best products with the best qualities.
               </p>
               <div class="mt-6">
                 <a
                   href="#"
                   class="
                     block
                     px-3
                     py-2
                     font-semibold
                     text-center text-white
                     transition-colors
                     duration-200
                     transform
                     bg-blue-500
                     rounded-md
                     md:inline
                     hover:bg-blue-900
                   "
                   >Make your first purchase</a
                 >
               </div>
             </div>
           </div>
        
           <div class="flex items-center justify-center w-full h-96 md:w-1/2">
             <img
               class="object-cover w-full h-full max-w-2xl rounded-md"
               src="https://images.unsplash.com/photo-1579586337278-3befd40fd17a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80"
               alt="apple watch photo"
             />
           </div>
         </div>
         {% include bestsellers.html %}
        </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
2
3
       weekenddeals:
         # Collection name (optional)
         type: weekend-deals

Create the _includes/weekenddeals.html file, and add the following code samples.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
        <div>
          <div class="bg-white">
            <div
              class="max-w-2xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8"
            >
              <div class="flex justify-center w-full mb-20">
                <h1 class="text-4xl font-bold text-blue-900 mt-20">Weekend deals</h1>
              </div>
              {%- for items in strapi.collections.weekenddeals -%}
              <div
                class="
                  grid grid-cols-1
                  gap-y-10
                  sm:grid-cols-2
                  gap-x-6
                  lg:grid-cols-3
                  xl:grid-cols-4
                  xl:gap-x-8
                "
              >
                {%- for item in items.products -%}
                <a
                  key="{item.id}"
                  href="/product{{ item.slug | relative_url }}"
                  class="group mb-10"
                >
                  <div
                    class="
                      w-full
                      aspect-w-1 aspect-h-1
                      bg-gray-200
                      rounded-lg
                      overflow-hidden
                      xl:aspect-w-7 xl:aspect-h-8
                    "
                  >
                    <img
                      src="http://localhost:1337{{ item.Image.url }}"
                      alt="{item.id}"
                      class="
                        w-full
                        h-60
                        object-center object-cover
                        group-hover:opacity-75
                      "
                    />
                  </div>
                  <h3 class="text-center mt-4 text-sm text-gray-700">
                    {{ item.name }}
                  </h3>
                  <p class="text-center mt-1 text-lg font-medium text-gray-900">
                    ${{ item.price }}
                  </p>
                </a>
                {%- endfor -%}
              </div>
              {%- endfor -%}
            </div>
          </div>
        </div>

Then update your index.html file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
        <div>
         <div
           class="
             container
             flex flex-col
             px-6
             py-4
             mx-auto
             space-y-6
             md:h-128
             md:py-16
             md:flex-row
             md:items-center
             md:space-x-6
           "
         >
           <div class="flex flex-col items-center w-full md:flex-row md:w-1/2">
             <div class="max-w-lg md:mx-12 md:order-2">
               <h1
                 class="
                   text-3xl
                   font-medium
                   tracking-wide
                   text-gray-800
                   dark:text-white
                   md:text-4xl
                 "
               >
                 The best personal online shop
               </h1>
               <p class="mt-4 text-gray-600">
                 Shop for your personal effects at the Strapi eccomerce online tutorial
                 store. We sell only the best products with the best qualities.
               </p>
               <div class="mt-6">
                 <a
                   href="#"
                   class="
                     block
                     px-3
                     py-2
                     font-semibold
                     text-center text-white
                     transition-colors
                     duration-200
                     transform
                     bg-blue-500
                     rounded-md
                     md:inline
                     hover:bg-blue-900
                   "
                   >Make your first purchase</a
                 >
               </div>
             </div>
           </div>
        
           <div class="flex items-center justify-center w-full h-96 md:w-1/2">
             <img
               class="object-cover w-full h-full max-w-2xl rounded-md"
               src="https://images.unsplash.com/photo-1579586337278-3befd40fd17a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80"
               alt="apple watch photo"
             />
           </div>
         </div>
         {% include bestsellers.html %}
         {% include weekenddeals.html %}
        </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