Questo sito è stato creato su Editor X.

Stay up on the latest trends and insights for agencies

ENTER A VALID EMAIL ADDRESS

I've read the Wix Privacy Policy and agree to receive emails from the Partner Blog and Partner Team.

Business email

Build a high-class eCommerce store with these 5 Velo examples




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 Velo 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 Velo, as you’ll see in these five options below:



Add to cart gallery


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.


> Check out the ‘Add to cart gallery’ code here.



Wishlist


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.


> Check out the ‘Wishlist’ code here.



Shop reviews


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.


> Check out the ‘Shop reviews’ code here.



Wix Code Shop Reviews for eCommerce store


Related items


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.


Highest rated products gallery


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.


> Check out the ‘Highest-Rated Products’ code here.




0 comments

Talk to our Partner Team and discover exclusive benefits to help you reach your business goals.

See how your agency can grow with Wix

Full name

ENTER YOUR FULL NAME

Business email

ENTER A VALID EMAIL ADDRESS

Phone number

ENTER A VALID PHONE NUMBER

By clicking Let’s Talk, I consent to Wix.com using the contact details entered in this form to contact me by phone or email, using automated technology, to share opportunities available exclusively to agencies. I’ve also read the Wix Privacy Policy and agree to receive updates from the Partner Blog.

Thanks for submitting!

See how your agency can grow with Wix

See how your agency can grow with Wix

Let's Talk