This is a submission for the Wix Studio Challenge .
What I Built
Wix Website : https://adixander07.wixstudio.io/veloshop/login
Login Credentials:
Email: [email protected]
Password: test@256
If you wish to see all functionalities of VeloShop try to see the Bottle Product having all functionalities as I did not feed ProductData for all Products for now.
Initial Wireframe : Figma Link
VeloShop
This project aims to create an innovative eCommerce experience using Wix Studio, leveraging Wix’s APIs and libraries to enhance user experience. The platform includes a dynamic product page, custom cart implementation, Authentication and an AI-powered custom T-shirt generator, providing users with a seamless and interactive shopping experience.
Key Features
Registration and Login Process: The registration and login process is implemented using the Wix Members API, providing seamless user authentication and management And Protecting all pages if you are not authenticated.
Home Page: The home page is designed using the Wix Members API to display member-specific content and dynamically update media sources. It showcases testimonials with navigation and handles member authentication by redirecting non-members to the registration page.
Catalog Page: The catalog page leverages the Wix Data API to filter and sort products by category and price, binding product data to a repeater for easy browsing. It handles navigation to product detail pages and retrieves product data from collections.
Contact Page: The Contact Page was designed directly into wix Studio Connecting it to Contact Collection that is use for storing all the people who contacted the admin.
Subscribe Page: The subscribe page employs the Wix Data API , Wix CRM API and Triggered Emails to allow users to subscribe to newsletters by entering their email. It stores subscriber information in the Wix CRM and sends triggered emails to users confirming their subscription, enhancing user engagement and communication.
Dynamic Product Page: The dynamic product page, built using the Wix Stores Frontend API, displays detailed product information, including descriptions, prices, SKUs, ribbons, and media items. It allows users to add products to the cart with specified options, load and display product reviews, and handle review form submissions.
Dynamic Product Page: The dynamic product page, built using the Wix Stores Frontend API, displays detailed product information, including descriptions, prices, SKUs, ribbons, and media items. It allows users to add products to the cart with specified options, load and display product reviews, and handle review form submissions.
Custom T-shirt Page: The custom T-shirt page integrates the Wix Data API and Replicate API to enable users to generate custom T-shirt designs using AI models. It stores generated images in the ‘AIImage’ collection and displays them on the custom T-shirt page, allowing users to create and view unique designs easily.
Custom Cart: The custom cart feature, implemented using Velo by Wix, allows for a highly personalized shopping cart experience. Users can add products, view item details, update quantities, and proceed to checkout seamlessly. This custom solution ensures flexibility and enhanced user control over their shopping experience.
Demo
Try It out Now : https://adixander07.wixstudio.io/veloshop/login
Login Credentials:
Email: [email protected]
Password: test@256
If you wish to see all functionalities of VeloShop try to see the Bottle Product having all functionalities as I did not feed ProductData for all Products for now.
In The video the AI Image is not generated because of this as I published my code on github the token was disabled but now i have changed token and you can use it.
Some of the files on github are empty as I did not use custom templates of wix store and members
This repo is part of Git Integration & Wix CLI, a set of tools that allows you to write, test, and publish code for your Wix site locally on your computer.
Connect your site to GitHub, develop in your favorite IDE, test your code in real time, and publish your site from the command line.
Set up this repository in your IDE
This repo is connected to a Wix site. That site tracks this repo’s default branch. Any code committed and pushed to that branch from your local IDE appears on the site.
Before getting started, make sure you have the following things installed:
To set up your local environment and start coding locally, do the following:
- Open your terminal and navigate to where you want…
Development Journey
My development journey began two days after the challenge announcement. To organize my thoughts and vision for the website, I started by creating a wireframe on Figma. This initial step helped me to clearly define what I wanted to achieve with my website. Then, I moved on to developing on Wix Studio, initially installing Wix Stores and Members to leverage their prebuilt collections.
As my journey progressed, I began using my own collections, becoming comfortable with features like the Multireference Field. For the APIs, I started with the Auth APIs and then transitioned to using Wix Data for displaying product data. This was followed by implementing the Stores API to display products and a custom cart.
I initially intended to use the eCommerce API but due to some errors and time constraints, I decided to stick with the Stores API, which allowed only the admin to add products. Then, I had the idea of creating custom T-shirts with AI-generated images. I was inspired by Ania Kubow’s YouTube video on ChatGPT, but I faced the obstacle of having no credits left in my OpenAI account.
That’s when I discovered Replicate, which offers free usage for a limited period. I ran the Stable Diffusion model on it and created the custom T-shirt page, although much work is still pending, like the add-to-cart feature. I used Wix Secrets to store the API key for Replicate. Additionally, I set up triggered emails and a subscribe page that sends an email to users who subscribe.
Throughout this journey, I faced numerous errors, but Anthony was incredibly helpful with his expertise on Wix, and I owe him a huge shoutout for conducting this challenge and guiding a complete beginner like me in creating a wonderful Wix website. This is my third dev challenge, and here are the links to my previous projects.
🛠️ Development Milestones:
- Figma wireframing
- Initial setup with Wix Stores and Members
- Transition to custom collections and fields
- Auth API, Wix Data, and Stores API implementation
- Custom cart development
- AI-generated custom T-shirt page using Replicate
- Triggered emails and subscribe page setup
👨💻 Shoutout to @anthonywix and WixWiz YT channel : Thanks for your superpowers and guidance throughout this challenge!
🚀 Previous Dev Challenges: GymBuddy Yogify
- Wix Members API: Used for implementing the registration and login process.
- Wix Data API: Utilized for displaying product data and managing collections.
- Wix Stores API: Employed for displaying products and implementing a custom cart.
- Wix Secrets: Used to securely store the API key for Replicate.
- Replicate API: Used for generating AI images for the custom T-shirt page.
- Wix Location API: Used for handling navigation and URL routing.
- Wix CRM API: Utilized for triggered Emails.
- Wix Ecommerce: Tried Transitioning from wix stores to e-commerce api.
<!– Thanks for participating! →