This is a submission for the Wix Studio Challenge .
[proof of concept]
Please read before checking the demo
What I Built?
TikCommerce, an Ecommerce experience for the next Generation.
Please note, that this is a proof of concept / prototype as creating a complete site would take more time.
If you liked the concept and you want me to build this for you, contact me
What is TikCommerce?
TikCommerce is an Ecommerce experience for the GenZ and the coming generation, who are addicted to short video social media platforms such as Instagram Reels, TikTok, Youtube shorts.
How it works
Keeping things intuitive, Working of TikCommerce is simple.
- Seller uploads a short 1 minute(max) product video.
- Show few different videos on the landing page.
- User clicks on a video.
- Based on engagement on the video, the user is recommended similar products that they are likely to buy.
- User can easily add any item to cart, by just double tapping on the video, and continue browsing.
Why TikCommerce?
Currently, most platforms rely heavily on static product images, delivering a repetitive and uninspiring shopping experience. However, research indicates that videos generate six times more engagement and significantly improve conversion rates.
Consider this: the average TikTok user spends approximately 52 minutes per day watching short videos. This highlights a powerful trend—consumers are moving towards short video and visual content.
If you want to really connect with your audience and get them excited about your products, videos are the way to go. TikCommerce taps into this by using engaging, high-quality short video content in the shopping experience. This makes shopping more interactive, fun, and effective at driving sales.
Features
We'll explore some of the features we've already built, ones we're planning for the future, and those we couldn't implement yet due to the current limitations of the Velo API.
(SPA) Single paged dynamic home page content, no refreshing to load new product, use the existing page and dynamically updates the content to keep the users engaged. (remember one second load could cost Amazon $1.6 Billion in sales)
People generally dislike too much change, so TikCommerce draws inspiration from familiar platforms like Instagram Reels, YouTube Shorts, and TikTok. This ensures a streamlined experience where users can navigate easily without having to learn a new interface.
Recommend new products based on the video, engagement, such as add to cart, time spent watching the product video etc.
Mobile: Swipe up for new videos [hasn't been built due to lack of touch events in velo, instead a button is placed]
Double tap on video for add to cart, similar to double tap for like.
Review's like comments.
Reduce cluttered interfaces, and provide easy to use experience.
A quick review emoji based on rating, for people to understand the quality of the product.
Proof of concept Demo
This is a proof of concept. Though I have tried to make it responsive to every device, the site may appear and function differently in different screens, please read the challenges developing complex sites with Wix Studio below. Since the challenge is to bring out a unique experience in ecommerce, I have decided to put this out.
You can also check out the video
About us page:
TikCommerce about page
Demo landing page:
TikCommerce landing page
Screenshots
Please forgive me for the blurry screenshots, the screenshot are pretty bad on my lap.
Desktop view
Mobile view
Dev view
Current implementation
We'll briefly discuss how the current implementation works.
- Since this is a prototype, I have pre-loaded and cached all the products from CMS (I used CMS, so I can have the fields I wanted), as querying them one by one is slower and ruins the experience.
Currently next video/product is recommended based on product tags, if the user adds the product to cart a product with similar tag is recommended, else a random new video.
Uses CMS, to load product details, reviews, User etc.
Converts a number based rating to emoji that GenZ loves, Reviewer rates a product between 1-5, the total rating is taken and a familiar emoji is rendered.
CMS / Database view
Here's a brief view of the database.
Users Table - Contains information about the customer
Products Table - Contains product related field
Reviews Table - Contains review, with productName and User being related field
Limitations in current implementation
Since this is a prototype there are few limitation either due to lack of time, limited knowledge of Velo API or due to limited functionality in Velo API.
- Currently there is no swipe for new videos
- Users can't signup or add reviews as its just a proof of concept at the current stage.
- Currently, visitors can't purchase products directly because only premium Wix subscribers can add a payment flow.
- Limited products and recommendation.
Future improvements
- Add swipe for next feature for touch devices.
- Improve recommendation, based on engagement.
- Add more related products.
- Cache only few products, and not all products.
- Improve responsive design
Source code:
The source code for TikCommerce concept is available under GPL license on Github source code for tikcommerce
The concept is licensed under Attribution required
Note: Some of the elements for products, such as Images and videos, are takend from Wix site, Pexels.com, Unsplash.com, Offical product videos.
Challenges developing this
I faced quite a number of challenges, either due to me being new to Wix and my limited knowledge of wix, and/or because of limited Wix/Velo's features/functionalities.
Note: If you are a wix employee, some of these are just feedback you can use to improve experience.
- Firstly, I am very new to Wix and Velo, so some of the parts could have been done better.
- Currently its very hard to understand the scale of objects, until published. The preview scale looks different than the one that comes out after publishing the site, making it less intuitive to work with.
- Some animations and actions work differently in preview and live site, making it hard to debug.
- One of the biggest pain I felt while developing is that currently there is no way you can just hide elements in just Dev mode which made it hard while switching between the video popup modal and developing the other parts of the site.
- As Wix aims to be a low-code, all-in-one platform, the Velo API should enhance JavaScript functionalities rather than limit commonly used features of JS, please also see Velo API is frustrating.
- The studio UI felt a bit heavy, as compared to Figma. Sometimes the WIX studio UI would get sloppy or crash.
- Not able to zoom in and out using mouse scroll, making it hard to see if the element has gone below the viewport.
- Sometimes its just super hard to correctly select the element you want to.
- We should be able to add Video Box element to repeater (not the video player), see Can you have video box inside a repeater
- With over 60% of the internet traffic coming from mobile devices, The Velo API must support touch events/ swipe events and triggers.
Build your TikCommerce
Want to supercharge your customers shopping experience with tikcommerce? Contact me,
Who am I?
Hi, I am Paul, A full-stack engineer and an open-source developer.
Follow me on dev.to to read more concepts.
Follow me on Github, for open-source
Top comments (5)
Great stuff! This is indeed a very innovative idea. Great job
Thank you!
Your explanation is crystal clear!
I'm genuinely impressed by your idea, and I can definitely relate to the challenges you've mentioned (I've been there too). Great job :)
Thank you for the compliment and ya, using the studio editor to create complex stuff is a bit challenging.
damn bookmarks > likes on this post!