Shopify Landing Page Clone - Tutorial
Tags: html, css, design, ux
Published: 2022-09-10 10:57:57

#### Table Of Contents
[Quick Intro](#quick-intro)
[Folder Structure](#folder-structure)
[First Section( The Header)](#first-section)
[Second Section( The Waves)](#second-section)
[Third Section( The Features)](#third-section)


---


## Quick Intro <a name="quick-intro"></a>

Before I write anything else, I need to mention a couple of things. **_Firstly_**, I'm new here, so bear with me. **_Secondly_**, if you find videos more educational I have a YouTube [tutorial](https://youtu.be/3Bo3jaafjPg) for this project, click here :).

Okay, so today I'm going to teach you how to build a Shopify Landing Page clone. And the reason I've built this is to showcase the **first rule of UI**. `Simple & Consistent`.
Think of all the _apps/websites_ you've used that have left an impression on you. They all( some not) followed this simple rule.

A `Simple & Consistent` UI is good because of the following reasons:
1. It's not overwhelming( which can be scary to new users)
2. Provides a sense of familiarity( which makes users come back)
3. It's easier to see the important parts

Okay, so now that you understand the underlying factor of why this is( or rather was an) appealing website for me, let's get to the code.


---


## Folder Structure <a name="folder-structure"></a>
Open up your editor, and create the folders and files you see on the image( shop-vector.png can be downloaded from my GitHub):
![Folder Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5dmjym2dkmbk3ey5tvkn.png)

After you create the folders, create the basic skeleton of an `HTML` page( don't forget to reference the `CSS` file and bootstrap links):
```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="./css/index.css" />
    </head>
    <body>
        <h1>Hello World!</h1>
        
        <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
        crossorigin="anonymous"
        ></script>
    </body>
</html>
```

And over at your CSS file, set the basic rules:
```css
body {
  margin: 0;
  padding: 0;

  font-family: "Roboto", sans-serif;

  color: #000000;
  background: #ffffff;

  overflow-x: hidden;
}
```


---


## First Section( The Header)<a name="first-section"></a>
Just below your `body` tag and the following code:
```html
<section class="green">
    <h1 class="title">Sell Online With Shopify</h1>
    <p class="sub-title">Trusted By Over 1,700,000 Businesses Worldwide!</p>
</section>
```

And in `index.css` add:
```css
section {
  display: flex;

  flex-direction: column;
  align-items: center;

  min-height: 200px;

  padding: 70px 20vw;
}

.green {
  color: #ffffff;
  background: #08855e;
}
```

The (CSS )code inside `section` takes care of aligning everything where it needs to be. And the `.green` takes care of the colors. Now you have:

![Progress](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6v0t5pgq673w78028axb.png)

We're almost done with the first section. To finish it off add the following code, under the `p` tag( in the `index.html` file)
```html
<div class="container text-center">
  <div class="row d-flex justify-content-center">
    <div class="col col-lg-4">
      <div class="input-group-lg">
        <input
          type="text"
          class="form-control"
          placeholder="Enter Your Email Address"
          readonly
        />
      </div>
    </div>
    <div class="col col-auto">
      <button class="btn btn-dark btn-lg" type="button">
        Start Free Trial
      </button>
    </div>
  </div>
  <div class="row d-flex justify-content-center">
    <div class="col helper-text">
      <p>
        Try Shopify for free 14 days, no credit card required. By 
        entering your email, you agree to receive marketing emails 
        from Shopify.
      </p>
    </div>
  </div>
</div>
```
**_Quick note_**: every class used on the code above, we're bootstrap classes, i.e. we don't need to use CSS

Now we're left with this:
![More Progress](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/27l05ddz1tx5ta8o2yzm.png)


---


## Second Section( The Waves) <a name="second-section"></a>
For a lot of you, this is probably the part you've been waiting for the most( I know some of you came for the waves).
To create the waves, we will use a website called [shapedivider](https://www.shapedivider.app/).

You can immediately see some values there, that you can change( feel free to experiment, you don't have to use the same wave as me), but I'm just going to paste in the following values:

![ShapeDivider Values](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o0fpkuwaivgeh80c7cl0.png)

Ander after, you are satisfied with your wave, press the cloud button, and you'll see this screen:
![ShapeDivider Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vj6cyrtbgn8tdr934xy6.png)

Click the `Copy HTML` button, and paste your `HTML` code under your `section .green`. Then click the `Copy CSS` button, and paste your `CSS`. Don't forget to change, `position: absolute` to `position: relative`

Now, you have:
![Almost finished with the project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovxdboe4mxm1ik10x4tr.png)

Now, we need to add the image( you can download it from my GitHub).
Add the following code under the code for the waves :)
```html
<div class="vector-img">
  <img src="./img/shop-vector.png" />
</div>
```

And add this to your `CSS file`
```css
.vector-img {
  position: absolute;

  margin: -30vh 35vw;

  z-index: 1;
}
```
This ensures that the image, is around the center of the website, and `z-index: 1;` makes sure that it's( the image) always on top of everything.


---


## Third Section( The Features) <a name="third-section"></a>
We're almost finished. To do the features, we're going to use `Bootstrap Icons`. So, add the following link before `</head>`
```html
<link
 rel="stylesheet" 
 href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"
>
```

We're going to use these 3 icons:
```html
<i class="bi bi-window-sidebar"></i>
<i class="bi bi-cash"></i>
<i class="bi bi-people-fill"></i>
```

And add the following code under your <div class="vector-img" />
```html
<section>
  <div class="container text-left">
    <div class="row">
      <div class="col-6 col-md-4 features">
        <div class="d-flex justify-content-left align-items-left">
          <i class="bi bi-window-sidebar"></i>
        </div>
        <h6 class="features-text">Customizable Templates</h6>
        <p>Free website designs to launch your store quickly and
easily.
        </p>
      </div>

      <div class="col-6 col-md-4 features">
        <div class="d-flex justify-content-left align-items-left">
          <i class="bi bi-cash"></i>
        </div>
        <h6 class="features-text">All In One</h6>
        <p>
          Shopify takes care of everything from marketing and payments to managing money.
        </p>
      </div>

      <div class="col-6 col-md-4 features">
        <div class="d-flex justify-content-left align-items-left">
          <i class="bi bi-people-fill"></i>
        </div>
        <h6 class="features-text">A Safe And Efficient Platform
        </h6>
        <p>
          More than a million users trust Shopify to manage their online stores.
        </p>
      </div>
    </div>
  </div>
</section>
```
The code above makes sure that all the features are aligned properly and in the right place, now we just need to add some CSS
and we're done.

Paste the following code in your `index.css` file:
```css
i {
  font-size: 3rem;
  color: #08855e;
}

.features {
  margin-top: 12vh;
}

.features-text {
  font-weight: bold;
}
```

We're finally done! Here's the result:

![Project Finished](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/51de56j9000uo4txpmf6.png)

Hope you enjoyed this. If you liked this, don't forget to follow me.
Links to my socials:
{% embed https://github.com/24YoungMamba %}
{% embed https://medium.com/@y0ung.m4mba %}
{% embed https://youtube.com/channel/UCPffn2lk0kj8bHYkEcWthfA %}
{% embed https://tiktok.com/@codingnetworks21 %}
{% embed https://twitter.com/CodingNetworks_ %}