Most advice on Shopify store design is a list of trends. Bigger type this year, softer colours next year. I do not find that useful when I sit down with a store, because a store is six or seven pages, and each of them has a different job.
I design a Shopify store and write its theme code as creative director of Skin Boutique Online. When a page there does not work, the cause is almost never taste. The page was doing the wrong job, or trying to do two.
So this guide goes page by page. For each one I say what it is for, what has to be on it and what I check first.
Start with the phone
Before any page, one rule. Design the phone version first and approve it first.
Open your analytics and look at the share of visits from mobile. For stores that sell to consumers it is often the larger share. Yet most stores get designed on a laptop and then squeezed down.
On a phone you get one column and one thumb. That forces decisions a wide screen lets you avoid. Which of these three things comes first? Does this banner earn the whole first screen? If the page works on a phone, the desktop version is the easy part.
The homepage: say what you sell and send people on
The homepage has two jobs. It tells a stranger what the store sells and for whom. Then it sends them to the right shelf.
What it needs:
- one line that says what you sell, in plain words
- one image and one button, not a slideshow
- a reason to trust you, close to the top
- the main ways into the catalogue
- the products most people come for
What it does not need is everything else. The homepage is not the place for your full story, every category or the newsletter popup in the first two seconds.
I wrote the order out in detail in what goes on a Shopify homepage.
Check first: show the top of your homepage to someone for five seconds, then hide it. Ask what the store sells. If they cannot say, fix the headline before anything else.
The collection page: help people choose
A collection page is a shelf. Its job is to get someone from “I am looking for a moisturiser” to two or three products worth opening.
What it needs:
- a title that names the shelf, and one line of help if the category needs it
- product cards with the same photo style, a readable name and a price
- filters that match how your customers think
- a sort order you chose on purpose
That last point is the one I see ignored most. Every collection has a sort order, and it is often whatever was set on the day the collection was made. So the best seller sits on the third row. Open the collection in the admin, look at the order and put the products most people buy at the front.
Filters deserve the same thought. In skincare, people shop by concern and by skin type before they shop by brand. A filter list that starts with “Vendor” is built for the store owner. Your customer came with dry skin, not with a supplier in mind.
More on cards, sorting and filters in Shopify collection page design.
Check first: on a phone, count how many products you can see without scrolling. If the answer is one, the cards are too tall.
The product page: answer the questions in the same order every time
This is where the sale happens, and it is the page with the most to carry.
Someone on a product page is asking a short list of questions. What is it? Is it for me? How do I use it? What is in it? What does it cost and when will it arrive? Has anyone else bought it?
Good product page design answers those in the same order and the same place on every product. When the ingredients sit in a tab on one product and in the description on the next, people stop looking.
What it needs:
- photos that show the product, its size and its texture or use
- the name, price and buy button on the first screen of a phone
- a short description before the long one
- usage, ingredients or specifications in fixed places
- delivery and returns in one line near the button
- reviews, if you have them
Variants cause more trouble than anything else here. If a product comes in three sizes, the customer has to see which one is selected, what it costs and whether it is in stock, without the page jumping around.
This is also where a theme most often runs out. If you need an ingredient table, a routine in steps or a comparison with another product, and the theme has no section for it, that is a job for custom code. I explain the difference in Shopify designer or developer.
The full order for this page is in Shopify product page design.
Check first: pick your best seller and find the answer to “how do I use it?” on a phone. Time it. More than ten seconds is too long.
The cart: remove doubt and get out of the way
By the cart, the customer has decided. The design job is to not change their mind.
What it needs:
- the products, with photo, variant and price, and an easy way to change the quantity
- the total, with shipping shown or clearly explained
- one obvious button to checkout
- the payment methods you accept
What hurts here is surprise. A shipping cost that appears at the last step. A discount field so prominent that people leave to hunt for a code. Four upsell blocks above the checkout button.
One suggestion that goes with what is already in the cart is fine. More than that and the cart starts to look like another collection page.
Check first: add one product and go to the cart on a phone. Is the checkout button visible without scrolling?
About and contact: prove there are people behind it
Small stores underestimate these two pages. A visitor who has never heard of you opens About to check that you are real.
Say who runs the store, where you are and why you sell these products. A photo of real people or a real place does more than a paragraph of values. On the contact page, give an email address and say how fast you answer.
If you sell anything people put on their skin or in their body, say plainly where the products come from and whether you are an authorised seller. That one line carries a lot of trust.
Check first: can a visitor find a name and a location on your About page?
Search and navigation: the page nobody designs
The menu and the search box are on every page, so they matter more than any single page.
Keep the main menu short. Use the words your customers use. “Cleansers” is clearer than “Purify”. If the catalogue is large, a second level grouped by concern or by product type helps more than one long list.
Then search for three things in your own store: a product name with a typo, an ingredient and a concern. Look at what comes back. An empty results page with no suggestion is a dead end, and it is easy to improve in the theme settings.
Check first: type your best seller’s name with one letter wrong.
What ties the pages together
Each page has its own job, but the customer should feel they are in one store. That comes from a few things you decide once:
- one set of type sizes, used everywhere
- one style of product photo
- buttons that look and behave the same on every page
- the same spacing between sections
Set these in the theme settings and not page by page. Then a new page or a new product looks right without anyone thinking about it.
Where to begin
Do not start with all of it. Open your analytics and find the page where most visitors leave. For many stores that is the product page of the best seller, or the homepage on a phone.
Fix that one page, release it and look at what changed. Then take the next.
If you want a second pair of eyes, send me the store address and the three things you most want to change. Here is what I do for Shopify stores, and here is where to start a project.
