DEV Community

Cover image for Introducing Medusa.express: The easiest way to set up an ecommerce store
Sebastian Rindom for Medusa

Posted on • Updated on • Originally published at medusajs.com

Introducing Medusa.express: The easiest way to set up an ecommerce store

medusa.express automatically creates pages for the products in your catalog, each of them optimized to make the purchasing experience as frictionless as possible, by bundling the checkout flow alongside the product.

The underlying thesis is that not all customers and not all products benefit from a fully-fledged website experience. Consider three different examples:

  • Retargeting: Customers in the lowest part of the marketing funnel, say customers who have already shown an interest for a given product. Why not give these customers a super quick way to purchase your products.
  • Complex purchases: Consider stores with huge product catalogs where customers need guidance (algorithmic or human powered) to find the desired product - once the right product has been determined the goal becomes to complete the transaction both from the store’s and the customer’s perspective.
  • Simple store owners: Some people simply do not need a full store setup to sell their products; bloggers, one-item sellers or outbound salespeople might be sufficiently served by sending a link to their users for purchasing certain products while not having to maintain a full webshop frontend.

How it works

  1. A customer visits a link e.g. https://medusa.express/basic-tshirt
  2. The customer selects the variant of the product they wish to buy
  3. Customer completes the checkout flow and the order is completed

Medusa Express Workflow

Why did we build this concept?

One of the most liberating things about using a headless commerce engine, like Medusa, is that you are not constrained to follow any standards around how the shopping experience should be for your products. Standards are great in most cases, but they do also sometimes limit what is possible and therefore hinders you from opportunities if the standards are too tightly coupled with your software.

You are surely familiar with the standard 2-column product grid, that serves as entry points to a product page with an image on the left side a size and quantity ticker on the right side, which ultimately have the goal of taking you to a checkout flow that looks the same across all brands. This experience has not changed much over the past many years and a likely reason for this is that companies still treat their digital commerce channels as physical retail stores.

In physical retail stores, all customers are directed through the same path and products are placed along this path in a way that is meant to optimize the stores sales as carefully planned by a retail merchandiser. The same approach has been taken for digital commerce experiences to the point where even the most advanced personalization engines for ecommerce rarely offer solutions different from placing candy and chocolates along side each other in a supermarket does.

What is yet to be leveraged is the fact that the internet enables an infinite amount of purchasing experiences to be offered and medusa.express is a simplified demo that illustrates how headless commerce can make this possible.

Try it now!

Prerequisites: To use Medusa Express, you are required to have a running Medusa server. Check out our quickstart guide for a quick setup.

1. Create your Medusa Express project

git clone --depth=1 https://github.com/medusajs/medusa-express-nextjs medusa-express
Enter fullscreen mode Exit fullscreen mode

2. Navigate to your project and install dependencies

cd medusa-express

yarn
# or 
npm install
Enter fullscreen mode Exit fullscreen mode

3. Link your Medusa server

Create a .env.local file and add the following environment variables:

NEXT_PUBLIC_MEDUSA_BACKEND_URL=http://localhost:9000
# Stripe key is required for completing orders
NEXT_PUBLIC_STRIPE_API_KEY=pk_test_... 
Enter fullscreen mode Exit fullscreen mode

4. Try it out!

Spin up your Medusa server and Medusa Express project and try it out.

Ensure that your STORE_CORS configuration in medusa-config.js in your Medusa project includes the URL of your Medusa Express project (defaults to http://localhost:8000)

Conclusion

Medusa.Express is a solution for big and small stores alike. Whether you want an easy way for your customers to buy your store’s products, or you want a simple way to let people buy your products online, Medusa.Express is a fast way that lets you deliver a quick shopping experience for your users.

Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via Discord.

Top comments (0)