Intro

I was tempted to call this post “THE 5 STEPS OF BUILDING A SUCCESSFUL ONLINE STORE” because that’s what people want to hear, right? But a successful store is run, not built. It’s the ongoing work of how you fine-tune your site, treat your customers and market your products that will determine success. But what I can share with you is my personal approach to building a quality site on a good platform … the rest is in your hands.

These days small business owners are looking to build their online store themselves. If that applies to you and you are computer savvy enough to do it, then hopefully this guide helps you build a better site. However, if you are looking to hire a web designer like myself, then typically the jobs that will fall to you are: organising web copy and images, adding products, answering lots of questions, and respecting that your web designer knows what they are doing and has your best interests at heart ;-)

Whatever the case may be, I’ll do my best here to outline the steps I go through when I build an online store and throw in as many helpful tips and links as I can. So let’s get into it!

Step 1

Choosing your platform and template

When I started building online stores 10 years ago Shopify was by far the best option available, but Squarespace joined the party when they finally made their e-commerce option available to New Zealanders a few years ago. There are countless other platforms out there, but personally, having dabbled with the others, I prefer Shopify and Squarespace.

So which should you choose, Shopify or Squarespace?

Overall I prefer Squarespace because they have a drag-and-drop interface made up of ‘Content Blocks’ which can be freely arranged to build any page on the site. So if you are a visual person (and let’s face it, who isn’t?) and are willing to put in some time to learn how to use the drag-and-drop system, then this is simply going to be a more intuitive way to build and maintain a website by yourself.

Squarespace content blocks can be freely arranged on any page with their drag-and-drop layout system

On Shopify there’s a customisation area where you can add and rearrange content, but typically this is focused on the three following page types: Home / Collections / Products. This results in great looking pages that rival anything on Squarespace, however when it comes to other pages like ‘About’ and ‘Delivery’ you are typically stuck with very basic tools to build the page (similar to adding content to a word document - see below).

Shopify has drag-and-drop add-ons (Shogun and PageFly) but they are not as fully integrated as Squarespace and they aren’t free … which brings us to the Shopify App Store.

The Shopify App store is chocka with apps which enable you to quickly add-on things like a customer loyalty program or connect a live help desk without needing help from a developer. So if you have some specific features in mind I recommend you explore what each platform can and can’t do.

It’s worth noting that Squarespace has recently launched Squarespace Extensions which is the same idea as Shopify Apps but only has a handful of integrations at present. However, Squarespace also has plenty of built-in features, some of which Shopify only offers through add-ons (usually at a cost).

TEMPLATES

Templates are just the starting point of your website design. Yes, they look really awesome when you browse through them, but there’s a reason for this: they always contain amazing photography! Keep in mind that when you strip away the beautiful imagery you are left with the key features that the template offers … these are what really matter and are what you should be basing your decision on (or let a designer like me make the most suitable choice for you).

Shopify themes (some are free, others cost $180 USD)

Squarespace templates (all free)

IMPORTANT INFO ON SQUARESPACE TEMPLATES

Squarespace have just rolled out a huge change and all their templates are now version 7.1. I’ve started to familiarise myself with it, but it’s a whole different kettle of fish and I’m not entirely convinced it’s better than the old version just yet.

UPDATE: Sep 2021. Squarespace 7.1 just keeps getting better and better! So I do now recommend 7.1 over the older templates.

If you’re completely new to Squarespace you might as well start on the new 7.1 templates, but if you want to compare the two versions or just explore the ‘old’ range of templates, you can find them at the bottom of the templates page:

PRICING (as of January 2020)

These are Shopify and Squarespace’s monthly prices (in USD). They both give a discount for choosing annual plans.

Shopify pricing - learn more here

Squarespace pricing - learn more here

AFTERPAY / LAYBUY

One final factor to consider when choosing your platform is that currently Squarespace does not integrate with payment platforms like Afterpay and Laybuy, which allow your shoppers to buy the product from your shop right away, but then pay it off in installments. So if this is important to your business you should go with Shopify.

UPDATE: Squarespace now supports AfterPay. Woohoo!

Step 2

preparing content / General setup & design

This ‘step’ is really more of a ‘phase’ and can take anywhere from a week to a month or longer depending on the scope of the website. Essentially it breaks down into two main areas:

The designer doing the general setup of the site, adding draft content and establishing a ‘look and feel’.
The client organising their web copy and products if they haven’t already done so (and also giving guidance and feedback on the website development).

* Obviously if you are a small business owner who is tackling the website on your own then you will be handling both of these aspects yourself! But from here on out I’ll be assuming these tasks are divided between designer and client.

In some scenarios almost all the text and images may be migrated over to the new platform, but more often than not it’s a chance to refresh everything … or it’s somewhere in the middle. If it’s an “all new” website then there’s no baggage to hold you back, but a blank canvas can be intimidating too!

WHAT YOU NEED TO SUPPLY THE DESIGNER

Deliver the web copy in a live document, such as Google docs. I prefer this to receiving countless email attachments as things can get messy quickly. “Sorry but which version is the latest?”.
Place images in a Google Drive or Dropbox folder that can be shared online, rather than as a series of separate email attachments.
If it’s a migration job and the old website has a large inventory, then it might be an advantage to export the inventory data as a spreadsheet. I’ll talk about this more below.

In the best case scenario I receive all this content at the start of the project but typically the content is delivered throughout project development, in which case placeholder text and images will be used as needed. I use a ‘Lorem Ipsum’ generator plugin for the placeholder text and Unsplash for free placeholder images.

ORGANISING PRODUCTS

If it’s a migration job then it’s likely you will want to find a way to export product information from the old platform and reformat this to be imported into the new platform (typically as a CSV spreadsheet). Sometimes this step is worth it, other times it’s more trouble than it’s worth and it’s better to just muck-in and add the products one-by-one. It’s a tedious task, but it gives you a chance to ensure that each and every product is setup correctly and reads well.

If there’s no product migration then you should jump straight into adding the products to the website (detailed in ‘STEP 3’)

LOGO / BRANDING

From my experience this usually falls into three scenarios:

The business has an established look and feel (logo, fonts, colours) and it’s the designer’s job to bring this over to the new site.
There is an established brand and logo, but it’s outdated and needs a refresh. An example of this would be a logo which was designed before ‘responsive’ web design and is unsuitable for mobile screens.
It’s a new business and there’s no branding or logo of any sort.

When I do a logo for a client I prefer to do it as a font-only logo. This means it scales perfectly at different screen sizes (unlike an image file) and can automatically show up as light on dark backgrounds and vice versa.

Here’s an example:

Light logo: paloma-demo.squarespace.com/about

Dark logo: paloma-demo.squarespace.com/episodes

GENERAL SETUP INCLUDES

Purchasing and setting up the domain name if needed (you can do this directly through Shopify and Squarespace or buy it from a third party. If you want to claim GST on it, buy it from a NZ company)
Selecting typography
Establishing a colour palette
Remaking the logo if it’s low resolution or not suitable for modern web design
Setting up the menu/navigation (this is always bound to change during development as you expand or reduce the number of products and pages)
Setting up shipping and tax rules (you should consider if you can make shipping ‘Free’ and build that into your prices)
Adding a merchant processor to accept credit card payments (it’s worth noting here that Squarespace only connects with Stripe or Paypal, while Shopify is more flexible).

FIRST DRAFTS

During this early design phase I like to do a first draft of the homepage, collection page, product page, about page and contact page. They are likely to change, but it’s better to have something for the designer and client to critique early in the process, rather than just talking about what the design should look like. Some designers like to do mock-ups in Illustrator or Photoshop, I prefer to just get straight into doing the real thing as it restricts me to work within the limitations of the platform.

KEEP AN OPEN MIND

During this phase nothing is set in stone. So you and the designer both need to be flexible and open to ideas and change … which can sometimes be easier in theory than in practise!

Step 3

Adding content & products / polishing

For the sake of this article I’ve tried to divide things logically into 5 steps, but realistically both content and products are going to be added and changed throughout the entire web development process. More often than not the content wasn’t delivered in the early stages and as I near the end of all the structural work being done, I find myself copying and pasting more of the “real” content over my “placeholder” content.

In this situation, I can either continue to do all of this myself or I can give my client access to the site so they can replace or tweak the web copy themselves.

ADDING PRODUCTS

I tend to add the first half-a-dozen products myself so that I establish a good system specific to my client’s needs and then I will document this as either a “how-to” style YouTube video for my client or as an email with annotated screen-shots.

Of course all platforms also have their own generic support documentation:

Shopify - importing a product inventory

Shopify - adding products

Squarespace - importing a product inventory

Squarespace - adding products

IMPORTING AN INVENTORY CSV

If you are migrating from a store with a large inventory you may prefer to do a bulk import. To do this you need to determine if your current platform allows you to export your inventory as a CSV spreadsheet. So check out their documentation or contact their support. Once you have the CSV it can be imported into Shopify or Squarespace with the following methods:

Shopify - importing products with a CSV file

Squarespace - importing products from a .csv

After the import it’s likely you’ll still need to go through the products one-by-one adding images and ensuring everything is correct.

TAGGING / CATEGORISING PRODUCTS

Tags can be a source of great confusion. I’ve had clients go in and put as many tags as possible on a product because they thought this would help with SEO. It doesn’t. Tags and Categories are there for sorting purposes.

In this example the category is: ‘SOCKS’, and the tag is: ‘STRIPED’.

Here the shopper is viewing the ‘SOCKS’ category.

Then the visitor can use the drop-down to filter the socks by their ‘STRIPED’ tag.

Tags can also be used in other scenarios, like in the customer database where you might tag a customer as ‘Gold’, which allows them to benefit from a special discount.

You can read more about this fascinating subject here:

Shopify - creating and using tags

Squarespace - categories and tags

POLISHING THE DESIGN vs SCOPE CREEP

As you get closer to going live the design will have evolved and sometimes this leads to going back to some pages and updating them to make everything cohesive. Sometimes the design developments have been so significant it means completely overhauling some pages.

Both the designer and client should be aware of ‘scope creep’. This is when new features or pages are added by the client that weren’t agreed on in the initial project outline. It’s not fair of the client to do this without expecting to pay for it. Of course some revisions are normal.

If communication between designer and client has been honest and open from the start, then chances are you will both know when new content is worth it and agree whether an additional cost is warranted. Most importantly don’t let things get ugly. Stay calm, stay friendly and continue to work together towards the same goal.

WHEN IS A WEBSITE FINISHED?

It’s good to keep in mind that a website is never really “finished”. Even after you’ve added all the content and products, it’s healthy to embrace that a website will grow and change over time, so it’s okay to launch the site even if the content isn’t “perfect”. Just do your best, get it online (covered in STEP 4) and then continue to refine it later (covered in STEP 5).

Step 4

Final steps before going live

TEST THE ORDER PROCESS

Ensure the order process is running as it should. You can either create $1 test products or just refund yourself a full priced item (something else you should know how to do too anyway!). Also check that the connected merchant account (e.g. Stripe / PayPal) is collecting the money and paying out to your bank account correctly.

CUSTOMER EMAIL NOTIFICATIONS

Make sure the email notifications (“Thanks for your order…” etc) have been customised as required. This is an area where some businesses go all out and really customise these heavily. At the very least they should contain your logo.

Shopify - edit notification templates

Squarespace - customise emails

LOOK AT THE SITE ON DIFFERENT DEVICES

The design must be tested at multiple screen sizes (desktop / tablet / mobile) and design tweaks made to ensure the site behaves nicely across various devices. This is mostly automatic thanks to the design of ‘responsive templates’, but at times additional code can be required (see ‘media queries’).

SEO

Don’t get talked into paying some crazy amount to a so-called ‘SEO expert’! Both Squarespace and Shopify sites rank well in search engines, especially if you follow their guidelines:

Shopify SEO overview

Squarespace SEO checklist

URL REDIRECTS

If the website is replacing an old one, URL redirects from the old site to the new site MUST be put in place. This ensures that old links will point to their new equivalent page.

e.g. /products/socks/striped-socks.php now points to > /shop/striped-socks

Learn more here:

Shopify - URL redirects

Squarespace - URL redirects

DOMAIN NAME CHANGEOVER

If you’re building an all new store this doesn’t apply to you. But if are replacing an old store with a new one, then before going live, the domain name must be made to point away from the old site and over to the new one.

e.g.

yourwebsite.co.nz > points to > Magento (your old host)

Changes to:

yourwebsite.co.nz > points to > Squarespace (your new host)

One thing to keep in mind is this change isn’t instantaneous and can take up to 24 hours or more. During this time some visitors will continue to see the old site, while others might see the new site (depending on their location in the world).

If you don’t understand domains and DNS records then leave this step to someone who does! But if you dare, here are the guides:

Shopify - verify a domain with third-party services

Squarespace - DNS records for connecting third-party domains

EMAIL ADDRESSES

If a new email address is required (e.g. ‘hello@yourwebsite.co.nz’) you need to set that up. I like to use Google Mail (G Suite) accounts. This can be setup inside Squarespace, but must be done as a separate step in Shopify.

Squarespace - Signing up for G Suite

CONTACT FORMS

Double check that all contact forms are pointing to the correct email address (so easy to forget!).

DISABLE THE SITEWIDE PASSWORD BEFORE GOING LIVE

The sitewide password protects the site from public access while it’s in development, so make sure it is disabled when you want to go live or visitors will be meet with an “Enter your password” screen!

Shopify - remove password

Squarespace - remove password

SUBMIT SITE TO SEARCH ENGINES

72 hours after going live the site should be submitted to Google and Bing for indexing. While this won’t make your site magically rank higher in search results it does mean your site is indexed sooner than it would if it was left to happen automatically by search engines.

Squarespace - Verifying your site with Google

Squarespace - Verifying your site with Bing

Shopify - Verifying your site with Google

(Shopify don’t offer a Bing specific guide but it’s the same principle as doing it on Squarespace.)

Step 5

Running and marketing your site

I’m not a marketing expert and I don’t do marketing for my clients. However I did help run a successful online clothing store with my wife for many years and learnt a few things along the way…

YOUR SEARCH RANKING / GOOGLE ADS

There are some ways you can influence your ranking in Google but most of your work to drive traffic to your site should not rely on this giant to look kindly on you.

If this is an all-new shop and you have no previous Google ranking you may never appear on page 01 of Google search results for your desired search terms. While you should eventually appear in search results for your business name, you are less likely to appear for generic search terms like “socks NZ” because there’s a million other shops who’ve been around for a long time who rank well for those generic search terms.This is especially true if you are in a competitive market.

However sometimes your product might be so niche that you have a higher chance of appearing in page 01 search results. The point is to have realistic expectations around your search ranking.

Google Ads can theoretically help.

Paying for a Google Ad is a method to essentially force your way to the top of search results. This could be put in place to help with initial traffic and build up your audience, which will then - hopefully - lead to you getting a higher organic ranking.

Learn more about Google Ads

KEEP FINE-TUNING YOUR WEBSITE COPY

Whether it is your welcome message or your product descriptions, the better the message reflects who you are, what you’re selling, and what your point of difference is - the more you’ll stand out from the crowd. Don’t be afraid to give your site some personality!

OFFICIAL SUPPORT & OTHER OPTIONS

If you have a question, your first place to look for an answer should be the official help sites provided by Shopify and Squarespace.

Shopify Help Center

Squarespace Help

Don’t just be a lazy client and ask your web developer, try and find the answer yourself first. If you can’t, then by all means, reach out.

Also consider that YouTube is full of ‘how-to’ videos.

LEARN FROM YOUR WEBSITE ANALYTICS

Both Squarespace and Shopify have built-in analytics or for more in-depth analytics you can also connect a Google Analytics account (personally I’m happy with the built-in features).

Review your analytics to see what pages and products are popular, what search terms people are using to find your site and where those people are coming from, and then use this information to fine-tune your site and inform your marketing. This is a HUGE subject and if you are interested you’ll find many, many blog posts out there on the interwebs.

KEEP A BLOG

A blog is a great way to not only keep your website ‘alive’ in the eyes of visitors, but it also gives search engines new content to index, which can positively impact your search ranking. It also gives you a new link to share on social media.

DIRECT MARKETING

If you’ve already got a database of customers, you are one of the lucky ones because this means you can benefit from direct marketing to them. You already know they like your product, so keep marketing to them!

Squarespace and Shopify both have built in email campaign managers (at an additional cost) so you don’t have to neccesarily use an external app like MailChimp.

SOCIAL CHANNELS

Love it or hate it, social media is a powerful tool. It’s not right for every business, but done right you can reach the people who are looking for what you sell and push it under their noses in the nicest way possible. You can do this for free to an extent, but these days social media platforms limit your reach and make you pay to reach more punters.

PRINT ADS

Sometimes a good old fashioned print ad, in the right magazine, aimed at the right demographic can bring in an influx of visitors and hopefully generate some decent sales. The only downside is that, unlike online ads, you can’t specifically tell if people have visited your site from seeing the print ad, but if you see a spike in traffic when the ad comes out, then at least you know it’s working.

DUNEDIN ONLINE

This is 100% a plug for my other business! If you happen to be a Dunedin (NZ) based online business then you should be on Dunedin Online. A basic listing is free or it’s $10 per month with added benefits. The concept is that as a small business may struggle to be found in search results, but by being part of the Dunedin Online community you increase your exposure. It’s also a good example of a quality inbound link to your site (something that Google likes to see when ranking your site).

A BILLBOARD IN THE JUNGLE…

Most importantly, remember the unfortunate truth of a website. Without hard work, fine-tuning, updates, magical web dust and marketing, a website is just a billboard in the jungle...

The rarely discussed truth is that building a fantastic looking website with awesome products doesn’t equal website traffic. Getting visitors and converting them to a sale is hard work! But if you have a great product you believe in, keep chipping away at all the above and as your website traffic increases your sales should increase too.

Best of luck!

Get in touch

NOTES

01: This is just my way of building a site. Go ahead and do it however you like!

02: I am not affiliated with Shopify, Squarespace or Google and this is not a sponsored blog post.

The new Squarespace 'Fluid Engine'

Cool new features on Squarespace

Dunedin Online - supporting local online shopping since 2013

The 5 steps of building an online store on Shopify or Squarespace