Within the last five years, worldwide eCommerce sales have more than doubled, reaching nearly $3.5 trillion annually. And it doesn’t look like this growth trend will slow down anytime soon.
As businesses and industries of all sizes have jumped on the eCommerce express train, we’ve seen the nature of shopping itself change. Customers are no longer just looking for high-quality products, but also for a top-level user experience.
For web designers, it’s crucial to stay up to date with what these retailers are expecting to see on their sites. You may have even noticed an increased demand for advanced eCommerce tools and features, such as wish lists, customer reviews, and related items sections.
To expand the range of sophisticated capabilities you can offer your eCommerce clients, our Corvid by Wix team has developed a series of ready-made examples. No need to start from scratch. Instead, your main job here is to either copy the example and customize it to your liking, or copy the code from it and merge this feature where needed on your clients’ sites.
Overall, it’s fairly simple to learn how to work with examples on Corvid, as you’ll see in these five options below:
When creating an eCommerce website, you should keep your client’s end goal in mind: To convert every single visitor into a buyer. Okay, we will admit there is no magic formula to completely avoid the fearsome abandonment rate.
All is not lost, though.
There are many efficient tools to decrease the percentage of visitors who won’t ever become customers.
What’s one of the best ways to ensure that users make it past the checkout point? Make it as easy as possible for them to reach it. Ideally, they should be able to go through the whole shopping funnel within a few clicks. The “Add to cart” example enables users to see multiple angles of an item, choose a color preference, and add it to the cart - all without leaving the product gallery.
In order to get this result, each product will require three images taken from different angles in each color available. A custom gallery using a repeater is connected to the products collection and placed on a new page. The repeater includes containers set to change the images based on the user’s hover position, as well as elements that display the name, price, and color selectors. All of these items are hidden on load, and can only be seen when a user hovers their mouse over the container.
Over the last few years, member wish lists have practically become a necessity for online stores. Allowing visitors to save the products that they are interested in has proven to have a positive impact on shopping cart abandonment rates. In many occasions, customers use this feature while browsing from their mobile devices so they complete the purchase process later on from the comfort of their computers.
The products-wishlist collection is comprised of two core fields: User ID and Product. The User ID identifies the user who is adding an item to their wishlist, while the Product points to the product added to the wishlist. A combination of these fields is used to correctly display the products with their appropriate icons on each customer’s wish list.
Then, a ‘My Wishlist’ page is added to the ‘Members Pages group’ in order to present the chosen items in association with that user. On top of this, an additional group of elements are displayed to prompt the user to shop if their wish list is empty.
User feedback is one of the strongest assets that can be added to an eCommerce website. Consumers are much more likely to purchase a product if others who have tried it before can vouch for it.
‘Shop reviews’ enables shoppers to rate, review, and recommend products in Wix Stores. The average rating and recommendation percentage are then displayed on the product page, followed by the details of each review and date that the review was submitted.
The added Reviews Collection includes fields for both the reviewer’s information and the item in the Products collection, and the reviews-states collection compiles total rating, review count, times recommended, and product ID.
Users add their review in a lightbox that contains input fields for their personal details, written commentary, photos, a rating, and recommendations. Individual reviews are saved to the Reviews Collection, while statistics for the product are added to the review-stats collection.
In addition to making it easy for visitors to purchase items, a professional eCommerce website should also be able to persuade them to continue their shopping spree. This is where ‘Related items’ comes in to play. It’s an area that displays products similar to the one the client is currently looking at, based on predefined relationships.
Each item included in the related-products collection represents two items in your client’s Products collection which you have manually designated as being connected. When the product page loads, this element searches for those related items as well as similarly-priced items. If neither is found, then the section is hidden.
These results are displayed on the product page and placed inside a strip, with the repeater set to showcase no more than four items at the time. Each of these related items include an image, name, and price.
It’s obvious that products with high reviews are immediately more attractive to potential buyers. In order to emphasize this factor, after you implement the ‘Shop reviews’ example (as explained above), you can add a highest-rated products gallery to the store that automatically pulls these items.
The productRating collection that was built includes two fields: Product ID (which is imported from the Products collection), and Rating (which calculates the average review).
In order to display the best-rated products at any given moment, a query is sent to ‘productRating’ every time the website’s home page loads. Whenever a visitor hovers over any of the products displayed, an ‘Add to Cart’ button is presented as an immediate call-to-action.
Comments