Your Cart is Empty

7 Design Basics That Will Help You Grow Your Shopify Store

7 Design Basics That Will Help You Grow Your Shopify Store


When it comes to growing your online business - the design of your store plays a major part. In this video, Raksha and Matt share some design basics from our experience of building and launching 200+ Shopify stores.

Matt: Hi everyone, I'm Matt from The Hope Factory and I've got Raksha here with me.

Raksha: Hi!

Matt: Raksha is a Shopify expert who has been working with Shopify for over 5 years and helped build over 300 stores, so the first thing that we wanted to talk about was design. Designs are a very important part of any online store, one of the reasons is it allows you to compete with your big competitors because if your store looks great, people will assume that you're an established business and you're a big trust worthy business. When people are buying online, they obviously want to know that they are going to get the product sent to them, it's going to arrive. That it is as it's shown to be or it's explained, and you know if there's any problem, so that they can back in touch with the store owner.

Raksha: Yeah.

Matt: So we do see I guess Raksha a lot of stores, perhaps they’ve just been built and we get the client saying to us, look I've build my store, but I'm not getting any sales. 

Raksha: Yeah.

Matt: And there's often a few sort of very similar problems that we do see, I guess that shows or that we can see that why people perhaps would go to the store and wouldn't buy. So do you want to just talk about a couple of those sorts of issues that we often see?

Raksha: Yeah, as you mentioned design, design plays a very big role in any store you build. So the very first thing when anyone enters or opens your website is the logo. The logo needs to be very good and sharp, because most of the time we have seen many people have their website, but their logo is really blurry, you can't even read anything in the logos, so that's something which you have to keep in mind because that logo also builds kind of a trust, because they know that that's your company logo, that's your brand.

Matt: And do you think that another thing I guess touching on that, is that some people obviously when they get the logo design, they tend to perhaps go to like there’s options, you can go online like Fiverr and they actually get a cheaper version of a logo, and look that's probably okay to get at least an idea of what you want, but it's probably important to get a proper logo design, and one of the reasons would I guess be as you said about the blurriness.

Raksha: Yes.

Matt: Often with those cheaper logos, you don't actually get a really hi-res version, so that's why it doesn't display very well.

Raksha: Yeah, and at the end of the day you can also keep that logo in your file and you can always use that whenever you want.

Matt: Exactly, like obviously you know if you have business cards made, or look its possible I guess depending on the business down the track you may need some signage used, other opportunities like that maybe YouTube videos.

Raksha: Which is good.

Matt: Yeah, exactly. So the logo that's a good point, so apart from the logo what are some of the other things that you see, let's say on the home page, which would sort of suggest or that is a giveaway that it's not perhaps a professional business or not a professional online store?

Raksha: Yeah, after logo I would say the banner images, you need to have a really good banner images.

Matt: So just to be clear, so banner image, do you mean that main image that we saw? 

Raksha: Yeah, the one with slides.

Matt: Yeah, we sometimes call that a slider, so that first hero image that people will see.

Raksha: That's right.

Matt: Yeah.

Raksha: And then after banner images, product images.

Matt: Sure

Raksha: Because if your product images are not that great and if there not higher resolution, then it’s really, because you have to understand people are viewing your website in other devices, phones, laptops, desktop, different screen sizes, so all these images need to be really high resolution

Matt: Yup.

Raksha: But not that high that it makes your site slow.

Matt: Yeah, that's a good point. There's a balance between, you can actually, obviously you want that image to look as sharp as you can, but sometimes people probably put an image in at too larger size and that does slow down the site. Now that's obviously going to give you a bad user experience.

Raksha: Yes.

Matt: Just going back to that point about product images, I think it's really, let’s face it, you are showing what you are selling.

Raksha: That's right.

Matt: And so if the product doesn’t look good, why would I buy it.

Raksha: That's another thing, that's how people want to trust you. They normally see the photo of the product and they buy that particular product, then sometimes they don't even read the description because they want see the product which they are buying, and if you don't show the product images properly they won't buy your products.

Matt: Yeah, I guess another thing would be also with the product images is having them on a standard background.

Raksha: That's right.

Matt: Because sometimes you do see people have product images with different backgrounds, and it just looks sloppy, doesn't it?

Raksha: Yeah, it kind of gets confusing what exactly you are looking at because you want your product image to be that hero, the part of the hero in the background.

Matt: Yes.

Raksha: I will say, I would highly suggest to have like a white background or gray background depending on the product you're selling to make it easier.

Matt: So yeah, the other thing I guess is the product images. It's obviously important to; I mean this is your product that you're selling, so it’s got to look good otherwise why would I buy it. And I guess one of the things is people will sometimes don't have a consistent background on that product images, so what would you suggest in terms of a background obviously standard?

Raksha: I would suggest to have a standard background.

Matt: Yeah

Raksha: Yeah.

Matt: And all the, like a white? I guess it depends on ...

Raksha: It depends on the product, especially if your product is white, you don't want to have a white background.

Matt: No, of course not. No, but you do want it to stand out I guess.

Raksha: Standout, yes. Your product needs to standout from your background.

Matt: Yeah and also nice and clean often on a white background it can look quite clean as well.

Raksha: Yeah.

Matt: The other thing I guess to think about is if you're in clothing, do you use models or not?

Raksha: It depends, it depends at the end of the day, even you use models or you don't use models, but it's a matter of how you take the photo and you present and how you put it online.

Matt: Sure.

Raksha: I have seen so many stores where they don't use models, they just use photos of the products and it's amazing.

Matt: Just depends I guess on the book. Just going back a bit, just want to talk a little bit more about the main hero image. Now I guess people might sort of go if they are starting off and they might say, well, how can I get that image? Now you probably got two choices.

Raksha: Yup.

Matt: You can get a photographer, well, there are probably three. You can go take a photo yourself. The second option would be you can get a photographer and as part of shooting your products you can perhaps get them to also shoot that slider or the main image, obviously what are some important things to think about when you're thinking about that main slider you know in terms of the actual size and all that sort of stuff?

Raksha: Yeah, so whenever it's a matter of how you choose which theme you choose. So each theme has got their different slider sizes, and then I would suggest whenever you go and push any theme, go and look at the themes, I would say all the description, what it is and what's the size of the images you need to use, and basically give that image size to the photographer and they can resize it for you. And the important point in the banner you have to always feature the products or how a product can be used, and if you're graphically aiding the text in the banner then you have to put the text, you don't want to put a text on top of the hero image, so somewhere where it will be visible, and that core direction button is important. 

Matt: Sure, so with that just going back a bit so you can obviously use a photo that you take or a photographer takes, what about using stock images which obviously a lot of websites do use, do you see any disadvantages around using stock?

Raksha: No.

Matt: No? Okay.

Raksha: I feel that stock images are a really good option that people have.

Matt: Yup.

Raksha: Because they always come into really good resolution size, and when you resize the stock images it kind of really does look good and it kind of blends in with the size, whatever size you want to use in your Shopify site.

Matt: So could you just explain a little bit further about stock images, there are a lot of different providers out there that basically allow you to go and create an account and then buy an image for probably around $10 for a hi-res, there's different processing plans

Raksha: You can buy in bulk also

Matt: And that gives you the rights to use that image on your website.

Raksha: Yeah.

Matt: So that's another option I guess that we do often suggest and we will obviously help people sometimes with their graphic designer.

Raksha: Yeah.

Matt: Just going back to the main image and talking around the text that actually gets put on, I think that's a good point as well. I think it's important to think about the message that you've got, but also as you're describing how do you actually put that text onto the image, now you know we can use a graphic designer obviously to do that, but some of the templates do allow you to put text.

Raksha: Put the text.

Matt: Yeah, okay.

Raksha: It's all depending on the template you choose.

Matt: Yeah, okay.

Raksha: Because that's one of the major part of your website, it’s depending on which template you want to use, so if you're going to use a template and you want to put a photo let's say in the banner image and there is a hero you know a person posing which is in the center, so you have to really understand which section you want to put your text to be centered, left or right aligned you know that's what is all going to merge in.

Matt: Yup

Raksha: And then at the end of the day we also have to understand that we have to make the site responsive.

Matt: So when you say responsive, you are talking about when someone looks at it on a tablet or a phone and now I think that’s a good point because obviously the text may appear in a certain way on a desktop, but when it goes small it's going to actually shrink and sometimes you'll see that that text will disappear or gets cut off, so

Raksha: Yes, some of the theme is not having that option to show the text on the image, so it kind of just shows the core direction button instead of the text. 

Matt: Okay, what about some of the other elements of the home page that are important, that should have, I guess are a bit of a giveaway that it’s a professional store or perhaps it's not so professional, is there some other parts of the

Raksha: Yes, the footer.

Matt: The footer, yes.

Raksha: The footer plays a very big role, yeah.

Matt: So when you say footer, what do you mean? What is a footer for people to understand? 

Raksha: Footer is something when you see the bottom of the website which has the policies, the newsletter and social media icons. 

Matt: Okay, yes, yes and there's basically a certain look that most professional sites have isn't there? It’s just general layout with a footer, and I guess we do sometimes see or quite often with people who have just launched, they don't have a privacy policy, returns, refunds, and to be honest people probably don't think that's important, but as a buyer if you don't see that footer you probably already go, well, this isn't possibly a big business, this is probably someone whose just started maybe in their bedroom running you know, and so that doesn't promote that feeling of trust.

Raksha: That's right.

Matt: So what are the some of the elements just to go back on the footer, what are some of those things that you would usually have on the footer and is it also the look of the footer which is important?

Raksha: I feel that having a policy or the policies that is privacy policy, delivery and refunds, terms and condition, FAQ which is also one thing which people look for in the website, because if you're selling clothes and you want customers to know what exactly is a major question they normally ask, what's the size of, what material it is, so FAQ is also one of the important things that people look into your footer. 

Matt: Yeah.

Raksha: Contact. 

Matt: Yeah that's a really good point, now I think this is another thing where people sort of make a big mistake, is that they don't have the contact details clear, now if I'm buying or people are buying and they don't see any contact details they'll probably worry again, what if something goes wrong, what do I do? Is there anyone behind this store? 

Raksha: That's right. 

Matt: So as you say now, I guess sometimes it's a thing where people might go, well, I don't want my number to be on there, personally I think that is a mistake. I think you've got to have some contact number, because you are running a business and yes it doesn't mean you need to answer the phone all the time, it could go through to a voice mail service or have a message, but you would agree that's important to have a number?

Raksha: Yes, it is important. 

Matt: And an email address that people can contact you on.

Raksha: That's right. So when we do contact forms, it's important, there's 3 things that you have to put in your contact phone. One is phone number, another one is email address and the third one is the contact form. Whereby it kind of plays the role whereby if a person cannot call or email, you can use the contact form, fill in your name, your phone number, your message and then click the send button, it goes directly to the person who is running the store.

Matt: Yup and contact form is standard as part of the Shopify site.

Raksha: That's right, yes. 

Matt: Just going back a little bit, the other thing that I guess around that having contact forms is talking about whether, and you see this on a lot of sites, they do have like a live chat or a chat option.

Raksha: That's good.

Matt: And I think that is, because it's a way if someone is on your website and you can actually engage with them directly, answer questions, so how would you get that set up? How would you get like a live chat set up? 

Raksha: So the good thing of Shopify is it's built in with plenty of apps, so you can have live chat app for free or you can pay a monthly of 90 dollars, it depends.

Matt: What's that based on, why would you pay more?

Raksha: So live chat, most of the live chat you can go into that yourself.

Matt: Yes.

Raksha: Sometimes a certain chat app allows a third party to go and do it for you.

Matt: Okay, so you're actually employing someone else to actually

Raksha: Do the work

Matt: Based on the script you will provide?

Raksha: That's right.

Matt: Yes, so they answer certain questions. I guess, I mean we actually do this on our website, but we do it ourselves.

Raksha: Yes.

Matt: The idea being if someone’s on the website, we try and get their contact details, so that we can call them, and obviously try and talk about if we can help them out with a particular service.

Raksha: Me personally I like having website whereby it's having the chat functionality because it makes your life so easy, instead of waiting for them to email you and you don't even know when they are going to email you, so live chat is something whereby a person is sitting there and they do answer your questions. 

Matt: What about peoples concern that, oh but I can't always be on ready to answer those questions. Do you think that's an issue or how does that work if they are not there?

Raksha: Some of these live chat, what it does is it kind of also connects to your phone.

Matt: Okay.

Raksha: So example messenger, Facebook messenger.

Matt: Yup.

Raksha: You have to install Facebook messenger in your phone in order to message anyone, so now Shopify is having these Facebook messenger whereby you can integrate in Shopify and also in your Facebook.

Matt: So it will actually goes to your Facebook messenger service.

Raksha: That's right.

Matt: Okay and I guess the other thing is also if you are offline and you are not there, it can actually just fill out a contact form, doesn't it? 

Raksha: Yeah.

Matt: Someone can actually fill out the chat thing and it will actually send an email, so you know it's not like, you don't have to be on there all the time.

Raksha: No, you don't have to.

Matt: People don't always expect, obviously it's probably better if you can be on there a little bit, but you know. And just look you've touched on some great stuff there, but I think what you mentioned earlier was around the theme selection, and that's another thing that I guess we as part of the project will often help people and it's a big part of what we offer, is picking the right theme, so what are the important things to think about when you're picking a theme? 

I mean first thing I want to sort of mention is that you've got themes that are supported by Shopify, and then you've got what's called third party themes, so what's the difference between one and the other?

Raksha: First is the Shopify theme is something which is supported by Shopify, and Shopify supports you 24/7, if you're having issues with the theme, the technical department is there to help you out with the theme.

Matt: Okay.

Raksha: But if you're using a third party theme, Shopify will not be supporting that theme, and you have to go back to that particular theme developer to ask them to fix that problem, but then again what if your store is a bit busy and you've got some issue with your cart and you have to contact them.

Matt: Because you can't expect them to get back to you straight away.

Raksha: No, they don't get back to you straight away, no.

Matt: Some are good and some are

Raksha: They will only reply to you at the end of the day and then some takes a fare bit of time because of course we have to keep in mind the time zone. 

Matt: Yeah, time zones and also I guess you might have a theme developer which is just two or three people, you might have another one like bold apps let's say, they've got over a hundred of people.

Raksha: Oh, yes.

Matt: So obviously there’s a difference in the service that they can offer you, but when you talk about, so a Shopify theme and a third party, how would I know like when I’m looking to say purchase a theme, how would I know which is a Shopify theme?

Raksha: So what you have to do when you go to a Shopify website, they have got a theme menu, so all the themes in that particular menu is Shopify theme, but when you go and search in Google "Shopify Theme" just itself, then you'll see these themes for the rest or other

Matt: Yes, but it is also the case that you cannot buy a none Shopify theme through your Shopify dashboard, so if you're in Shopify dashboard and look for themes, they are all Shopify supported themes, is that right?

Raksha: They are all Shopify supported themes.

Matt: Yeah, okay, so that's another way that you can actually go and do that.

Raksha: Yeah, so you can go to your Shopify dashboard and right at the bottom there is a button where you can go and click to view all the themes which are provided by Shopify.

Matt: Okay.

Raksha: Yeah.

Matt: So maybe we might just show people how to work that just in this little video after this.

Raksha: Yeah, definitely.

Matt: Yeah, great.

Raksha: In this video, I'm going to show you how you can go and select your good theme for your website, so there's two ways of selecting, first you can go and type just Shopify themes and it's going to take to Shopify themes in the Shopify website. Another one is going to your admin going to your online store and then going to themes, and then when the theme page opens, you can go and click on visit theme store, wait until it opens, so it shows all the cool themes which Shopify has already published, so what you can to do is you can always go in and check from the collections they have got or new themes. You can scroll down, you can find the theme according to the industry you are from, or sort it by the most popular or relevant theme, so let's go and start up with the most recent theme. 

So when you go into the themes, the most important thing you have to always remember is what things you sell, and what you want your store to look like, for example, let's go and look at this the very first theme, you can go and view the demo of the theme by clicking on view demo, and then you can see the layout of the theme. This is how the theme will look like, and when you open up any theme just imagine that this is your store, this is how your photos are going to look like, probably your product photos, the collections and your look book, how your look book will be looking like, so it's a matter of how you want your themes or how you want your store to look like and that's how you can choose your theme. The most important thing that you have to always remember is your theme needs to be responsive, most of the Shopify themes are responsive, and another thing you have to keep in mind is that when the look and the feel of the theme.

You want your customer to be able to navigate to your site functionality of your theme; the pages need to be very good because you don't want your customer to find it difficult to buy your product. 

So I hope this video was helpful. If you have got any comments, please comment below. We will be happy to answer your questions. Thank you!

Leave a comment

Comments will be approved before showing up.

Also in Articles

Three Ways to Get Customers to Open Your Emails
Three Ways to Get Customers to Open Your Emails

The first step to increasing your open rate is to understand exactly what one is and where your open rate compares to the industry average.
Read More
How do you choose a great WordPress host?
How do you choose a great WordPress host?

WordPress is one of the world's leading website frameworks, delivering stunning blogs, design flexibility, scalability and online stores through WooCommerce. But it’s not an ‘out of the box’ platform to set up properly. How do you choose the best host for the job?
Read More
Shopify vs WIX - The Grudge Match
Shopify vs WIX - The Grudge Match

Both WIX and Shopify are well-known web platforms, and are very different. Many businesses start with WIX as it looks great, is easy to use in the beginning and is fast to get live. We are, however, handling more and more migrations from WIX onto Shopify and wanted to share our thoughts on the WIX vs Shopify debate.
Read More