You’ve successfully enticed the customer this far into your site; they’ve weaved through the banners and listing pages. You’ve sold them on just the aspects they need to consider making a purchase. This is where you seal the deal; your chance to use every item at your disposal to sell the customer on why this item is just what they need. The best way to do this is to offer as much information about the product as possible (this will also keep your return rate down – big plus there!). You’ll want to depict this information in a way that is upfront, clear, and concise. Use attractive imagery that highlights special features of the product, enhance those product descriptions as if you’re talking to your customers in a way that makes sense to them, and if this isn’t just the right product they’re looking for, offer them an array of cross-sells (because sometimes they don’t even know what they want until they see it!). The product detail page is the collaboration of all the product content, and the way you arrange the page is key.

The saying “less is more” can be perfectly applied to a product detail page, as long as all of the content of interest is being provided in a tidy and attractive manner. Don’t overwhelm the customer; we cannot have them drowning in too much or irrelevant information or scrambling to find out what size or make the product is, or god forbid, trying to locate the Add to Cart button. After revisiting how your customers shop, you’ll need to determine a treatment for the following best practice inclusions on a standard product detail page:

  • Product Imagery: when shooting or obtaining product imagery, think about how it will look at the following sizes: thumbnails (often used on the product listing page), alt-views (mini images below the main product image), default product detail image, and zoom (the up-close look at the product and typically quite larger). Lighting is important, alternative views that display the side, top, bottom, back or the image can be helpful, and quality of the image can affect how quickly the image loads on the page. (This requires special consideration when dealing w. very large zoom images.) For product zoom, there are a myriad of ways to trigger the zoomed view, from hovering the image to clicking the image, to having the zoomed view overlay the main product image to displaying to the right of the product image. Based on the page design, the zoomed view should be a compliment not only to the product, but to the page layout.

Depending on how many products you have and the load process, preparing and loading the images could be a significant amount of work. You’ll need to consider sizing and image naming conventions for each image; if the platform provider offers the option to bulk load images you’ll want to explore that, otherwise you may be loading images (for each product) manually.

If video will be featured on your site, you’ll need to determine who will be hosting your video. (Vimeo and YouTube are some of the better choices at no additional cost; Akamai offers excellent premium services.) Outside of hosting, will the video require a custom video player and will that display inline (on the page) or pop-out as a modal?

  • Product descriptions and details. Try to detail as many aspects of the product as you think the customer would find helpful; dimensions, materials, wash instructions, handling care, use cases, et al. If you have a surplus of info that you want to share, considering adding scrollers so the customer can scroll to see the additional information (rather than smattering the page with a sea of words), or tabbed dividers, broken into sections that can manage the segregated information. The language should be consistent throughout while being unique per product. If your products warrant the need for a size chart or other type of identifier, be aware of that up front and be ready to identify which products will need those identifiers, as well as how those products would be identified.
  • Cross-Sells. This is where you can introduce additional product to your customer, in any number of combinations. The more popular cross-sells include “You May Also Like,” “Others Also Bought,” “Similar Items,” “Recently Viewed,” and a popular rise of “Create the Look” (which provides links to the other products contained in the main product image). Cross-sells can be automatically or manually generated. For the automatic generations, logic will need to be determined so the system will know which products to display for which cross-sells.

Gaining widespread popularity is the use of product ratings and reviews. These ratings and reviews are generated by other customers who have purchased the product and want to provide feedback. Options include the chance to leave comments, rate the product, “thumbs up or down” features, and ask questions / receive answers about the product (this can be between customer to customer or customer to brand). Comments and ratings can be moderated (and usually are!) to exclude inappropriate content and subject matter. Additionally, comments can be set up to be pre-approved so they’ll appear on the site in real time, or they can go through an approval process, at which time the comments/reviews would only appear on the site once they have been screened and approved.

Depending on the nature of your product, a wishlist may be a popular feature. The wishlist is managed in the “My Account” section and has the option to be shared or private. From the product detail page, the customer can select the product specifications and add them to their wishlist for future purchase. You’ll need to consider treatment for how to handle out of stock items that are trying to be added and consider what happens if the user is logged out? Logged in? What will be the flow for adding to their wishlist (think success and error messaging)? Can they have more than one wishlist? If so, can they name these wishlists and how will they be managed? If someone adds items from their wishlist to their cart will the product remain in the wishlist or fall off? If the item has become out of stock, will it remain on the wishlist and indicate that it is no longer in stock? If QTY can be specified on the wishlist, what happens if the available inventory is less than what the customer originally requested; how will the customer be notified? Are you going to set up “Now on Sale” notifications if the customer wants to be notified when the product is put on sale? The wishlist is a great way for the customer to set aside product that they’re interested in purchasing and you want to make that process is clear so that when they come back to the site, purchasing the item is as easy as 1, 2, 3.

With the rise of social media, customers have come to expect a chance to share their prospective purchases. provide the customer a way to share the product they’re thinking of purchasing or have already purchased. Typical inclusions (though dependent entirely upon your customer base and their social habits) are Pinterest (Pin It), Facebook (Share), Twitter, and email share. This allows the customer to engage with their peers, obtain feedback, and advertise your brand and product. Specify what will be shared; recommendations include the product image, price, product name and if optional, product description. This is a great way to garner excitement about the product and brand and enhance your online presence.

And finally, don’t underestimate the importance of a tantalizing “Add to Cart” button.  This should not get lost on the page; let it be bright, big, and worded in a way that branding would speak to your customers.  There have been various A/B tests done over the years on the placement, size, and color of Add to Cart buttons, high level summary of which can be summed up to: red tends to get more clicks than green or orange, size should be obvious and semi-sizable rather than small and off to the side, and “Add to Cart” tends to get more clicks than “Buy Now” or “Purchase.”

A great way to highlight products that deserve additional attention is by including product badges, or flags on the product block on the listing pages. Badges and flags will need to be designed to appear somewhere on the product image that will call attention to the product, but will not hide or cover the image or details in a way that the customer’s view is blocked. Remember, the product image is the first thing the customer’s see when landing on the page. If there are a combination of flags/badges that may ever be used together (such as back in stock and best seller), think about how they will layer; how will more than one badge interact with another badge? Also, the display of each badge will need to be decided upon: will the badge appear and fall off automatically (if so, according to what criteria?) or will badges and flags be manually assigned per product or in bulk?

Some of the more popular badges and flags are:

  • New Arrivals – will this be automatically or manually generated? If automatic, according to what criteria? You’ll want to specify the exact logic, such as: for product loaded within the last 3 days “new arrivals” badge should appear and then fall off after 14 days.
  • Best Seller – will this be automatically or manually generated? If automatic, according to what criteria? Here you’ll need to determine what makes a product a best seller? An example would be items that have sold the most in the last 30 days.
  • Online Only / Web Exclusive - will this be automatically or manually generated? If automatic, according to what criteria? How will products that are online only be identified as such in the backend? This is typically something that can be communicated via bulk product or inventory load, depending on the provider.
  • Limited Quantities Available – will this be automatically or manually generated? If automatic, according to what criteria? An example here would be: If an item reaches an available to sell (ATS) of 5, display the Limited Quantities Available badge.
  • Out of Stock (this would require an inventory check on the listing page, which can slow down page load time, depending on how many products are displayed on the page at time of page load.) – This feature would be dependent on your intended out of stock treatment (detailed below).
  • Final Sale – will this be automatically or manually generated? If automatic, according to what criteria? Such as, “all items that have a sale price or are merchandised into xyz category should display the “Final Sale” badge; the badge should fall off when the product is no longer on sale or has been removed from xyz category.
  • Only # left! (this would require an inventory check on the listing page, which can slow down page load time, depending on how many products are displayed on the page at time of page load.) – this is a great way to build excitement and a sense of urgency surrounding product availability.

A great way to allow your customer to add product to their bag without clicking into the detail page is to let them shop directly from the list view. Quickshop allows the customer to view the product details from a modal (or pop-up) that overviews the product (sharing more information than the listing page but less information than the detail page) and add directly to their cart without leaving the listing page. Upon hover of the product block, a smaller button would appear (how will this interact w. the other badges and flags?) inviting the customer to click to activate the modal, from which they can view product details, scroll through alt-views, select product specifications, and add to cart or wishlist. This steamlines the purchasing flow by eliminating clicks; the fewer clicks the customer has to make to add something to their bag, the higher the percentage your conversion potential. It also allows them to preview products that they may be interested in enough to want to have a glance, but aren’t committed enough to want to click into the detail page just yet.

Product will be displayed in product blocks which populate the list or grid view of your listing pages.  A product block is the designated space where you display high level product information, such as price and image. Depending on how much product you’re working with, think about how many products should display per page; how many rows? how many columns? (This will often be determined by the size of your images; common practice will display an average of 12-16 products per page though keep in mind that page load time can be affected by how many products display upon default page load.) Think about various ways that customers would want to browse those products visually and explore options such as list view, small image grid view, large image grid view.

Once you’ve identified the content that needs to be available at first glance, you can build your product block.

Best practice places the following in the product block:

  • Image: images should be clear and as large as can possibly be fit onto the page without threatening page load time or quality of the image. You never want to compromise the quality of your images; higher quality images that truly showcase the product will always get more clicks than those that are stretched, blurred, or pixelated.  It’s recommended that you offer the largest high-quality image possible. While stock photos are acceptable, be cautious that the images do not differ too drastically from a consistent aesthetic framework; they should be shot in similar styles with lighting and angles, ideally across the site. There are some fantastic third party vendors that can shoot your product for you (and even offer features such as 360 degree views and super high quality zoom images, which is a huge perk for those of you who have fine print or details on your product).
  • Name: should be concise and relatable to the way your customer base thinks about and searches for your product. Find out if there are character restrictions (such as numbers, symbols, character limitations (for example, names cannot exceed 20 characters)) that might affecting the display of your product name. Ensure that product names will display in their entirety or trail off gracefully; you don’t want the product name being cut off or wrapping to skew the page. If the product name is on the longer end or has symbols, be sure that the page will accommodate those products accordingly and the product grid will not be skewed. It can be a quick fix, but for the customer’s eye, it’s not a pretty thing to see!
  • Price: after image, this is the second thing that most customers look at upon first glance of the product. You may want to have the font slightly increased here, or bolded so it’s a quick find.
  • Sale Price: should be displayed next to the original price (shoppers love knowing how much they’ve saving!) and clearly indicated as the active price. Common practice has a strikethrough the original price so the discounted amount is obvious. Make sure that any price filters take into account sale price, rather than the original price.
  • Additional Colors / Options: this is where you can display color swatches (typically for shoes/accessories/apparel) or other symbols that indicate “additional options” are available. Clicking the additional options can change the product image (scrolling through the alt-view images), or remain static.
  • Hover reaction: there are an array of display options that can activate when the customer hovers (mouses over) a product block. Popular reactions include rotating the image to display a side or back view, rotating the image through the product alt-views, displaying a zoomed view of the product, highlighting the product block, displaying quickview or quickshop buttons, and displaying ‘add to cart’ buttons.

Be sure to keep the appearance of the product block clean and clear.  When your customers land on the listing page, what information are they going to want to know right off the bat for each product and how can you arrange that in a way that’s obvious and aligned with your brand image?  This is your chance to overview your product, offering staple information by highlighting important elements and inviting the customer to click into that product for more information and purchasing.

Welcome to your product showcase! Here is where all of your product will display in an array of product blocks.  When landing on these pages, depending upon how your site was built, the display of the product will have been either manually merchandised or set to a logic (such as, newest products display first). Product listing pages will exist for each category, and subcategory (first tier, second tier, third tier, if applicable). Most listing pages will be formatted in exactly the same style, unless you specifically request a custom listing page for a specific product category. An example of this would be a Brand Listing Page, which is often a unique listing page that showcases brands, rather than products. Consider adding pagination to both the bottom and top of the listing pages, with an option to “View All / View Pages.” Depending upon how much product you’re displaying on the page, a “back to top” indicator at the bottom of the page or that slides down the page can be useful.

All of these aspects will complement how well you’re able to get relevant product in front of your customer by giving them the option to both sort and filter through the products:

  • Sort. Sort will take all of the products within the respective category and sort them according to the selected sort criteria. This allows the customer to peruse all of the products within that category and make their selections from the comprehensive list of what is merchandised into that category.

Best practice sort options include:

  • New Arrivals: these can be automatically identified by the “date modified” on the product or the “load date” of the product, depending on the platform offering.
  • Best Sellers: these can be automatically identified by a back end reporting system that would permit the displayed ordering of the highest selling items of that category; what has sold the most?
  • Price – High to Low
  • Price – Low to High
  • Highest Rated: if you are including product ratings and reviews, this is a great feature to include, and a very popular way to sort. The parameters for “highest rated” would need to be determined, for example, would you want to show the products in the descending order for what received the most ratings, or the highest rating (for example, 5 stars). In other words, what constitutes “highest rated?” And then of those products, would top rated be followed by most recently rated (if you had 4 products that have 5 stars each, which order do you display those 4 products; maybe by name or, bestselling or other?).
  • Product Name – alphabetically
  • You’ll want to ask about any additional sort options if you anticipate needing any custom additions

Next, think about how your customer can delve into existing product:

  • Filter. Filter will pare down the product to display only those which match your filter criteria, within the respective category. Depending on your product content, you can break down the filter selections so they’re most relevant to your product.

Some of the more popular filter options are:

  • Price: selecting a price parameter to display product that is within a certain price point.
  • Color: can they select more than one color at a time?
  • Type: can they select more than one type at a time?
  • Size: can they select more than one size at a time?
  • Can the customer filter overlapping options at a time? You’ll want to ensure the filters work together to pare down the product selection.

Both Sort and Filter options will help you help your customers get to exactly what they’re looking for based on attributes of those products.  Keep in mind, you can only sort and filter off of product attributes that are currently being tracked or recorded.  For example, if you want to filter by a color, that color needs to be directly tied to that product. If you want to start filtering or sorting off of product attributes that are not currently tracked or recorded, find out 1. if your platform can support that information and 2. if that information can be bulk loaded or if it would need to be manually entered by hand.

If you’re a cutting edge brand who wants to break the mold, go for it! But remember, often times shoppers aren’t looking for a new way to shop; in most cases, the best way to capture new and returning customers is to provide a site that lets them purchase with ease and confidence. (Of course go to creative town on those custom features pages though!) Let’s break down the elements of a great homepage:

This is face of your brand, the first impression, the “welcome to our store” online introduction to the world – make it pop! You’ll want to make sure that your homepage is formatted in a way that will allow you to show as many sides of your brand’s online personality as you can imagine wanting to show (or at least until you can splurge for a site redesign in the future). Offer the customer the chance to get to better know your brand through social media (the bottom nav is a great place to share your Facebook, Pinterest, Instagram, Twitter, Google+ links) and the expression of your brand design.

The web is a fast changing space; design from 5 years ago is going to look like design from 5 years ago, so it’s important that the homepage maintain as much flexibility as possible; you want as much control over this page as you can possibly get your hands on so you can update it and keep it fresh. For presentation, do you have diverse product lines that you want to showcase? Video that deserves front page treatment? Active rotating promotions to build excitement? A singular product line that endlessly sells out and drives the sales of your business? It’s common practice for a brand to change their homepage imagery daily to weekly via the following:

• Banners/Sliders – these are the larger images that take up a bulk portion of the homepage. They can slide across the page, flash into appearance, fade away, or any other number of snazzy movements. Sliders are a good way to showcase more than one line of imagery in a certain space.
• Kickers – these are the smaller banners that display often below the main slider/banner and are a good way to feature highlighted product, promotions, and advertisements.
Additional templated homepages – if your platform provider can offer you more than 1 homepage that you can switch out at your convenience, take advantage of it!
Email sign up modal (or, pop-up) – when the customer lands on your page, do you want to try to capture their email address right off the start with a pop-up, maybe dimming the background of your site faintly? There are mixed reviews on this; some rave by the effectively, others say it’s obnoxious and obtrusive. This really depends entirely upon the perception of your customer base (another reminder to know your customers!). If you include a modal, you’ll want to make sure you give the customer options, such as 1. Sign up 2. Maybe later (prevent them from receiving this for 7 days, 14 days, 30 days, etc), 3. No thank you (don’t display this until their browser caches are cleared at the next cycle) 4. Give them an “x” to close out the modal if they want nothing to do with it; you never want your customer to feel trapped.

Additional homepage features that cannot be overlooked include a well-thought out site navigation – a key resource for finding product quickly on the site. Best practice has this situated near the top of the page or on the left hand side of the page, with a bottom nav that includes other, often informational, categories. Presenting product should be front and center, so make those categories obvious, relatable, and directly tied to how your customer likes to shop. Think about how many levels of categories you’re going to need; first tier, second tier, and third tier categories possibly. You’ll want the depth of your product categories to be driven by the breadth of your product. This can be managed via top nav drop downs or click into in order to see the subcategories.

If you have a digital newsletter, promotional emails, or a future plan to reach out to your customers via email, you’re going to want to capture their email address via an email sign up field. You can ask for as little information as their email address, or ask for more information about them; often requested are name, birthday, gender, mailing address. The less information *required though, the safer you are in guaranteeing more sign-ups. This is often best placed at the top of the page (though try to limit clutter at the top of your page). If you’re requesting more information than just email address, clicking “submit” should take to a proper email sign up page where you can then ask for their additional details. Don’t forget to think about how you’ll be communicating with your customers – do you need a third party to manage this, or can your platform handle sending bulk promotional emails?

Lastly, but certainly not least! is providing a clear way for the customer to search your site. Depending on your platform, there may be a basic search functionality included that will permit searches by exact spelling, similar spelling (sounds like), and search by any number of the product facets (groups that identify a product). You’ll want to find out which fields of your product are contained in the search library, for example, long description, short description, product name, sku, keywords, brand, season, any other applicable data fields. Ask to see any type of “stop words” lists for words that are excluded from the search and clear up any other data entry points, such as including a space at the end of the search term (you’re going to want those products to show up, regardless if there’s a space at the end or beginning of the search text field!).

The website site should render on the following operating systems: iOS, Mac, and Windows. You’ll want to identify target screen resolutions, monitor size (standard, wide screen), and browsers. Browser recommendations are Firefox 24+, Chrome 21+, Safari latest –1, and IE 7 or 8+ (depending on what browsers your customers tend to use most often). In addition to your desktop ecommerce site, you’ll want to consider the need for a mobile site (these are often at additional cost and typically not included in a standard build). The percentage of mobile shoppers has skyrocketed in the past 5 years, so if you have the flexibility (time and cost), mobile sites are highly recommended in most cases. Here’s a quick read on the shift towards mobile: Nearly half of consumers use multiple devices when shopping.

Mobile sites can be handled in the following ways:

  • Responsive design: This requires a CSS implementation on each unique page of the website that will allow the page to render gracefully at (usually) 2-3 different view ports (viewpoints). For example, the page would display in its standard format on the pc, at viewport #2 for a tablet, and at viewport #3 for a mobile device; with each page optimized to create a seamless shopping experience, regardless of the device the site is being viewed from. When you manage your website for the pc / desktop, you would not need to manage anything additional for a responsive design mobile site, as the site would merely modify its display to accommodate the additional views. There are design restrictions with this option, as each page would be a reactive modification to each page on the desktop.
  • Free standing mobile site: This is an entire website built independently of your pc / desktop site (typically product can be pulled directly from the desktop site so that would not need to be managed in both places). Often times content would need to be managed in two places (this is in most cases, though there are platforms that can connect the two sites so certain content would only have to be loaded once (products, advertisements, site content)). With this option, the site can be designed from scratch, and have an entirely different layout than the pc view; this would be a freestanding and independent custom website.
  • Site scraping (not recommended): there are companies that offer to “web or site scrape,” in which software will extract information from your site and reformat it in a “mobile friendly” view. Anytime you make a change to your ecommerce site proper, you’ll also need to make the change to the scraped site, where formatting can often be finicky and there are a number of legal cases surrounding this option.

Before you enter into conversations with your developers about what viewports (points of viewing on devices that your site will render gracefully at), be sure to understand your customer and their shopping habits. If you have a current online ecommerce site, Google Analytics is a great tool to better understand your site traffic (and it’s free!). When exploring your site statistics, you’ll want to delve into the following:

  • What devices are your shoppers using (pc, iphone, Android, ipad, others)? What are the percentages for each? This will be valuable information for you to know when specifying what devices the site should render to.
  • How much time are customers spending on your site and which pages and areas of those pages command the most attention?
  • What are your customers searching for? Are those search results an accurate reflection of your available and relevant product offering?
  • Where are your customers shopping from (around the corner, domestic, international)?

If you do not have a current ecommerce site and are working purely from brick and mortar, take advantage of those face to face relationships and ask for their help! Through the use of contests, surveys, and promotions you can learn a lot about their shopping habits and how they would expect the online shopping experience to flow.

A few starting questions might be:

  • Do you shop online / how often?
  • What makes for a good online shopping experience?
  • What are some of your favorite online stores? Why? Worst? Why?
  • How do you shop online? (from your desktop, mobile phone (what kind of device), tablet (what kind of device)?
  • What would be most important thing you would like to see as a part of your online shopping experience?

The better you understand your customer base, the better you can present your product via an outlet that is relevant to their shopping preferences!

A great place to start is by exploring and understanding your target market. Who are the customers you hope to bring to your site and what are their interests? Identify this person, singularly; what do they like, where do they shop, who are your competitors, and how can you do what those competitors do, only better?

Make sure that your branding is cohesive; let your logo be complimented by the colors, patterns, and fonts of your site. Create a lasting impression on your customer with a look and feel that is clean in its execution, clear in its messaging, and immediately identifiable. The customer should know that when they’ve landed on your site, they know where to return to find the best [selection] [quality] [emerging product] [other enviable feat] available on the WWW.

Many e-commerce platforms offer templates that let you control, admin, and edit design elements, many do not. It’s a good idea to understand how much flexibility you would have if you signed with xyz platform provider. Because your branding should always be consistent, it’s not advised to change design elements regularly, however, having the flexibility to change certain colors or patterns around holidays can help build excitement around the shopping experience, which is something to consider.

In short, what makes your brand unique? Dissect and understand those features and then use them to define your place in the market; this will help drive the layout, requirements, purchase flow, and versatility of your site.

Follow

Get every new post delivered to your Inbox.