The goal of this quick start guide is to implement the core shopping journey, from browsing products to checking out, in a branded storefront. You start from the Elastic Path Commerce Cloud React PWA Reference Storefront (the storefront) and then add as much of your own branding assets, locales, and customized strings as you choose.
At the end of the process, you will have a branded storefront that supports:
- Searching and browsing products
- Adding products to a cart
- Editing and deleting carts
- Checking out a cart
The storefront is designed as an open source mobile Progressive Web Application (PWA) that has the capabilities for local browser storage page caching and persistent session management. For more details on progressive web applications (PWA), see Progressive Web Apps and create-react-app.
For more details on store development and more advanced store building, contact your Elastic Path sales representative, and refer to Composable Commerce.
To quickly create a branded storefront, perform the following actions:
- Set up your development environment.
- Get the source code from the public git repo.
- Preview your storefront.
- Set the language and locale.
- Set the default currency.
- Add your branding assets.
- Add products. You need some products to support the basic shopping flows.
- Enable product search with Algolia.
- Build and deploy your storefront (optional).
Set up your development environment
To work with the storefront, you must do the following:
- Install development tools
- Set up accounts
- Ensure that you have some knowledge of the technologies used in the storefront.
The storefront development environment requires the following software:
- Node.js, the most recent long-term support version (currently 14.15.4).
- Visual Studio Code with the following extensions:
- Windows Only: Windows Subsystem for Linux (WSL)
Ensure that you have the following accounts set up:
- Elastic Path Commerce Cloud account
- Stripe account - Stripe is used as the payment gateway. From your Commerce Cloud Dashboard, configure Stripe as the payment gateway. For more information, see Settings.
- Algolia account - Algolia is used for search functionality to display search results, facets, and filtering.
- Netlify account - Netlify is used to deploy and host the site.
To customize and extend the storefront, you need knowledge in the following technologies: