BACK

how to make your shopify store look better

How To Design A Shopify Store Like a PRO (& Sell More!) if you don't spend the time and effort on  c

Andrew Ethan Zeng

Updated on Feb 13,2023

How To Design A Shopify Store Like a PRO (& Sell More!)

The above is a brief introduction to how to make your shopify store look better

Let's move on to the first section of how to make your shopify store look better

Let TThunt's experts help you find the best TikTok product on your Shopify business!

Find TikTok products (It's Free)
No difficulty
No complicated process
Find winning products
3.5K Ratings

WHY YOU SHOULD CHOOSE TTHUNT

TThunt has the world's largest selection of TikTok products to choose from, and each product has a large number of advertising materials, so you can choose advertising materials for TikTok ads or Facebook ads without any hassle.

how to make your shopify store look better catalogs

How To Design A Shopify Store Like a PRO (& Sell More!)

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!

Browse More Content