Bravo Sierra
Lock icon
Members Only
United by Blue
Lock icon
Members Only
Lock icon
Members Only

Browse 84 eCommerce Website Guidelines

Our guidelines come from the evaluation of over 1,100 eCommerce websites in the last two years. We include real world examples so you can get an idea of how each could apply to your store.

Showing Relevance

Make it immediately clear what you offer.

Communicate what you sell. Be direct. Your hero section is the best place to start.

◼︎ See examples->

Make it immediately clear who your products are for.

Communicate directly with your target audience. This is best done through imagery and visual design.

◼︎ See examples->

Make it clear why your audience should care.

Reasons are important. Lead with benefits, show value, & provide evidence.

◼︎ See examples->

Match landing pages with where your visitors came from.

Set up custom landing pages that continue the conversation from campaigns to your site.

◼︎ See examples->
Establishing Trust

Optimize your site to load quickly.

Your site should load in less than two seconds.

◼︎Details ->

Use a well-designed cookie consent solution.

Your cookie consent banner should be consistent with your design & brand voice.

◼︎Details ->

Use a familiar structure.

Sites that meet a visitor's expectations of a typical website are seen as more trustworthy.

◼︎Details ->

Present your brand professionally.

Your logo is the first thing most visitors notice. It should be high-res, well-designed, and properly spaced.

◼︎Details ->

Use only high quality images.

Professionally-shot, high-res imagery is the most important aspect of any eCommerce website.

◼︎Details ->

Use consistent spacing throughout your layout.

Inconsistency means uncertainty, which is the quickest path to a lack of trust.

◼︎Details ->

Use appropriate negative space.

A lack of negative space is associated with lower quality and it makes your sections harder to browse.

◼︎Details ->

Use appropriate visual balance.

The visual elements of your site should distribute visual weight evenly throughout the design.

◼︎Details ->

Use enough words, but not too many.

Too little words means you're hiding something. Too many is overwhelming.

◼︎Details ->

Link to your social media profiles.

Being in multiple places on the web makes you more credible; especially if you have a following.

◼︎Details ->

Show off your press mentions.

Displaying logos of well-known publications (that have talked about you) builds credibility.

◼︎Details ->

Display contact information in the footer.

Making it easy to contact you makes you more transparent and reputable.

◼︎Details ->

Link to your shipping & return policies in the footer.

Being open and honest about your policies shows that you're a legitimate business.

◼︎Details ->

Link to your legal notices in the footer.

Terms and conditions and a privacy policy aren't just good for your legal team, they make you look professional too.

◼︎Details ->

Highlight any certifications or awards.

Being recognized by credible organizations shows quality and leadership.

◼︎Details ->
Prioritizing Usability

Don't use full screen pop-ups.

Interrupting your visitor as soon as they arrive is a poor experience, even if you're offering them a discount.

◼︎Details ->

Use your navigation to show your product range.

A nav item called "shop" or "products" is a missed opportunity. Instead, show top-level product categories.

◼︎Details ->

Don't get too creative with your navigation.

Keep your navigation at the top of the page, with your logo & nav items to the left or center and your cart to the right.

◼︎Details ->

Use hierarchy to channel your visitor's focus.

Size corresponds with importance in visual design. Use this to help visitors focus on key elements.

◼︎Details ->

Use fonts that are easy to read.

Start with a legible typeface, then size and space it appropriately throughout your site.

◼︎Details ->

Always put your cart in the top right of the page.

Core customer journey elements, like your cart, should be where visitors expect them to be.

◼︎Details ->

Use a mega menu (for large inventories).

Allowing visitors to easily find what they want, without visiting multiple pages, is an ideal experience.

◼︎Details ->

Make your CTAs consistent & noticeable.

Calls-to-action should contrast with the rest of your page and should keep the same style throughout.

◼︎Details ->

Never have more than one primary CTA per section.

If a visitor can choose between two buttons in one section, they should be visually different.

◼︎Details ->

Use descriptive CTAs.

Be detailed about where the button will take the visitor. "Shop now" can always be more specific.

◼︎Details ->

Clearly distinguish your sections.

Use spacing and headings to keep your sections visually distinct throughout your website.

◼︎Details ->

Provide enough info on your product cards.

Product cards should show style variations & pricing, at a minimum.

◼︎Details ->

Only use photos that accurately represent your products.

Use real, high-quality photos of your products; not photoshopped or rendered images.

◼︎Details ->

Use filters on category pages.

If a category has a lot of products, use filters to help visitors narrow down the selection.

◼︎Details ->

Use sub-menus on collection pages.

On "All Products" (and similar) pages, use sub-menus to help visitors select the category they want.

◼︎Details ->

Always indicate the page being viewed.

No matter where a visitor is on your site, the design should tell them where they are.

◼︎Details ->

Use the typical 'top of product page' structure.

Product image(s) to the left and name, price, description, variation selectors, and call-to-action(s) to the right.

◼︎Details ->

Make it easy to see all product photos.

Whether you use thumbnails or show a gallery on scroll, make it easy for visitors to cycle through your product photos.

◼︎Details ->

Keep product imagery consistent.

Visually consistent product photos help visitors easily understand the differences between products.

◼︎Details ->

Use tags to highlight product attributes.

Highlight product features—like sale items or featured collections—using small visual elements on product cards and pages.

◼︎Details ->

Make it easy to select product variables.

Size, color, quantity, and other product options should be easy to select (and change).

◼︎Details ->

Make it easy to understand purchase type.

If you have the option of one-time purchase or subscription, make each option clearly different from the other.

◼︎Details ->

Always point visitors to their next action.

Don't assume the visitor knows what they should do next. Use CTAs to guide shoppers through the journey.

◼︎Details ->

Design for accessibility.

Visitors with visual impairments or low vision (nearly 10% of the population) should be able to easily use your website.

◼︎Details ->

Allow visitors to control sliders.

Sliders (or carousels) that automatically change take control away from your visitors.

◼︎Details ->

Show recently viewed products.

Reminding users of their viewing history helps them orient to your site and compare products.

◼︎Details ->
Deepening Desire

Make an immediate impact on your homepage.

Use immersive visuals and direct language to effectively introduce your brand to homepage visitors.

◼︎Details ->

Use an alert bar to make announcements.

Sales, special offers, and other announcements should be made in an alert bar above your navigation menu.

◼︎Details ->

Keep your photographic style consistent.

Inconsistent photography is the hallmark of an amateur business. Or worse, it's the result of using images you didn't take.

◼︎Details ->

Show personality with your lifestyle photography.

Through models, settings, props, and situations, inject your visuals with your brand's unique attitude.

◼︎Details ->

Use props & settings in product photos.

Props add interest and can complement the features and purpose of your products.

◼︎Details ->

Use lifestyle imagery to show customer transformation.

Lifestyle imagery shouldn't just stick to in-use situations. Show how your products can improve the lives of potential customers.

◼︎Details ->

Align your style with your target audience.

Color, typography, and photo style define who you are. These aspects should match the vibe of your target audience.

◼︎Details ->

Use fonts that support your personality.

There are hundreds of thousands of fonts in existence. Find one (or two) to amplify your personality.

◼︎Details ->

Speak in a tone that matches your audience.

Your website copy should feel like a conversation. It could be more formal or more casual depending on your audience.

◼︎Details ->

Use color to convey personality and draw attention.

Color creates impact and evokes emotion. Use colors that align with your brand and use contrast to direct attention.

◼︎Details ->

Use animation to draw attention.

Animation can be easily overdone. Use subtle movements to direct attention to areas of interest.

◼︎Details ->

Use interactions to deepen engagement.

Hover states and click interactions can make an experience feel more immersive and informative.

◼︎Details ->

Have photos for each product variation.

If a user selects a different color for a product, show photos of the product in that color.

◼︎Details ->

Show product scale in photos.

Use props to show the size of products in your photos. Common items (e.g., coin, iPhone, soda can) are best.

◼︎Details ->

Show off the good things customers say about you.

Highlight customer reviews that speak of specific value you've communicated in your copy.

◼︎Details ->

Show off the good things the press says about you.

Highlight snippets of press mentions that amplify the customer value your products provide.

◼︎Details ->

Highlight social media discussions about your brand.

Direct social proof is powerful. Show what people are saying about your brand on social media.

◼︎Details ->

Show customer photos on product pages.

Allow customers to upload photos with reviews and bring in (good) photos from social media to give a different perspective.

◼︎Details ->

Overcome objections with your copy.

Visitors will have reasons to not buy your products. Directly address these objections in your website copy.

◼︎Details ->

Highlight your brand values.

People want to buy from businesses that do good. Tell them what you care about most.

◼︎Details ->

Make your About page about your customers.

What do you do differently to serve your customers? That's what your about page should communicate.

◼︎Details ->

Put a (human) face to your brand.

Photos of the founder(s) and their teams add a beneficial human element to eCommerce.

◼︎Details ->

Use product pages to tell a story.

Below "the fold" on product pages, show the unique value each product provides the customer.

◼︎Details ->

Lead with benefits.

Talk about features, but only after highlighting the benefit the feature creates.

◼︎Details ->

Show customer questions & answers.

Posting answers to common customer questions reduces inquiries and the risk of abandonment during the experience.

◼︎Details ->
Providing Assurance

Set post-purchase expectations.

Communicate shipping times & costs, discounts, and purchase options before visitors get to checkout.

◼︎Details ->

Use a familiar cart design.

Take advantage of common website design patterns to make your cart easy to use.

◼︎Details ->

Reinforce shipping expectations in cart.

Communicate potential shipping delays and normal delivery times in your cart.

◼︎Details ->

Allow visitors to easily leave your checkout process.

Shoppers should be able to easily click back to your homepage or their cart during checkout.

◼︎Details ->

Make it easy to get help during checkout.

Let shoppers know you're there for them. Use live chat or include an email or phone number on your checkout page.

◼︎Details ->

Clearly display extra charges.

Make any extra charges—like taxes or handling fees—clear during checkout.

◼︎Details ->

Link to return policy during checkout.

Highlight main points (e.g., 30-day free returns) and link to your full return policy in checkout.

◼︎Details ->

Offer various payment methods.

In addition to the four major credit card companies, also offer quick checkout options like Apple Pay & Google Pay.

◼︎Details ->

Convey security during checkout.

It could be as simple as a lock icon on your checkout button. Secure checkout badges also heighten the perception of security.

◼︎Details ->

Show the steps in your checkout process.

Always show the checkout flow at the top of the screen (e.g., cart -> personal information -> shipping -> payment).

◼︎Details ->

Make sure your form can be auto-filled.

Visitors should be able to allow their browsers to auto-fill the checkout form for them.

◼︎Details ->

Don't ask for more info than you need.

Only ask for the information you absolutely need to complete the order. Each additional field increases risk of abandonment.

◼︎Details ->

Allow customers to check out as a guest.

Unless you're selling a subscription, let your customers check out without an account.

◼︎Details ->

Allow customers to easily make an account after checkout.

Even if they choose "checkout as guest," give customers the chance to simply set a password to create an account.

◼︎Details ->