Gheblo - Improved & Innovative eCommerce Experience

Enes — Mon, 15 Jul 2024 04:15:28 +0000

When we think about eCommerce experience we shouldn't only focus into the part of "before purchase" because experience will be also important after the purchase. Customers will search for things like; cancelling orders, returns and refuns or tracking status of the order etc.

So we need to cover both parts not only the single part of that experience. And usually experience after purchase is more important because it'll be the one that will bring customers back to your store again.

With that mind and much more I have created Gheblo.

What is Gheblo?

Gheblo is a modern eCommerce platform in fashion and apparel industry that's focused to women side of the industry. Instead of replacing current experience of eCommerce which people used to it we are improving it and also makinng it innovative at the same time.

So we keep the usual eCommerce experience and just making it better with more helpful features that fits into current general experience of eCommerce.

Because replacing existing habits is not something easy and also not something tested untuil you test, you will never know if people will like it or even find it useful. Because of that we wanted to keep the usual experience and add things top of that experience.

And here is the important features list:

Homepage

Gheblo's Homepage Includes:

Suggested products from a specific collection.
Scroll animations via built-in features.
Suggested videos based on algorithm and/or logged-in member watch history.
CTA banner to convert visitors into members.

Category Page

Gheblo's Custom Category Page Includes:

Automatic load more.
Filtering and sorting listed products.
Adding products into favorites.

Search System

Gheblo's Full Text Search System Includes:

MongoDB Powered full text search feature.
Filtering and sorting results.
Client-Side search history.
Adding products into favorites.

You can search in products however you want MongoDB will find most relevant results and we will sort them based on the relevancy score they got.

Product Page

Gheblo has a fully custom, modern and advanced product page that includes:

Product images based on color selection.
Stock status based on selected variant.
Extra details about the product. (info sections)
Product favorites. (members-only)
Product reviews, expanded reviews section, travel reviews that only has photos.
Product questions, ask questions and get answers from other members.
AI helper to help visitors and members with their questions about the product.
Automatically generated suggested prompts based on what asked before for specific product. If there isn't enough data it'll use default suggestions.

Custom Cart

I think in modern eCommerce sites with UX in front we don't need to visit the checkout page each time we want to go to checkout. And because of that I have created a custom cart where users can directly go checkout. This custom cart also includes:

Faster purchase via direct checkout redirection.
Edit products in your cart including their options and quantity.
View product images based on selected variant.
Remove product from your cart easily.

Explore Products System

This is the most innovative feature we have in Gheblo. Visitors can watch short 9:16 videos just like Instagram Reels, add products to their carts while watching videos about the products and complete their order at checkout.

Explore products by watching videos that's uploaded by members.
Upload videos of yourself and tag related products to your video.
Custom algorithm to sort videos for visitors and members differently.
Easily add products to cart in the same page.
Easily add products into favorites in the same page.
View your cart and directly go to checkout within the same page.
Share videos by copying specific URL of the video.

Custom Member Pages/Area

All Gheblo members deserves custom member pages. Members can track their order statuses and details, check favorites and manage favorites, manage reviews, view questions and more.

My account home shows most recent orders within last 30 days.
Favorites shows, products in favorites list.
Orders shows all orders, member can view order details, create a return request and start a return process, cancel un-delivered orders and more.
Reviews shows both reviewed product and product waiting for review. All reviews can be managed from here.
Videos shows all videos uploaded by the member, all videos can be created, edited and deleted from that page.
Questions and replies shows all questions and replies of the member. Member can manage questions and replies in an isolated page.

Support Center / Knowledge Base

Having a support center to place articles that will answer many questions that visitors and members can ask is something must have. We have that in place but top of that we have AI powered support agent that can answer questions and also reference articles it's used to answer these questions.

MongoDB powered full text search in knowledge base.
AI powered support agent to answer questions.
View and read articles in the support center.
Connect to live chat/support when needed from footer or from the article pages.

All of the UI is optimized for all screen sizes including mobile.

Development and Design

Since we can't use custom elements and HTML embeds it was hard to build some of the places but not impossible. You can view and explore all source code which has;

24 Folders
52 Backend Files
26 Page Files with Code
16 Public Files

3011 Lines of Code at Backend
6664 Lines of Code at Frontend
279 Lines of CSS

Source Code in GitHub

APIs and Technologies Used in Gheblo

Gemini API
MongoDB APIs via WeivData NPM Package
Storeon Velo for State Management
NodeCache NPM Package
Other NPM Packages

Wix Backend APIs

Wix Secrets
Wix Members
Wix Users
Wix Auth
Wix Data
Wix Router
Wix eCom
Wix Billing
Wix Media V2

Wix Frontend APIs

Wix Window
Wix Location
Wix Stores
Wix SEO
Wix Storage
Wix Site

Future Plans (aka Couldn't Done Due to Limited Time)

Affiliate system with explore system
ML/Tensorflow powered algorithm for explore system
Better suggested products with AI/ML
Better UI/UX with React components via Custom Elements
Optimize site loading performance
Add more animations and loading states

and much more...

Demo

https://www.gheblo.com/

You can create accounts with fake emails there isn't any verification. If you want you can use emails that ends with @gheblo.com

You can also use this account to see how it looks like when there are videos and orders and other things in it:

testing@gheblo.com
VHn3jsQ3Uq

You can create issues in github repo for code realted questions, or ask them below.

Thanks!

DEV Community: Enes