if you don't spend the time and effort on
crafting a nicely designed Shopify store, ,you can forget about making sales with that
store because your store design is something ,practically everyone sees before they purchase
your product and it's also what they use to ,navigate to that important checkout page so in
this video i'll go over the exact store design ,layout and design essentials you need to know
about with examples so you're able to skyrocket ,your shopify sales so the best way to show
you the must-have shopify design essentials ,to implement in your own store is to just simply
show you on screen so the first store we'll deep ,dive into is a store called aloe yoga so getting
stuck into it on screen here i'm gonna go through ,uh why the store is great and a few more examples
other than this store but before we get started ,let's quickly check using this wapalyzer tool here
that it's actually a shopify store so you can see ,here that it is indeed indeed a shopify store
and this tool by the way highly recommend that ,you use it and grab it it's completely free and
you can install it as a chrome extension it gives ,you a whole load of back-end data on basically
any website so to get started as you can see ,the home page is very clean it's product centered
and below here you can immediately see that they ,have the instagram social proof and then the best
seller alerts so really simple and clean store ,it's a large product catalog so it needs to be as
clean as possible simply because there's so much ,display here but i want to show you what they do
so well if you look at their product catalog right ,here which is just the yoga mat you can see that
there's a consistency with their product imagery ,so they don't have you know like um like a
whole load of different product shots but it's ,all the same product shot but just
with different variations in color ,so this is something to be really wary of if
you have multiples of products or if you have ,variants or you have a large product catalog it's
really important that you display these items ,as clean as possible and this can be achieved
really simply through product imagery and if we ,jump into one of these products as an example
the product page is even better in my opinion ,so you don't see any product description on the
side here right you just see the product imagery ,the name the price the variations and simply add
to bag but if you do need more information about ,the product like most of us do we're likely
going to scroll down below above the fold ,so this is where you get the description the
fit etc etc but this is a really really nice ,and clean setup of the product page and what i
really like about this store as well is that they ,include videos within their product images so you
know this is not a requirement but as you grow i ,think this is something that most stores should
look into and it's really easy to implement on ,your own shopify store you can easily upload just
a video into the image catalog i think one of the ,things that you'll notice really quickly with
the examples i'm giving you today is that the ,product images is a core element of all stores
now i understand like it can be really expensive ,to take images get a photographer and get really
professional photos so i want to show you a quick ,hack and i've recommended playset many times but
it is so essential for a lot of the stores that i ,run and the businesses that i run this is a such a
simple way to grab images and mockups and designs ,without needing to hire out you know a studio and
a photographer and get it professionally edited ,etc etc like you can immediately mock up a yoga
mat as an example um and upload that immediately ,and it looks superb so i've just uploaded this
logo here as an example this is our logo and i'm ,just going to click crop and you can see that
it immediately adds onto this yoga mat and you ,can change the background to be transparent you
can change background to be you know green teal ,whatever it might be and this in itself is going
to save you so so much time so place it is a huge ,integral part to really quick mock-ups um and it
doesn't need to be a yoga mat obviously they have ,a whole load of different products that you can
mock up if this is a tool that you're interested ,in i'll drop a 15 off code down in the description
box below for you to check out moving on to the ,next store now this is chaos it is an advanced
print on demand store it's pretty straightforward ,ridiculously simple and clean one element that
i really appreciate is that they have a floating ,transparent header on top so if we scroll down you
see the section up here with their logo and the ,hamburger menu here if we scroll down it's sticky
it follows you it shows you you know where you're ,at the brand the cart the quick search button and
the hamburger menu incredibly simple but important ,these things all add up to how to create a really
enjoyable uh store experience the ugc here which ,is the user generate generated content is a big
big part of this store so under here you can ,see that they have a almost instagram like feed of
different products and also user generated content ,in this section it depends on the type of product
that you're planning to sell but ugc is so ,incredibly important really easy way to show
off your product and create that social proof ,big part of this is personalization it's
having your initials on these phone cases so ,um let's jump into this product here this is such
a simple product page uh it's a step step-by-step ,process because it is all about customization and
print on demand you select your case size whether ,it's a 12 pro max or whatever it might be your
case color your initials you type it in and i ,should update on the fly i think yeah so having
a preview and having a mock-up of your product ,is again so important i just mentioned this but
it is so so important and if you're wondering how ,do you get this step-by-step customization process
well there's a lot of different approaches you ,can take when it comes to that but one of the
options that i recommend is infinite options ,which is a very easy solution where you just
install this app and you get a whole bunch of ,different options that you can customize there's
actually a free way to achieve this if you're a ,bit adventurous and you want to learn how to
code so this is an example store that i found ,where they use liquid coding to get all
these custom attributes and features in so ,if you are experienced with coding or liquid
coding specifically and you want to save a ,few dollars every month then this is a great
approach too i'll probably leave a link on how ,to achieve that going back to the store now you
can see it is step-by-step process up the top ,and really there's nothing distracting you here it
is again just focused on adding to bag that is it ,if you want to read more there is a
waterfall function here where you can ,see the different details and delivery returns and
whatnot contrary to popular belief you don't need ,a long essay about your product especially if it's
a very simple product like a phone case there's ,not all too much to say about it you don't need
to sell it too hard and you know talk about how ,fancy the materials are and what not like chances
are it's not going to be like you need to rely on ,other things like customization user generate
content marketing off the store all that good ,stuff and really the product page is to be focused
on simply just getting the sale getting people to ,add to bag and enjoying that seamless transition
from adding to bag to check out and that is it ,so moving on to the next option here nerd wax this
is a great example that i want to show you because ,we're moving on to a one product store the one
product store typically uses the home page as ,the sales page that is because you have this one
product that you're trying to sell so you want to ,create a journey when it comes to understanding
what that product is and why people should buy it ,this is a great approach and i want to use this
example because nurn wax has a very sort of like ,transitionary seamless experience on the home page
when it comes to understanding what this product ,is so nerd wax if you take a look here at the top
banner your eyes glance down at these check boxes ,right and you start to read what it's all about
stop slippery specs and sunnies from slipping ,essentially and then the usps the unique selling
points of why this product is so great and you ,naturally your eyes glance from left to right
in western countries anyway so looking at this ,all natural ingredients easy to apply on works on
any glasses these are the usps that they figured ,out and they're illustrating on their home page
and the next thing is immediately just an add to ,cart button so you're able to you know purchase
the product after reading all these items if we ,scroll down a little more there is some social
proof you know it's been uh featured on shark tank ,buzzfeed etc etc if your product isn't featured on
these media outlets that's completely fine too you ,can just focus on customer reviews you can focus
on videos as they have here and how to use your ,product that's simply it one of the things that
i wanted to point out though is there is really ,no need to have the product featured again at the
bottom when it's just appearing already up here ,so that's something i would probably change about
this store but if we go into the product page now ,very simple page all right there's berlin
description it's just uh very short sentences um ,and they include ingredients etc etc big emphasis
on cross selling upselling and down selling here ,um but overall it's a great very clean minimal
store when it comes to approaching designing your ,shopify store people tend to over complicate the
store people tend to shove like everything down ,your throat in the hopes that they you're gonna
make a sale but it's counter intuitive just make ,sure that you're conveying the most important
points the most important images and going back ,to place it again well let's just click search
here and go with iphone mock-up iphone case you'll ,be able to see that you can essentially mock
up something instantly as part of the product ,images and so instead of like you know setting up
a table and getting all the lighting ready which ,takes forever um these are ready to go and they're
almost just as effective i mean i've used these ,plenty i've tested it if i upload a logo here and
click crop you can see it immediately places uh ,onto the phone case and you can even change the
phone case color making sure that you have high ,quality images i think is like half the game when
it comes to shopify store design you can't revolve ,a great store design around bad product images
so something to be completely wary of when you ,start to build out your store so jumping onto
my own demo store now i'll guide you through ,the updated must-do design tactics you should
have in your own shopify store now that we've ,gone through a few examples the first thing i want
to show you that you should know is to make sure ,that you compress your images compressing
your images is underrated in my opinion ,because compressing your images ensures that
your images look great but at the same time load ,really quickly and this is going to impact your
speed score so if we type in image compression ,this is probably something you should get
straight away if you already don't have one ,so just going into image optimizer as an example
all right what this does is it's going to compress ,every image that comes through your store
automatically all right and then it's going to ,decrease the file size of these images while still
retaining the quality you can do this manually ,technically but firstly it's going to take a lot
of time and secondly it probably will look crap if ,you don't um if you don't optimize them correctly
so that's the first point i really want to make ,the second point is if you're starting a
brand new store right there's new themes ,that you should really be using and i wanted to
point this out because the new shopify os 2.0 ,system basically means that themes are faster
um they're more up to date with the designs ,and it's essentially shopify's new themes so right
now it's pretty new so the only free theme is dawn ,under os 2.0 but i believe they're going to
be releasing more soon so that's something ,that i wanted to point out as well if you have
a completely new store or you're thinking about ,migrating to a new theme then go ahead and check
out os 2.0 it'll be worth your while the third ,thing i want to mention is to make sure that you
actually have a logo in place i know this sounds ,kind of common sense right but i think you'd
be surprised how many people don't actually use ,logos at all and a tool that i recommend again
going back to place it i feel like playset ,literally does it all they have a logo design uh
tool so you input your your name of your brand ,here so let's just type in as media as an example
and then you're gonna pick your industry let's ,just go with technology and click let's go it's
going to automatically generate a whole heap of ,logos they suggest you use and of course you can
go ahead and customize it yourself but the point ,here is like make sure you use a logo because
the number of stores that i've reviewed that do ,not use a logo or use the generic like text logo
that is going to hurt not only your store design ,and appearance but also your overall marketing and
branding ensure that not only does the store look ,nice that is ui that's user interface but also
user experience is really important so ux how do ,people navigate through your store how do people
interact with your store so going back to you know ,looking at this as an example this is allo store
is such a large catalog it's so important that you ,correctly navigate and structure your menu in
a very well thought out way something that i've ,recommended in the past is that you create
like a mind map first of all your products ,and see what slots into which menu and what makes
sense and make sure that you build that out you ,take the time to build it out on the shopify
backend and you don't just have random menu ,bars floating here as you can see in my demo site
and then once you've built out your structure um ,you can go ahead and copy a store but don't copy
it verbatim and ensure that you add your own ,flair into your store creating your own flair
and character comes down to the types of images ,that you use the type of copy that you use and the
overall theme that you use using a color palette ,is extremely important and so my recommendation
there is that you go into google and just type in ,uh color matching color palettes and it'll give
you an example of different color palettes that ,suit one another and go ahead and just stick with
three maximum four colors in your store you don't ,want your store looking like a rainbow so here
you can see it's simply black and white like ,that is it the only color element is really in the
products and that's it and the final thing that i ,want to mention is that use a cro tool which
stands for conversion rate optimization what ,i'll do is i'll link a full video guide to using
a cro tool because this is by far the best way ,to actually see if your shopify store is designed
well by getting feedback from users in the form of ,heat maps video recordings and things like that to
increase your sales and conversions it's one thing ,to think that this is how people will interact
with your site but it's entirely different thing ,altogether seeing users actually interact with
your site if you made it this far into the video ,make sure you drop the code word comment blueprint
and i'll like the comment if this video has helped ,you out too make sure you drop that like it's
always really appreciated and also don't forget ,to claim that 15 of playset purchases if you
need quick product mock-ups designs and also ,logos thank you playset for sponsoring this
video and as always thank you for watching
Congratulation! You bave finally finished reading how to make your shopify store look better and believe you bave enougb understending how to make your shopify store look better
Come on and read the rest of the article!