pagefly.ioSure, beauty can be superficial. But who in their right mind can deny that a subpar web store design will harm your sales? Your Shopify store design matters!
However, a stunning design is not everything. Surely, if you have snooped around in the eCommerce world for long enough, you will have seen at least one unattractive website whose conversion skyrocketed.
How is that possible? It is because those websites’ designs are effective and scientific!
Even if aesthetic tastes vary from person to person, there are a few rules of thumb that everyone should abide by because they are proven to work. For every step of setting up a new Shopify store, there are design practices that can change your conversion rates significantly. Otherwise, traffic will always be traffic.
If you want to improve your Shopify store’s conversion, you have come to the right place. The even better news is you won’t need any background in graphic design or web design, but only a keen eye and a willingness to learn.
In this article, we will provide you with a comprehensive, thorough guide on how to improve conversion with the most successful Shopify store design. It will be presented in a list of “How-to’s” for easy reading and application. You can check out our video on Shopify Design Best Practices For Beginners:
Let’s get down to business, shall we?
I. How to Pick the Right Theme
While there are a lot of Shopify themes, free or paid, you can’t just use anything that fits the eye. Each type of business calls for a different theme in order to accommodate the goods sold. So here are 4 tips for how to choose the best theme for your Shopify store design.
1.1. Make sure it aligns with your niche
The first thing you need to consider is the “vibe” of the theme. Every theme comes with a main font and color palette, and you need them to reflect the essence of your products. For example, if you are selling women’s jewelry, you shouldn’t go for a theme that is rugged and edgy, but rather something elegant and soft.
A theme like Parallax will fit an elegant women’s shop
You need to align the theme with your brand. Ask yourself:
- What is the general feeling of your store?
- What do you want your store to represent?
- What is one adjective that you would use to describe your store?
When you have the answers to those questions, you will have a general sense of what you want your theme to look like.
1.2. Nail down the 3 most desired features
Considering your niche and your inventory size, as well as your preferred promotion channel, our 3 recommended features would be:
- Image display size: if visuals is an important factor of your products, make sure the theme can display large images to highlight them
- Integrated Instagram feed: if you promote your product on Instagram, you should consider how much you can integrate into the store to strengthen your brand image
- Catalog size: not all themes can fit your whole catalog into one page, so check to see how many products can a theme features at once and how far you can scroll before you reach the limit
1.3. Mobile responsive and light-weight
In the past 6 months, more than 79% of mobile users have used their phones for online shopping. Everything is going mobile now, so you would be missing out if you didn’t get on that train. Thus, one of the most important criteria for converting is that your Shopify store has to be mobile-friendly. No matter how beautiful your Shopify store design looks on a desktop, it is all for nothing if it malfunctions on a phone screen.
Aside from being mobile-friendly, your theme of choice also needs to be lightweight, meaning it doesn’t have any excessive elements that can slow the loading time down. More than 3 seconds of waiting can put you at risk of losing a potential customer.
1.4. Settle on a budget
Regarding the myriad of themes Shopify features, including third-party themes, prices will vary. You can easily find free themes, as well as themes that cost hundreds of dollars. Because branding is an important aspect of eCommerce businesses, you need to consider the theme you choose as a long-term investment.
Thus, you need to consider carefully how much you are willing to spend on a theme because it is most likely going to be a one-time purchase that will stick with you for a long time. This is especially applicable if you are starting out and don’t have much capital.
II. How to Design Your Homepage That Sells
Now that we have covered the base of your Shopify store design, it’s time to get to the surface. The homepage is the very first thing that customers see when they open your website. And as we all know, first impression matters!
2.1. Invest in bespoke imagery and design
Not a lot of customers are intrigued by stock images, and sometimes they even feel deterred by them. If you are only using basic images or purely product mockups, you are not making a strong impression. Customers might feel like you aren’t invested enough in your own store, and might close the website immediately if the store design looks too sketchy.
Best practices:
- Hire a designer, or take up a graphic design yourself. You have to make the homepage and product listing look professional, if not beautiful.
- Do a photoshoot. The best kind of image for the homepage is the side of your product by side with real humans. Nothing looks more artistic and professional than this.
Pottery Barn’s homepage looks stunning with real-life photos
2.2. Optimize the menu and search box
This is how your customers will navigate your website. If your menu tab is too complicated and cluttered, customers won’t be able to find the products they want and leave.
Best practices:
- Use breadcrumb navigation: This is the best way for anyone to navigate around something. In essence, breadcrumb navigation is creating a hierarchy in the menu tab. With this hierarchy, the customer always knows which categories or collections they are viewing, and can go back to the previous menu easily.
H&M’s menu features breadcrumb navigation to make browsing much easier
- Make sure the search tab is visible anywhere: If customers cannot find what they are looking for, they are surely going to leave your store and browse another.
2.3. Have direct links to “Return policy” and “Shipping info” in the footer
Many customers are cautious and demand to know all about a business’s policies before making their decisions. Sometimes, it’s only a customer who is in a rush and needs the product shipped to them as soon as possible, and they will want to know if your store can make their order in time.
Of course, in the footer, you should also include “About us” to tell the visitors about your business, especially if your Shopify store has an important vision, and an FAQ section in case they have a question.
Related article: Create A Sale-boosting Shopify Homepage with Highly-efficient Tool like PageFly
III. How to Design Your Collection Page
The collection page, where each and every product you sell is displayed, waiting to be put into the cart. Just like how a supermarket arranges its goods in a way that tempts customers into buying, your Shopify store should do the same.
3.1. List view or Grid view?
Your product page can be displayed in one of two ways: list view or grid view. Often, when you browse any store, you would find they toggle grid view on. But of course, this doesn’t work with any products.
Grid view should be used for visually pleasing products only or those with beautiful bespoke images. This way, your product page looks just like a catalog and is a lot more interesting in the eyes of a customer. If your Shopify store brand sells clothes, jewelry, food, or just about anything simple that doesn’t require a lot of spec specifications like a computer, you should definitely use grid view on your collection page.
Cartoonist Harry Hambley’s merch website Ketnipz is displayed in grid view, perfect for apparel.
Meanwhile, List view should be used if your Shopify store sells tech products, or just about anything with a lot of specifications.
Best Buy showcasing its laptop collection in List view
Of course, some Shopify themes offer the best of both worlds, and buyers can choose which one to view your collection in. If your theme of choice allows that, then you don’t even need to worry about this part. –
3.2. Use “Load more” instead of endless scrolling
This is as simple as it sounds. When you have a wide variety of products on display, you shouldn’t throw them all at the customers. Let them breathe, and you definitely don’t want your collection page to be cluttered.
A lengthy product display means that customers cannot scroll to the bottom in case they need something from the footer. And furthermore, customers upon being bombarded with so many products can get the “choice paradox” – meaning there are so many options that they can’t choose one.
So leave a “Load more” button and let the users decide if they want to see everything or not. Limit your collection page to show a certain number of products at a time. Your Shopify store design should ease users into buying, not smother them with information.
BLK & Bold creates sub-pages for their products and leaves only 10 products insight
3.3. Always include tags
Imagine yourself trying to shop a new pair of sneakers on a website. You see a stunning pair that you absolutely love. You suddenly remember you know this line of shoes from the brand, but you can’t remember the name. So you spend the next hour trying to find what collection those shoes were from but to no avail.
What was that online store missing? Tags! If they had just included a simple tag saying which collection or line those shoes were from, a customer like you would have had such an easier time finding their similar products and made a purchase in a second.
ROTHY’s remembered to include “Men’s shoes” on the top of every product from that collection
3.4. Use swatches to indicate color variations
If you are selling a product with different color variations, you should include a preview option right on the collection page that’s activated by a swatch.
For example, your brand sells plain T-shirts in different colors. So do you create 4 separate product listings, or do you include 4 little circles of 4 different colors under one product image? That’s right, you take the second option.
And remember to make the product thumbnail interactive – when the customer hovers on or clicks on the swatches, the image should change in color correspondingly.
3.5. A few small no-brainers
The following tips are essentially reminders. They are small things that are meant to improve the user experience but do not forget them. Don’t underestimate the power of small changes.
- Have secondary hover images: When a customer moves their mouse over a product image, it should pop up one or a few other images of that product. It might only save the customer one click, but that is a lot for the user experience.
- Always allow filtering by price, ratings, color, size, and brand: This doesn’t need any explanation for it is absolutely crucial.
- Highlight flagship and important products: The main product, the newly launched one, and the one that brings home the most money, should get the spotlight on the collection page.
Related articles:
- Best Shopify Collection Page To Learn From
- Make Use of Shopify Collection Page to Collect Unique Visitors
IV. How to Design Your Product page
4.1. Have at least 3 images for all products for better visualization
Picky customers will need to know what your products look like from more than one angle, especially if your store sells apparel and accessories. This will help visitors make decisions easier, and therefore, faster conversion.
In addition, the photos also need to satisfy a few requirements to be usable:
- Those 3-5 images must be from multiple angles: This is another no-brainer since multiple angles are literally the purpose of having multiple images.
- Show all of the products’ features: Don’t leave customers in the dark about your products’ features, whether you think they might be helpful or not. For example, if you sell backpacks, you must show their insides, or if you sell headphones that are foldable, show it.
- Always show the products with something else for scale: Most of the time, a photo of the product taken with a human will do. That said, depending on the niche market you’re in, your products might fit better with something else. Not everyone can visualize how big something is.
4.2. Link the shipping and return policy
Just in case the customer needs to consider your store’s policy, this will help them tremendously. Of course, normally, you would have these 2 linked in the menu of the footer already, but keeping it in the customer’s sight is much better. Remember, user experience is the most important thing in Shopify store design.
Bonus tip: Show delivery date instead of delivery speed. Jeff Bezos knows this all too well, and you should do the same on your Shopify store. It might take a bit of coding, but it’s worth it nonetheless.
Amazon’s shipping order showing delivery date – Source: Baymard.com
4.3. Always allow users to submit reviews
In this day and age, word of mouth is your best friend. By having users leave their reviews, you can create social proof for your Shopify store.
And in the product store, display at least 6 reviews from past customers by default. If you have a lot more positive reviews, don’t rush to show them all at once. No one likes to be forced to scroll through more than 10 reviews. Instead, have a “Load more” button below the 6th review.
4.4. Write easy-to-read product descriptions
First tip: Use both bullet points and text blocks. There has to be balanced in order for the product description to be captivating. Too many text blocks will make it tedious and hard to read, while too many bullet points will be distracting and not easily understandable, especially when they are tech specs.
Crutchfield’s product descriptions can be intimidating to non-tech-savvy customers – Source: Baymard.com
Second tip: Subdivide long descriptions with sections and headings. Just like how we divide our long articles into sections with headings, your product descriptions should follow suit. The easiest way to subdivide into sections is by details, materials, and sizes.
Levi’s subdividing their descriptions into 3 smaller parts
Related article: How to Create a high-converting Product Page with PageFly
V. How to Design Your Checkout Page
As mentioned above, many customers drop the purchase at this very final step due to it being too complicated or unintuitive. That’s why it is such an integral part of your Shopify store design and deserves just as much attention as any other part.
For the checkout process to be well-received, it all starts with the “Buy now” button (or the “Add to cart button”.The button needs to be prominent and unique in design. Don’t let it fade into the background. Make it pop!
Next, do not ask the customers to fill in excessive information. Ask for their shipping address, their name, and contact. That should be all you need in order to fulfill an order, right? If possible, don’t make them log in, they might not be ready to be a loyal customer yet.
Finally, add a “Thank you” page after the checkout. You have endless possibilities to design a proper Thank you page that serves multiple purposes. Have the customer subscribe to your newsletter, have them share about your Shopify store on social media in exchange for promotion codes, summarizing their shipping orders, etc., you name it. For a thorough guide on how to best design a Thank you page, feel free to check out this article. It will give you a bunch of cool and fun tips for the final page.
Related article: 11 Best Tips To Convert Website Visitors Into Paying Customers
Shopify store design in a nutshell
Coming up with your Shopify store design is no easy feat, but with the right rules of thumb and a little digging, it is super rewarding. Your conversion rate can skyrocket if you do it right. Of course, what we provided doesn’t contain the technical side of things. For that, Shopify has got you covered.
Have fun with starting your online store! We wish you the best of luck in your future endeavors!
Previous chapter
