We put together a list of steps on ways, and techniques on how to design a perfect eCommerce website for small businesses. But why follow our steps? Our team at BRADIENT has extensive years of experience with design trends and a vast amount of User Experience Design data on things to do and what performs well when designing an eCommerce website.

Design your website

Determine the layout of your website. Nothing is required when designing a website, but we suggest you must have a visible header which must include the company logo and at lease, the following links: Contact and About. Users usually look for these two components. 

A perfect example of a successful eCommerce navigation is the EllenTracy website.


 

When designing an eCommerce you are recommended to have a slider, that will feature some of your products and information about the company. Use this to promote your sales and discounts to get users attention. However, new trends suggest otherwise that a slider is not a requirement since you don't want the users to spend too much time scrolling through the slides. Some examples that don't include a slider are Lululemon, Apple, Banana Republic and Guess

 

Almost every other example of how to build a website will include the following. A featured product with a carousel included right under after the previous step example of using the slider.

The feature products usually contain the most popular or newest item on your online store. A total of 3 to 4 products should be in the design, no more than four on the carousel. Each featured product must have a thumbnail of the product followed by a title and a price.

The fourth element its optional for the homepage. It's what we call a categories pages what we called AKA any-other important item related to your site and lastly the footer. 

The footer must include all of the relevant URLs related to your site, some additional items to be included on the footer design of your site are the social media links and maybe an Instagram feed or Tweeter feed.

After the designing of your eCommerce website, the following are important things to consider. Make sure that you only have one <h1> tag followed by a <p>, you can include as many <h2>, <h3> tags but only one <h1> tag, second is to make sure to include proper schema.org tags to the navigation and the footer URLs and proper Product Schema tags to your carousel of featured items.

Here is a basic example of what Product Schema tags look like:

<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="brand">ACME</span>
  <span itemprop="name">Executive Anvil</span>
  <img itemprop="image" src="anvil_executive.jpg" alt="Executive Anvil logo" />
  <span itemprop="description">Sleeker than ACME's Classic Anvil, the
    Executive Anvil is perfect for the business traveler
    looking for something to drop from a height.
  </span>
  Product #: <span itemprop="mpn">925872</span>
  <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    <span itemprop="ratingValue">4.4</span> stars, based on <span itemprop="reviewCount">89
      </span> reviews
  </span>

  <span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    Regular price: $179.99
    <meta itemprop="priceCurrency" content="USD" />
    $<span itemprop="price">119.99</span>
    (Sale ends <time itemprop="priceValidUntil" datetime="2020-11-05">
      5 November!</time>)
    Available from: <span itemprop="seller" itemscope itemtype="http://schema.org/Organization">
                      <span itemprop="name">Executive Objects</span>
                    </span>
    Condition: <link itemprop="itemCondition" href="http://schema.org/UsedCondition"/>Previously owned,
      in excellent condition
    <link itemprop="availability" href="http://schema.org/InStock"/>In stock! Order now!
  </span>
</div>