The Navbar

In this chapter, we’ll clone the Shopify website’s homepage using Bootstrap 4. Since this layout is quite tall, we’ll look at screenshots of each section separately, as we build it. Altogether, there are seven sections on this home page. Here is the HTML structure for the official Shopify website:

• The navbar.

• The "Hero" section (we usually call it jumbotron in Bootstrap).

• The "Showcase" section (including the heading and the start, sell, market, and manage subsections).

• The "Support" section (a simple container with three columns).

• The "Merchants" section (i.e., “a success story” section).

• The "Signup" section (the “Start free trial” call to action).

• The footer area (with numerous links).

Let’s start building our Shopify clone!

Navbar

To begin, we’ll copy/paste a navbar from Bootstrap 4 docs. We’re copying the navbar, which has an image for navbar-brand on the left.