11 Mistakes that Shopify Beginners Make (and How to Fix Them)
One thing I love to do is give website audits. Understanding e-commerce design strategies and customer behaviours allows me to provide very clear, actionable points to store owners. I’m in a lot of Shopify Facebook groups in which I see that people often build their stores with zero design experience and ask for feedback.
I’m all for a DIY approach but guidance from a professional can make all the difference. Noticing some common areas that could use improvement, let's go through 11 things every Shopify beginner should avoid doing when designing their store. Are you guilty of any of these?
Mistakes and Solutions
1. Awkward Image Sizes
Ensure that all primary images are the same aspect ratio. The primary image is the first of your product images. I see so many websites that have images of all different sizes, resulting in the images and titles not being aligned. This is distracting and looks unprofessional. Keeping images at the same aspect ratio means that all of them should be either vertical, horizontal or square and have a width to height ratio that is the same (2:3 or 1:1 for example).
The Solution:
Go to edit the product. Drag your images so they are in the correct order that you’d like. Click to edit the first image and use the crop tool. Select the aspect ratio that you’d like. Save and continue to do the same with all primary product images. If you have some images that are square and cropping them would crop the actual product from the photo, then you need to take new photos, or use Photoshop / Canva to extend the edges of the image so that you can crop it to the same aspect ratio.
2. Busy Navigation
I have seen some navigation menus with 10 items on them, and they include everything from shopping each collection, to About and Shipping Policy pages. No. Just no. The Primary Navigation is to get your customers to shop and that is all. The maximum number of items in the Navigation bar should be 7. After this, a person’s eyes cannot scan through the options to find what they want, and it becomes more confusing than helpful.
The Solution:
Use your navigation menu to help explain what you sell. If you have few products, list your three collections to clearly show what products you offer. For example, if you sell beauty products you can list "Hair, Face, Eyes" and your hero image should extend this message so that customers immediately understand what you sell.
If you have many collections, then make use of a mega menu and the primary links can be “New Arrivals, Collections, Sale”. All related to shopping. Other items such as Shipping, FAQs, Policies, and Contact can all go in the footer menu, or under one item in the navigation. If there is an item that you wish every customer would buy such as a set of 3, or something similar that brings your average order value (AOV) way up, then perhaps that should be in the navigation too. It depends on your specific sales goals.
3. Huge Header
I see an absurd amount of beginner Shopify stores that have a header that takes up more than half of the height of the page. This is not effective design. When people arrive to your store, they should instantly have an idea of what you do or sell. If your nearly blank header and menu are taking up that valuable real estate above the fold, you have not made the best impression that you can. Above the fold is everything you see when you first land on the webpage. I often see this with people using Shopify's Simple theme (not one I would recommend by the way thanks to its dated design), but oversized logos and headers happens with all themes.
The Solution:
In the cases that I’ve seen, the logo always has a lot of white space above and below it. Crop your logo to remove this space, and re-upload. This should help a lot. You may also need to adjust the size of the logo appearance in the theme editor.
4. Keeping the theme’s defaults
When I arrive at a store, I can tell in about 1 second if they are using Debut, or Brooklyn themes. These are themes I do recommend, but the problem is that most do not spend the time to customize them. This results in stores looking the exact same, and not giving customers any memorable experience regarding your brand.
The Solution:
Clarify your branding. What are your brand colors, fonts and imagery style? Incorporate these into your theme color and font settings. Consider a landing page design that does not begin with Debut’s feature image or slideshow that has a grey image overlay, and white text on top. I’m sorry but it doesn’t make your product stand out, and I’ve seen it 1000 times. Use the ability to customize, but don’t go overboard. This brings me to my next point…
5. Going overboard with colors
Just because you have options, doesn’t mean you should explore all of them. I’ve noticed a lot of pages that choose a bright background color such as pink or green since it matches their logo. This look is a little 1990s and more importantly, distracting from your product images and text.
The Solution:
Stick to white, or a light neutral color for backgrounds. Use other fun colors as accents. Accent colors can be used for backgrounds of small sections, button colors, text link colors and announcement bars.
6. Social sharing card
When someone shares their website on Facebook, a social sharing card appears with an image, title and some text. I've seen it often that this card displays an awkward cut-off image of a logo or product and it simply says the store name and links to the website. It’s not convincing, and I haven’t understood the product or the brand. This is what is supposed to convince people to click and continue to visit your website. It's like a free advertising space! Make it as attractive and enticing as you can.
The Solution:
Choose a horizontal image that has your product in the center. Update your website metadata to show a neat store title and description. You can do this on your Shopify dashboard by going to Online store —> Preferences. There you should update the Title and Meta Description, as well as your Social Sharing Image. A wonderful improvement!
7. General stores
General stores are stores that sell an assortment of products with the idea that shoppers may find convenient and cheap to buy these items online. This could be a drop shipping store, or the store of someone who sells the items they make at home. Example: You sell baby clothes, but you also have a home section that sells can openers and headphones. Since COVID-19, you’ve also been offering face masks for sale. Your customer is confused.
The Solution:
Stick to one product category. You may make some small sales taking the general store approach, but you are not building a brand. Sticking to one product category will allow you to build trust with your customers, offer quality products, and better understand your target customer. Once that product is working, you can expand to explore other product offerings.
8. It’s unclear what you sell
Many stores do stick to one product category, but the home page design makes it unclear what that product actually is. You may receive visitors to your store, but they will quickly leave because they’re confused about what you offer. Although your business idea may be clear in your head, you need to articulate this through your web design.
The Solution:
Focus on the design above the fold. This is the space the customer sees on the screen when they first arrive. Invest in some lifestyle imagery of your products to use on the home page. Using a lot of general stock imagery often doesn’t send a clear message about what you sell or what makes your brand special. With good images, ideas can be instantly understood. Also, use your navigation to explain what you offer. Simply putting “Catalog” is very vague. Think of your navigation as another way to communicate what you sell. See #2 above.
9. No lifestyle or modeled pictures
I see many apparel and accessory stores selling their product with no images of people modelling the product, or lifestyle images. How can a customer decide if they want to purchase a shirt from you, if they haven't seen how it fits on someone? Creating an e-commerce business is not only about selling a product. It’s about selling a lifestyle. Without being able to see themselves using your product, or how it fits into their life, it will be tough to convince a customer to buy from you.
The Solution:
With models and lifestyle photos, you can convey emotion and the customer can visualize themselves using your product and with that life. If you are starting a t-shirt print-on-demand business, then at minimum, you should have product mockups. I would rather see the real thing, and this is a small investment that you can make. Hire a professional photographer for an hour, and have photos to use across your website and social media for months to come. I understand that some are drop shipping and don’t want to have the product themselves. If you aren’t willing to invest in your product to take pictures of it, then I suggest you reconsider if your product is worth selling to others.
10. There's no trust
Have you established trust with your customers? After all, you are expecting them to purchase from a website that they aren't familiar with. Visitors to your website will be hesitant to spend if the website looks unprofessional or doesn't have messaging that is trustworthy.
The Solution:
Build trust on your store by adding customer reviews, establishing clear pricing (where not everything is on sale. I'm looking at you, dropshippers), and using trust badges to communicate your promises to the customer. Reviews from purchasing customers on each product page are so valuable and you should do everything you can to get customers to leave these. Other things to consider are providing sizing charts, a clear return policy, and using an email with your domain (not a free gmail).
11. “Powered by Shopify”
All themes come with “Powered by Shopify” written in the store footer. It’s considered by some to not look very professional. I don’t think it’s a big deal, as Shopify is a trusted website. But, if this bothers you because it interferes with your branding then go ahead and remove it!
The Solution:
Go to your themes and click ”Edit code”. Find the “footer.liquid” file. On your keyboard, press ctrl+F on a PC, or command+F on a Mac, and search for “Powered”. Delete the part that says {{ powered_by_link }}. You may even be able to delete the entire line depending on the theme. Search the code again, and you will likely have to delete this in a second place.
That’s 11!
I hope that this has helped you improve your store appearance and will result in customers better understanding your product offering. If you are in doubt, check out the websites of some big brands or your competitors and see how they do it. Then, do it better.
You might also like...
