Codux Help Center
Browse our articles to find the answers you need
Create an Ecommerce App With the Ecommerce Starter Project
Our eCommerce Starter project is an online shopping platform that uses Wix Headless as the back office for managing the store. This project is your launchpad to creating an online store of your own. It's designed to be simple and straightforward, combining various technologies that we'll explain in the sections to follow. By the end, all you have to do is deploy your Vite app!
Remember, this is more than just an example - it's a starter. The main goal here is to empower you to build your own store. You can set up your store on Wix Headless, manage your products, payments, deliveries, and more. Feel free to modify the design or the application however you see fit!
Technologies Overview
- Wix Ecom, Redirects, SDK, Stores: Wix libraries used for various CMS functionalities in the app.
- Vite: Serves as the front-end development environment.
- React Router DOM: Manages navigation between multiple routes (pages).
- Classnames: Assists in assigning multiple classes to elements.
- SWR: Handles caching content in the client app, fetching new content periodically, and providing a simple API between the content cache and React components.
- Sass: Facilitates writing scoped CSS.
- Faker: Generates mock content for boards and tests.
- Radix-UI React Icons: Used for adding icons to the app.
- JS Cookie: A simple, lightweight JS API for handling cookies.
Opening the Project
To open the eComm project, just select it from the quick-start templates in Codux.
Like all of our templates, Codux will create a local copy of the project from our GitHub repository that you can modify independently. Run the installation script when the project opens to install the project's dependencies, and then you'll see all the boards we created to make our Wix Store.
The Boards in Our Project
The boards in this project are the building blocks of your app. Each one represents a different aspect of your online store. You can interact with the full app by opening the App board, and then by clicking Open in a new window from the menu.
Boards of Application Pages
These boards have a wrapper which connect them to the data in Wix Headless.
- App: This is the full working app that you can interact with - a sneak peek of what your online store could look like!
- Home Page: This board shows the design of the home page. It's the first thing your customers will see, so it's important that it looks good!
- Products Gallery Page: This board connects to real data from the e-commerce headless store to showcase your product offerings.
- Product Details Page: This board also pulls real data from the headless store and shows the design of a product details page.
- About Page: This is the About page of your app. You can modify the properties of the elements in Codux through the Properties panel to customize this page for your own app.
- Cart and Cart Empty: These boards control the design of the shopping cart in the app when empty and when with product(s) added.
- Thank You Page: This page displays in the app after the order is completed.
Boards of Isolated Components
These boards make up parts of the boards mentioned above:
- Cart Item: How an item in the cart looks.
- Drawer: The side drawer and its toggling mechanism.
- Footer: The footer of the app.
- Header: The header of the app.
- Hero Image: The hero image that shows on the home page.
- Product Card: The layout of each product card.
- Product Card No Image: How a product card looks without an image.
Test Boards
These boards are connected to test mock data (not connected to data from Wix Headless) so you can change the page wrapper's properties.
- Test Home Page
- Test Product Details Page
- Test Products Gallery Page
Just head to the settings property and change its props in the Properties panel to see how the page looks with different designs.
Theme Boards
These boards are where you can tweak your app's theme styles and style variables.
- Theme Styles
- Theme Variables
Select an element that you see on these boards that you want to restyle. Then, in the Styles panel by the selector, choose View code to jump straight to the stylesheet where these styles are defined.
To view and change the variables in the project, head to the Files panel and open theme.module.scss.
Configure Your Own Store
Step 1: Create a Wix Headless Project
Begin by creating your first Wix Headless project by following this link. Make sure to select eCommerce as the business solution you want to add.
Give your project a name and click Get started. Refer here for information on creating a project from the official Wix Headless documentation.
Step 2: Create an OAuth App
From your new project's dashboard (or, if you already have a site that you want to use, from that site's dashboard), click on Headless settings.
Under OAuth apps, create an OAuth app and copy your client ID.
Step 3: Connect Your Site in Codux
Back in Codux, connect the eCommerce project to the Wix Headless project by heading to the
.env file located at the root of the project directory. Changing the client ID located to the right of the equals (=) sign with the one you created and copied in the step above. This will replace the store that we created for the project with your own.
Step 4: Add a Wix Store to Your Wix Headless Project
Note:
You can skip this step if you're using an existing site that already has Wix Stores set up to manage inventory.
In the previous steps, you created a Wix Headless eCommerce site that you connected your Codux project to. To manage the inventory for your eCommerce app, you now need to add a Wix Store to your headless site.
Back in your site's dashboard on Wix.com, add the Stores app to it. You'll find the option from the site's dashboard under Apps > App Market > Wix Stores.
Wix will direct you to the product management page right after you add Wix Stores to your site, where you'll manage your store's inventory going forward.
Step 5: Refresh Your App Board in Codux
In Codux, refresh your board previews to see data from the store that you set up. Note that your store will look the same as ours until you make changes to products in the Wix Stores dashboard.
Was this article helpful?
