Building a Shopify Shopping Cart From Scratch

Building a Shopify Shopping Cart From Scratch

I think web developers have gotten so caught up on the front end frameworks that they haven’t noticed just how simple building a website can be.

Let's start with Shopify ...

So let's take a look at what it would take to create a website on shopify and get it up and running.

Let's start by creating a ruff idea of a template and checking load times to get an idea of how different options affect website load times. 

Building a Shopping Cart

I’m going to open a terminal and I’m on Linux so I’m going to type cd Desktop to open my Desktop.

$cd Desktop

I’ll make a new folder inside the Desktop folder by typing.

$mkdir Turbo

I’ll change my directory into the turbo directory.

$cd Turbo

I’m going to make a couple folders inside this folder so we can break it up a bit so we will have an assets, cofig, layout, locales, and templates folder.

$mkdir assets config layout locales templates

I’ll then change directories again and go into the layout folder.

$cd layout

And inside the layout folder I’m going to create the main liquid document, liquid is Shoify’s template language.

$touch theme.liquid

I’ll then move back to my last folder by typing cd for change directory, two periods, and a black slash.

$cd ../

I’ll then change directories again and go into my newly created templates folder.

$cd templates

Inside the templates folder I’m going to create a couple liquid documents by typing.

$touch {article,blog,cart,collection.gift_card,list-collections,index,page,product,search}.liquid

I’ll then cd back out

$cd ../

I’ll open Sublime text and drop my new Turbo folder in.

Go into it and open the layout and just type “ht” and hit enter …

I’ve got everything I need to create a web document.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

</body>

</html>

Now … every line of code adds to the time it takes a page to load.

And every major corporation who cares about money, has seen how page speeds affect conversions.

For example …

  • Amazon said Every 100ms Cost them 1% in Sales.

  • Google said two milliseconds cost them 20% of their searches.

So at ground zero, right from the start we want to start by eliminating, slimming down, and speeding up our website.

Some of the base HTML code and some of what is written afterwards is done for the purpose of making it easier to understand.

For example I do not need to tell the browser that it’s “html”, it knows that.

So I’ll remove the <html> open and close tags.

<!DOCTYPE html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

</body>

And the browser can look at the code and know what goes in the head and in the body, so I can remove the head and body tags.

<!DOCTYPE html>

<meta charset="utf-8">

<title></title>

But the idea is to make the code as thin as possible and as a result it’ll be super fast.

But it also has to be optimized for the search engines and be compliant. Shopify is going to make all their templates AA compliant by the end of next year. Because there are people using tools to test websites and if they fail, they sue.

Because by law you have to make a business accessible to people with a handicap. And even though a website isn’t a physical business they are winning lawsuits.

And anyway ... it's better to make your website accessible to as many people as possible.

So we will make our AAA compliant.

Just to make sure you understand, we are making one of the fastest shopping carts online, as well as one of the most compliant, and SEO friendly.

It will be unlike anything your competition has.

<!DOCTYPE html>

<meta charset="utf-8">

<title></title>

Let's start with the body and let's start by adding a <div> element for a container for content. But it doesn’t have any effect on the layout until it's styled, so we need to add some class to our content and we can do that with the class element.

Then we will add a selector and call it grid-container.

<div class="grid-container">

And inside the grid-container I’ll add a topbar, for our phone number or a message. And then I’ll add a selector for styling and I’ll call it grid-box and I’ll use this one on all the elements we create for styling our content inside this area.

And I’ll add a topbar on this one for styling things specifically for this area.

<div class="grid-box topbar">

<p>Info bar</p>

</div>

And then I’ll add an area under the message for our logo.

<header class="grid-box">

<p>Logo</p>

</header>

And then I’ll add a mega menu. The problem with mega menus is that the more options you give someone the less likely it is that they will make a purchase.

However, at the same time you should be able to get to any page on your website within two clicks.

And since more people who come to the site are looking for a specific item, I think it's better to have a mega menu.

And I’ll put the mega menu inside the nav element.

<nav>

<p>Nav</p>

</nav>

I’ll add in a Hero image because images communicate 60,000 times faster than text.

And you’ve got .03 milliseconds to make a first impression.

So you've got to have an image-focused design.

Bold graphics that grab the user and pull them into the story.

A hero image is your elevator pitch.

It tells the website visitor what your purpose for being is.

You're looking for an image that shows your product, how it works, and creates an emotional connection that reinforces the call to action and increases a desire to click it.

It starts with an image of someone the same age and sex as your potential customers whose wearing, or using your product while looking at your call to action.

You design different images for different devices to help with load times.

The images have to be flawless and pull you in!

And you don’t want to use carousels or sliders because they slow down the site and kill conversions.

They …

1.) Cause Banner Blindness

2.) Divides user’s Attention

3.) Kill Conversions

5.) Are Not Built for Accessibility

6.) Get Low Click-through Rates

7.) Aren’t Mobile Optimized

8.) Have Too Many Options, And Overwhelm Visitors

9.) Take Control Away from You

Rather than beating users over the head with all of your offers at once, let them come across the offers naturally throughout your site.

1. More Choices = Bad User Experience

The more options you give, the more you distract users from yours and their desired goal.

WhirlPool tested it and went minimalist, eliminating all the secondary calls to actions and photographs.

2. It Increases Buyer’s remorse

The more choices you have, the worse you feel after you buy. Why? Because now all you can think about is how much better the other options may have been.

3. Depletion of ability to think

We are only allowed so many decisions a day, if our ability to make a decision is already depleted or if we understand that we have a limited number of decisions, we’ll just leave rather than depleting our ability to make important decisions later.

To compete today you need to be creating specific messages for multiple personas. Using previous interest you customize a user experience and show different hero images and call to actions for different personas.

But the idea is one Hero image, one call to action, one goal, per a page.

This is where we attempt to take control and point them in a direction.

So here is goes one large image at the top of the page, full-width, without white space.

It occupies the best real estate.

And it Demands Attention!

… and I’ll call this one hero.

<div class="grid-box hero">

Hero image

</div>

Now the main element is where the main part of your content goes and it will run beside the left menu.

<main class="grid-box">

<p>Content</p>

</main>

And then comes our left menu with the aside element. And here I’ll just reuse the same selector I used for main and just call it grid-box as well.

I can use the aside element for styling this one so I don’t need to add anything but grid-box.

<aside class="grid-box">

<p>aside<p>

</aside>

Then I’ll add one more for a call to action and I’ll call it teaser and I’ll just call this one.

<div class="grid-box teaser">

<p>

Call to action

</p>

</div>

Then I'll add a footer element with the same selector.

<footer class="grid-box">

<p>footer</p>

</footer>

</div>

The HTML controls the content and layout and the CSS modifies the design and display of the HTML using elements.

Now the fastest kind of CSS is inline and to run inline we just type style.

What we did above was set a “class” that we can now target with CSS code.

We will create a style tag and put all our css code inside the style.

<style>

Let's start by defining our grid areas.

The first will be topbar and I’ll hook it to the location on the html with the grid-area of topbar.

.topbar {

grid-area: topbar;

}

The first will be header and I’ll hook it to the location on the html with the grid-area of header.

header {

grid-area: header;

}

The first will be header and I’ll hook it to the location on the html with the grid-area of header.

nav {

grid-area: nav;

}

The first will be header and I’ll hook it to the location on the html with the grid-area of header.

.hero {

grid-area: hero;

}

The first will be header and I’ll hook it to the location on the html with the grid-area of header.

.team {

grid-area: team;

}

The first will be header and I’ll hook it to the location on the html with the grid-area of header.

main {

grid-area: main;

}

The first will be header and I’ll hook it to the location on the html with the grid-area of header.

aside {

grid-area: aside;

}

The next will be teaser and I’ll hook it to the location on the html with the grid-area of teaser.

.teaser {

grid-area: teaser;

}

The next will be footer and I’ll hook it to the location on the html with the grid-area of footer.

footer {

grid-area: footer;

}

Then I’ll style the grid container.

.grid-container {

I’ll give it a grid display.

display: grid;

I’ll define the placement of the grid areas and the order that they go in.

grid-template-areas:

"topbar"

"header"

"nav"

"hero"

"team"

"main"

"aside"

"teaser"

"footer";

I’ll give it a gap and some padding.

grid-gap: .5rem;

padding: .25rem;

}

If our landing pages aren't optimized for mobile it won’t be easy to use.

To have a responsive design, we have to make sure it looks good on cell phones, tablets, laptops, and desktop screens.

A media query lets you render content that adapts to different factors like screen size or resolution.

I’ll give two media queries for the grid container. This will allow it to adapt for different devices.

The first will be everything in one column for mobile

@media only screen and (min-width: 550px) {

.grid-container {

grid-template-columns: repeat(2,1fr);

grid-template-areas:

"topbar topbar"

"header header"

"nav nav"

"hero hero"

"team team"

"main main"

"aside ."

"teaser teaser"

"footer footer";

}

}

And the text will put the aside next to the main for the sidebar.

@media only screen and (min-width: 800px) {

.grid-container {

grid-template-columns: repeat(3,1fr);

grid-template-areas:

"topbar topbar topbar"

"header header header"

"nav nav nav"

"hero hero hero"

"team team team"

"aside main main"

"teaser teaser teaser"

"footer footer footer";

}

}

Now let's style the grid box with a border, font size and some padding.

.grid-box {

padding: .5rem;

}

And I’ll do the same for main, aside and footer and I’ll define background and text color along with the area in the HTML I want to target.

.topbar, header, nav, .hero, aside, main, .teaser, footer, .team {

background-color: #24272B;

color: whitesmoke;

}

And the final code looks like ….

<!DOCTYPE html>

<html lang="en" >

<head>

<meta charset="UTF-8">

<title>Rapid Prototyping</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="Example for rapid prototyping with CSS Grid Layout with focus on 'grid areas'.">

<style>

.topbar {

grid-area: topbar;

}

header {

grid-area: header;

}

nav {

grid-area: nav;

}

.hero {

grid-area: hero;

}

.team {

grid-area: team;

}

main {

grid-area: main;

}

aside {

grid-area: aside;

}

.teaser {

grid-area: teaser;

}

footer {

grid-area: footer;

}

/* Styles for the grid container */

.grid-container {

display: grid;

/* Styles for the placement of the grid areas */

grid-template-areas:

"topbar"

"header"

"nav"

"hero"

"team"

"main"

"aside"

"teaser"

"footer";

grid-gap: .5rem;

padding: .25rem;

}

@media only screen and (min-width: 550px) {

.grid-container {

grid-template-columns: repeat(2,1fr);

grid-template-areas:

"topbar topbar"

"header header"

"nav nav"

"hero hero"

"team team"

"main main"

"aside ."

"teaser teaser"

"footer footer";

}

}

@media only screen and (min-width: 800px) {

.grid-container {

grid-template-columns: repeat(3,1fr);

grid-template-areas:

"topbar topbar topbar"

"header header header"

"nav nav nav"

"hero hero hero"

"team team team"

"aside main main"

"teaser teaser teaser"

"footer footer footer";

}

}

/* Styles for the grid items */

.grid-box {

padding: .5rem;

}

/* Styles for the HTML elements */

.topbar, header, nav, .hero, aside, main, .teaser, footer, .team {

background-color: #24272B;

color: whitesmoke;

}

</style>



</head>

<body>

<div class="grid-container">

<div class="grid-box topbar">

<p>Info bar</p>

</div>

<header class="grid-box header">

<p>Logo</p>

</header>

<nav>

<p>Nav</p>

</nav>

<div class="grid-box hero">

Hero image

</div>

<main class="grid-box">

<p>Main</p>

</main>

<aside class="grid-box">

<p>nav</p>

</aside>

<div class="teaser">

<p>

Call to action

</p>

</div>

<footer class="grid-box">

<p>Footer</p>

</footer>

</div>

</body>

</html>

And now we are going to copy and paste and split this page up and add some of this information to the index page inside our template folder.

Free shipping when you spend $50 or more.

Shop Now