Great design is invisible yet it influences your actions to go down a
certain path, to reach a specific goal.
Whether you're designing an online store or just getting started, in this video
I'll be showing you how to effectively design your e-commerce store using
the same processes and best practices
successful designers follow when creating aesthetically beautiful
and functional Shopify stores.
My name is Stephan, and for the last seven plus years, I've been designing e-commerce
experiences on Shopify, working with industry leading brands such as Nestle
Canada, Unilever Global, as well as local small businesses making a huge impact.
The truth is, designing an experience can be a never ending
circle of ideas and tasks.
Without structure designing your online store can feel like you're
stuck in the most complicated maze with no exit in sight.
That's why I strongly recommend defining an MVP first.
It stands for minimal viable product and to break it down further, it's the least
amount of work that needs to be done in order to first launch your Shopify
store, collect feedback, and then iterate on improvements for your online store
based off that feedback.
Don't feel bad or discouraged to launch your first store with the bare minimum.
If you look at a store like nike.com, Nike had a very bare bones store and
slowly started making improvements based off of customer feedback to
what is now an industry leading brand and shopping experience.
I've used a tool called Way Back Time Machine to look into
older versions of websites.
You can easily check out any company's past website history, which helps
you gain perspective and insight.
So don't compare your day one to another brand's third year in business.
Once you engrave the term MVP into your mind, I want to go over a few
principles of modern e-commerce design.
First is trust.
Trust is hard to earn, but by adding elements like a contact page for support
inquiries or a visible return policy will help heavily reduce purchase hesitation.
Also, leaving the powered by Shopify link in the bottom of your footer can
help build trust with customers who are familiar with purchasing products
or services on a reputable platform.
Second is visual appeal.
Your customers can't physically hold or feel the product they're interested
in buying, so this means they heavily rely on strong visual appeal to
persuade their purchasing decision.
Having strong product photography that easily portrays and communicates the
value of a product or service is a must.
You'll notice a company like Apple does this very well with their products.
You can see how the Apple watch features different users from
different demographics and quickly portrays how their product
provides those customers value.
A simple, yet effective color scheme can help persuade an action.
You want a customer to take.
If you put a green button beside a red button, typically you'll find users
tend to click the green button more because the color green is associated
with the action go, while the color red would usually symbolize stop.
When choosing a color scheme for your online store, try to
keep the color palette minimal, especially when starting off.
Here's some great ways you can find color schemes for your online store.
One, Dribbble.
You can search e-commerce blue and get served amazing e-commerce sites
that have incorporated the color blue.
Or Canvas Color Generator.
I'm a big fan of how users can search through color palettes just
with keywords with typography.
It's important to make sure you define your hierarchy.
Keep your body font style simple and easy to read.
When it comes to your headings, you can be a bit more adventurous
with the font style you choose.
As a beginner, it's easier to manage two different font styles.
Third is form.
Merchants at times, forget their online store has a higher chance of
being viewed on mobile than desktop.
In the modern day of social media, it's common to find brands pushing
their content on Instagram or Tik TOK, which are primarily mobile apps.
But luckily with Shopify theme customizer, which allows you to customize your
Shopify store, you can preview your store both on desktop and mobile.
These principles will be the foundation
as you start to build your inspiration before designing your store.
Inspiration is the backbone of any good design and I want you to start off with
collecting inspiration and formatting that inspiration in what's called a mood board.
A mood board is a collage of ideas, images, colors, fonts, that
will serve as your inspiration.
And here's a simplified example of a mood board I created for a previous
client called Black Toe Running, a local leader in running related
goods and community run clubs.
You'll notice that we've defined font choices, color schemes,
product, and lifestyle imagery.
That will be a starting point on how the site will look and feel.
Consistency is a key to effective design.
So moving forward, your mood board will be your Holy grail for referencing the
look and feel of your online store.
One of the great things about Shopify is they heavily reduced
the barrier of entry when it comes to designing your online store.
Whether it's generating a logo,
finding lifestyle imagery, or choosing a starter theme that can be
customized, they have you covered.
Creating a logo is a whole video in itself.
However, if you've never created one in the past an amazing shortcut to
creating a logo is taking advantage of one of my favorite tools, Hatchful.
It's a logo generator built by Shopify, that will give you a variety
of polished logo options, based off of industry, visual style and more.
It's extremely important that your logo follows the elements on your
mood board, like color scheme and typography to ensure a consistent
and cohesive brand experience.
Another great tip for creating a personalized logo is to try out Canva, a
free design library for creative assets.
Their slogan: design made easy.
It's one of my personal favorites and it's one of the easiest to
learn design tools that I frequently use sourcing high quality imagery.
Lastly, before we start working on a Shopify store, I want to make sure
you've built a library of imagery that will catch your customer's
attention and reflect your mood board.
Typically, the companies I've worked with will supply imagery.
However, if you don't have access to your own photos to start, you can
take advantage of another amazing design tool by Shopify, like Burst.
Burst is a free photo library that you can use for your online store
that is royalty free and jam packed with top-notch lifestyle imagery.
If you can't find what you're looking for, I'd also try Unsplash, which is
another amazing library of royalty free images uploaded by incredible
photographers from all over the world.
And with these tools, I'm sure you'll be able to find
images that reflect your brand.
Now we're going to go ahead and choose the bones of her online
store by choosing a Shopify theme.
Luckily with Shopify, there are a ton of amazing themes, both free and paid, that
you can find in the Shopify theme store.
If you haven't already, you're going to want to sign up for a
free 14 day trial with Shopify.
There's no credit cards required and this will allow you to follow along
with this tutorial and give you a full two weeks to build your online store.
Just click the link here to get started.
Before we choose a theme, there are few things we need to review
first that will help choose the best theme to get started with.
One, what is your budget?
Prices for themes vary from free to $200.
If you're just getting started with a small budget, you still
have a lot of great options.
However, the saying remains true.
You do get what you pay for.
What I mean by that is paid premium themes tend to have more features
and functionalities such as collection filtering or mega menus.
These features can save you a lot of time as opposed to hiring a developer
down the road to build it out.
How many products do we plan on selling?
There are themes that cater well to catalogs of one item, 50
item, even a thousand plus items.
When navigating the theme store, you can choose under the header number of
products, single product, small catalog, medium catalogs or large catalogs.
This will give you a great starting point to see what options are available based
off of how many items you plan on selling.
Number three,
what industry are you a part of?
There are themes that are designed specifically based on industry.
For example, Streamline.
Streamline works really well for active lifestyle brands with features like video
heroes and large image call to actions to boldly communicate your brand's messaging.
Express is a minimal Shopify theme for restaurants that displays your
products and menu items, making it easy for hungry customers to order online.
There are ways of finding third party themes outside of the Shopify theme
store, but be aware that Shopify may not support them since they do not go
through their crucial theme testing team.
This may cause you issues, especially as you continue to grow your business.
Once you've chosen your theme to get started with you can start customizing
the look and feel of your store.
To do so
in the Shopify dashboard, you can access the theme customizer by navigating to
online store and clicking, customize on the top right corner of your theme.
Once we're in the customizer you'll notice theme settings
below your homepage options.
Once we click it, you'll notice you can start one, updating your color
scheme based off of the color palette you've chosen and two, updating the
heading and body typography based on the font choices you've picked.
Now note, every theme will have its own set of configurable options, but color
and typography will typically be the same.
Next we're going to be talking about your homepage, which is usually the first
webpage your customers will interact with.
Stats typically state that you have three seconds to make a strong impression to
your target audience, to capture their attention to learn more about your
brand and explore your product catalog.
Here are three impactful tactics to ensure you're making the most out
of your customer's first impression.
One, ensure you've entered clear messaging to give your audience the best
idea of what they're getting themselves into, as well as a visible call to
action to entice customers, to visit a specific page collection or product
that prioritizes your online store.
Make sure your call to action is above the fold.
Meaning a user doesn't have to scroll down the page to find it.
Short and simple copy that inspires action always works best.
A great example of this is Chubbies.
Their homepage communicates they sell swimwear and entices their customers
to purchase an item with a buy 2 save 10, which not only gets a customer
excited to shop, but increases the value of a single purchase.
Number two, ensure your navigation is simplified with
the highest priority items.
A great example of this is Brightland.
You'll usually see things like a specific collection, an about
us or history of the brand.
And don't forget to include an easy way for customers to contact you.
In case you need support regarding a purchase related inquiry, question about
return policy or shipping to name a few.
Number three,
if you're working with a small or medium sized catalog, display your
bestselling products on your homepage.
This will give customers an idea of popular products that are
being purchased, which helps reduce their purchase hesitation.
Arguably more important than your homepage is your product template.
This is where a customer will learn the most about an item and this is
the closest a customer will get to interacting with your product before
they click add to cart or buy now.
Customers tend to hesitate when making a purchase, so here are a few design
related elements that can help heavily reduce hesitation along with examples.
Number one, strong description and imagery.
A great tactic to writing strong product description is to ensure
you share what the benefits are by purchasing your product.
That way your customers can understand what they'll really get from
purchasing your product and not just explain what the product actually is.
Clearly identifying the "why" eliminates any questions the buyers might have
before adding it to their cart, along with your product description.
The easiest way to communicate trust is with product photography.
Your buyers want to see what your product looks like and how it can be used.
If you're a beginner, I recommend at least having one photo per product, but make
sure you're featuring your product on a white background and try to keep that
consistent through all of your products.
If your theme allows it, try to out a video featuring your product
in a lifestyle environment.
This will help communicate the value of your product and increase
the likelihood of a purchase.
It evokes the emotional attachment a customer can have with your product,
where they can start visualizing themselves with the product
they're considering to purchase.
The beauty brand glossier does a fantastic job of explaining the
benefit of using their brow gel, simply with a great before and after
image, which visually explains the positive impact of using their product.
Number two, reviews.
Collecting and displaying reviews are almost as important as money itself.
Not only is it a wonderful way to build instant trust with new customers, but
it's also a great way to allow customers to share personal photos or videos of
them using your product, which you can later on use as marketable content.
My personal favorite review apps are Judge Me and Junip, which
I'll link down in the comments.
Number three, trust badges.
I think trust badges are a great visual way to reduce hesitation
for new customers that have never purchased from you before, or may not
be overly familiarized with your brand.
A trust symbol is used to communicate your return and shipping policies.
And for example, you can advertise a 30 day money back guarantee, a
100 day trial policy, or that you offer free shipping and returns.
A company like Leesa does a great job of this by displaying the trust badges
at the end of their product description, checkout and email notifications.
After we've nailed down a converting homepage and product page I want
to make sure you're aware of two items that sometimes gets overlooked
when designing out a Shopify store.
And those items are your checkout and email notifications, two items that
are crucial to ensure your customers have a consistent customer journey
from beginning to end.
By now, your customers have clicked buy now and have been
brought to your checkout page.
In comparison to other templates like your homepage or product page, the checkout
template cannot be heavily modified.
However, that doesn't mean it can't be customized to match the look
and feel of your online store.
To do so,
in the theme customizer, you can locate the checkout template design option
under the dropdown in the header.
Click checkout and you'll notice the editable options to the left side
of your screen will change as well.
To keep things simple and effective make sure to upload the following.
First, upload your logo in a size where it's legible yet
it doesn't take too much space.
Second, update your heading and body font to match your existing site.
Now a side note, if you're using a custom font, you won't be able to
embed it into your checkout template.
And for example, if you're using a font like Futura, Google "best
alternative Google fonts for Futura" and you'll be able to find great free
alternatives that will closely match the font you're currently working with.
Third, make sure your background and button colors are consistent
with your general settings.
Addressing these simple updates will make your checkout look
effective and remain consistent.
It's normal to think the end of a purchase journey finishes with the
checkout, but that's not always the case.
Email notifications are a powerful built-in feature that communicates
crucial information to customers like when an order has been confirmed
or when an item is being shipped.
Luckily with Shopify, those notification email templates can
be custom nice to match your brand guidelines of your online store.
To do so, jump into your admin dashboard and navigate to settings in the bottom
left corner, then click notifications.
Similar to the checkout you'll have a few options to customize
your email notifications, which includes uploading your logo and
customizing the color of buttons.
It's great to keep these notifications as simple as possible, but if you
want to supercharge them, I'd strongly recommend using an app like Spently.
Spently is an app that allows you to choose different email notification
layouts and do some pretty neat things like embed a customizable discount
code for repeat purchases, or even upsell a complimentary product.
If you want to design a beautiful online store, Shopify has everything you need.
It makes selling online easy, fast, and scalable.
So if you haven't started already, it's time to get started with a free
14 day trial set up your store in days and bring your brand to life.
Building an online store shouldn't be this easy or this much fun.
Click the link right here to get started on your business journey.
So there we have it.
These are some of the same processes and best practices that successful designers
use when designing an online store.
I know once you follow through all the insight in this video, you'll be one
step closer to launching your effective and high converting Shopify store.
If you want to dive even deeper, click the link right here to watch a free
course I created on Shopify Compass called How to Design your Online
Store with Zero Design Experience.
If you thought this video was helpful, make sure to give this video a thumbs up.
That actually helps her channel and our community grow.
Leave your questions in the comments, and I'll try to get
back to each and every one of you.
For more simple, actionable tips to grow your online business, make sure
to subscribe to Learn with Shopify.
We release a new video each week that will help you start, run and
grow a successful online business.
Make sure you subscribe so you don't miss out.
I'm Stephan Peralta, thanks for watching.