Tutorials

Commerce starter

This starter is a good choice if you want to explore how Uniform would work with a commerce scenario and you would like to see how marketers and merchandisers can build shopping experiences visually and personalize based on shopping context, interests and virtually any criteria. The starter represents a sample modern e-commerce storefront focusing on the shopping experience part.

This starter is implemented in Next.js 13, using React components, and includes:

  • Live preview for all page types and in-line editing.
  • Personalization powered by Uniform Context.
  • A product catalog (using a mock product catalog API that you can replace with your own).
  • Product detail pages.
  • A shopping cart (implemented using a mock cart service).

Check out the live version of the Commerce starter.

Here is the source code.

The starter relies on a FakeCommerce integration on Uniform. FakeCommerce is a headless-commerce service for demonstration purposes, and is installed with this starter. A developer will need to set up a running local development environment for FakeCommerce following the steps in the next section.

Replace FakeCommerce with your own headless commerce service during ongoing development.

While you can git clone this starter and set it up manually, Uniform recommends using the CLI if you have limited experience with Uniform.

  1. Open a terminal, and navigate to where you want your local project to be created.

  2. Run this in terminal or command line:

    and enter the following values when prompted:

    PromptResponse
    Can we open a browser window to get a Uniform auth token?Y
    Paste your Uniform auth token [hidden][Paste in the value from your clipboard]
    Hey [username]! Choose a Uniform team for your new project[Select appropriate team name]
    Choose your preferred framework (Use arrow keys)[Choose Next.js or Nuxt]
    Choose one of the Uniform starters (for Next.js) (Use arrow keys)Hello World
    What's your project name?[Give a descriptive name for your project]

    About this step

    This command performs a number of tasks for you:

    1. Creates a new Uniform project.
    2. Populates the Uniform project with sample content.
    3. Creates a new front-end application using your preferred framework connected to your new Uniform project.
    4. Starts the new front-end app locally.

  3. Open your browser to http://localhost:3000 to access the front-end.

  1. Replace the FakeCommerce integration with one of the available commerce integrations.
  2. Implement the real cart functionality depending on the specific commerce engine API.
  3. Connect external data into one of the components.
  4. Add an integration for a system that's a part of your stack.
  5. Try out personalization.
  6. Deploy to your preferred delivery platform. Uniform offers special capabilities with some CDNs, such as edge-side personalization. Please refer to the list of CDN integrations.
Last modified