Seven store design decisions that matter more than your theme

Merchants spend weeks choosing a theme and an afternoon on everything below. The ratio should be reversed. A well-executed free theme beats a badly configured premium one every time, because these seven decisions do most of the work.

1. Pick two typefaces and stop

The fastest way to make a store look amateur is three or more type families. The fastest way to make it look considered is one family used at several weights, or two with an obvious division of labour — one for headings, one for everything else.

Two practical constraints:

• Load one weight range, not eight. A variable font covering 400–800 is one file. Eight static weights are eight requests, and you will use three of them.
• Set a real type scale. Pick a ratio (1.25 is safe) and generate your sizes from it rather than choosing each one by eye. Consistency across a store is what reads as “designed”.

2. Use one accent colour, deliberately

Most store palettes fail by having too many colours doing the same job. You need:

• A background (usually near-white or near-black)
• A text colour with sufficient contrast against it
• One accent, used only for things that are clickable or important
• A muted grey for secondary text

That is four. If your accent appears on a decorative divider, a heading, a badge and a button, it has stopped meaning “this is actionable”.

Check contrast properly. Body text needs a 4.5:1 ratio against its background; large text needs 3:1. Grey-on-grey looks refined in a mockup and is unreadable on a phone outdoors.

3. Set spacing on a scale

Pick a base unit — 4px or 8px — and use multiples of it for every margin and padding value in the store. This single rule fixes more visual noise than any other change, because inconsistent spacing is what makes a page feel restless without anyone being able to say why.

Then use spacing to group. Related things sit close together; unrelated things sit far apart. A price 4px from its product title and 32px from the next product reads correctly. The same elements at 16px and 16px do not.

4. Decide what your images are

Not “get good photography” — decide on a rule and apply it. Every product on white. Or every product in context. Or a consistent alternation of both. The specific choice matters far less than whether a shopper can tell there was a choice.

The same applies to crop ratio. Pick one for product cards (4:5 is a good default for apparel, 1:1 for objects) and enforce it. A grid where some images are square and some are portrait looks broken even when every individual photo is good.

5. Give the header one job

Your header is not a sitemap. It should contain:

• Your logo, linking home
• Between three and six top-level links
• Search, cart, account

That is it. If you have eleven categories, the answer is a mega menu or a better information architecture, not eleven links at 13px.

On mobile, the cart and search must be reachable with a thumb. Test this on a real phone held in one hand, which is how the majority of your traffic will do it.

6. Write the microcopy

The small text is where stores leak trust:

• Empty cart: “Your cart is empty” is fine. Adding “Browse best sellers” with a link is better.
• Form errors: “Invalid input” is useless. “Enter a postcode like SW1A 1AA” is useful.
• Button labels: describe the outcome. “Add to cart”, “Continue to payment”, “Apply filters”.
• Loading states: say what is loading.
• Out of stock: say when it is back, or offer to tell them.

None of this needs a designer. It needs someone to read every string on the site once, out loud.

7. Respect the browser

The things that make a store feel solid are mostly things you get for free by not overriding them:

• Focus rings. Do not remove them. Restyle them if you must, but a keyboard user who cannot see where they are cannot check out.
• Native scrolling. Custom scroll libraries almost always feel worse than the browser’s and break on touch devices.
• prefers-reduced-motion. One media query. Some of your customers get motion sickness from parallax.
• Back button. If your filters or variant selection do not update the URL, the back button takes people off the page instead of back a step.
• Text selection and zoom. Do not disable either.

The through-line

Every item on this list is a constraint, not an addition. Fewer typefaces, one accent colour, one spacing scale, one image rule, fewer header links, less overridden browser behaviour.

Good store design is mostly subtraction, which is why it does not correlate well with how much you spent on the theme.

It is also why we build apps that inherit your theme’s decisions rather than imposing their own. An app that arrives with its own font, its own accent colour and its own spacing scale undoes the work you did here — which is a strange thing to pay a monthly fee for.