Transition to Next.js 14 with Server Components

## **The challenge**

Medusa is an [open-source backend commerce framework](https://medusajs.com/) with APIs and tools to manage Products, Orders, Customers, and more. For everything beyond standard commerce functionality, we make it easy to introduce your own custom data models, business logic, API endpoints, etc. Medusa’s APIs can be used in storefronts that your customers interact with - an example of such a storefront is our [Next.js starter](https://medusajs.com/nextjs-commerce/).

On many websites, content changes relatively infrequently. And when it changes it’s often acceptable that there is some delay between content updates to visitors seeing it. For a blog post, for example, it’s acceptable that a few minutes pass between hitting publish and the post showing up on the site. When this is the case, statically generating and serving the webpages via a CDN greatly benefits visitors as the page loads quickly.

In ecommerce, however, dynamism is crucial. When a customer adds something to their cart, it should happen instantly. If a product sells out, it should be immediately clear to all customers. And with multi-currency and personalized prices, the customer should see the price they will be charged in real time. Ecommerce websites, therefore, have to interact with a server that can deliver this information. Front-end frameworks like React all have mechanisms for this and in the past years, the common approach has been directing browsers to fetch data from servers that the framework would then render to HTML on the client.

This is also what Medusa’s Next.js starter did. When the customer visits the Cart page the starter would trigger an API call from the browser to fetch the customer’s cart data from Medusa and render it. To keep track of the user’s Cart and optimize the storefront experience, the previous version used client-side state and React Context to store Cart IDs, cache requests, and much more.

With [Next.js 14](https://nextjs.org/), you can still make requests from the client; however, new tools like [React Server Components](https://vercel.com/blog/understanding-react-server-components) and Server Actions are now available to simplify the developer experience for caching and state management when building highly dynamic websites. This new paradigm requires you to think differently about how you build your React applications, so there was a bit of a learning curve to migrating the starter to using the new tools. Below are the key differences I encountered and how I have understood React’s new tools.

## **Data fetching and state**

Let’s tackle data fetching and state management first, taking the shopping cart as an example.

The Medusa server already keeps track of the contents of the current shopping cart. By retrieving this data, storing it in the Next cache, and then accessing that cached data from any component that might need it, we eliminate the need to manage the cart state in the client.

By revalidating the cart data whenever we modify it, we make sure the cache always holds an updated version of the cart, accessible throughout the app.

Let’s dig a bit deeper into how this works in Next.js:

### Fetching and caching

Next.js has a caching mechanism built-in that automatically works with the native `fetch` API. This means that every fetch request is automatically cached until revalidated. As a result, you can safely fetch the same data from every component that needs it without worrying about doing 20 duplicate requests. This eliminates the need for keeping a global data state using Context or prop drilling.

At first, re-fetching the same data multiple times in a component tree seemed counterintuitive as you’d normally fetch data in one place, and pass it down via either Context or props. You must also remember to revalidate the relevant parts of the cache *every time* you mutate data on the server. These patterns take some getting used to.

My way of thinking about it is that in the previous model, a `fetch` meant going to the server and getting data back. With Next.js’s caching mechanism, a `fetch` is an abstraction for an *intent* to get some data and Next.js is then in charge of delivering it either from its cache or by going to the server for you. This creates super fast interactions, but it also forces you to be meticulous about revalidation which was not a concern previously.

Once figured out, the caching mechanics are very effective in practice. Fetching new data from the server is swift, and all subsequent requests load almost instantly from the cache. This leads to a responsive front-end performance when navigating through your app.

### Data mutations with Server Actions

Now we know how to fetch and cache data. But how do we handle data mutations, like adding an item to the shopping cart? User interactions often trigger these mutations and require us to use a Client Component to render variant selectors and an "add to cart" button. But we aim to manage API interactions server-side. To accomplish this from a Client Component, we can use *Server Actions*.

Server Actions are **asynchronous functions** executed on the server. They can manage form submissions and data mutations in Client Components. Under the hood they trigger a POST request to the Next.js server. The actions can be used like any other function in your project, making them convenient to work with.

In the new Starter, we use the Medusa JS client through Server Actions to interact with the Medusa server. This replaces many client-side data mutation hooks from the `medusa-react` package used in previous versions.

### Implementing “add to cart” - before and after

Let’s take the “add to cart” action and compare how to implement it in both the old and the new version.

![](/images/snippets-1-large.jpg)

First of all, we no longer have to wrap our root layout in Context Providers to give its children access to data and actions. In the new setup, we can keep the root layout simple and server-rendered.

![](/images/snippets-2-large.jpg)

Instead of defining the `addToCart` function in the `ProductProvider`, we’d now export it from an `actions.ts` file. There’s two significant differences here you should note:

1.  The `“use server”` keyword at top of the file. This tells Next.js to execute this function on the server, even if its called from a client component.

2.  The `revalidateTag` function call on line 15. This ensures that cart cache is revalidated and all components using cart data will fetch the latest data: the cart with the newly added item in it.

![](/images/snippets-3-large.jpg)

Now we can import and use the `addToCart` function like any other function in a client component. Notice the `"use client"` keyword on top of the file. This tells Next.js this should be a client component. The product variant is fetched in its parent Server Component, and passed down as a prop. All data fetching and mutating is handled by the server.

## Server vs Client components

React Server Components allow you to build UIs that can be rendered on the server. Server components have a couple of benefits. Most notably, they have access to server-side data fetching. This can enhance performance by decreasing data fetching time and reducing the number of client requests. It also means you don’t have to expose API keys in the browser or worry about CORS. They can also be pre-rendered or cached on the server. This means the client gets served the rendered HTML and doesn’t need to download, parse and execute the JavaScript needed to render the page.

![](/images/Next.js%20server.jpg)

So when should you use a Server Component? As a rule of thumb, any component can be a Server Component, *unless* it needs client-side interactivity. If you need access to React hooks like `useState` or `useEffect`, or want to attach an `onClick` event handler to a button, you need to use a Client Component.

Client Components can be children of Server Components, meaning you can use a Server Component to fetch data server-side, and pass it down as a prop to the Client Component.

Let’s have a look at the product page to see the component structure:

![](/images/product-page.jpg)

All components marked in red, including the page itself, are Server Components. There are two exceptions: the product actions and the cart button/modal on the top right. These require client-side interactivity and event handlers. Since they are both rendered within Server Components, we can fetch cart and product data on the server and pass it down as a prop.

## Static pre-rendering

Looking at the product page above, we can identify some parts of the page that use static data. The product title, description and images are all available when we build the app, and don’t change. They won’t change based on user behaviour and the general change frequency isn’t high. This means we can pre-render these parts of the page at build time as static HTML. This will improve page loading times.

The cool thing is that we can leave ‘holes’ in the static HTML for the server to stream dynamic data into. The server can quickly deliver the statically generated HTML with fallbacks. This is done by wrapping the components that require dynamic data within `<Suspense>` boundaries and providing a fallback. As the user views the page, the server streams in the dynamic data, replacing the static fallbacks.

## Moving state to the URL

In the process of migrating to Next.js 14, one key shift in approach is the idea of moving state to the URL. This concept involves manipulating the URL to reflect and manage the application's state, providing a global state when using Server Side Rendering. Let's delve into how and why we implemented this strategy.

Medusa offers support for multi-region stores, allowing variation in pricing, inventory, and fulfillment options based on the user's region. The current region should be accessible by multiple components in the tree, on both the server and client sides. To facilitate this, we added a country code to the path, moving the region state to the URL. E.g. <https://next.medusajs.com/gb> or <https://next.medusajs.com/nl>.

There’s a couple of reasons we decided move the country code to the path:

*   It enables static pre-rendering.

*   It makes the country code globally available.

*   It allows search engines to index localized pages. This has a massive SEO benefit if you run a multi-region / multi-language store and want to rank well in all regions.

There’s a reason we didn’t go with URL search parameters to keep track of the region. I’ll explain why later.

### Using search params

Another example of where we moved state to the URL is in the checkout flow. Since it's a one-page checkout, we must monitor the completed checkout steps and determine which parts of the checkout UI should be rendered.

In the previous version, we’d keep track of this checkout state using React Context. Since the high-level checkout components have been upgraded to Server Components and the checkout state needs to be accessible to all child components, we've relocated the state to a `step=` search parameter in the URL.

![](/images/checkout.jpg)

There’s a couple of caveats to moving state to the URL. First of all, accessing search params from Server Components is a hassle. On the server side, they’re only available from within `page.tsx`, where they will be passed as props. If you need the params in any other Server Component, you’ll need to pass it down as a prop from the main page.

From Client Components it’s easy to access the dynamic URL params with the `useParams` and `useSearchParams` React Hooks respectively.

Be aware that using the `searchParams` prop or the `useSearchParams` disables static rendering. As a result, the entire route will be dynamically rendered. If you only need to access the params from a Client Component, consider wrapping that component in `<Suspense>` boundaries. This allows dynamic rendering up to that Suspense boundary, while the rest of the page can still be statically rendered.

To the best of my understanding, this doesn't apply to `params` and `useParams`. That's why I decided to use them for the country code. As a dynamic path parameter it’s still globally accessible, but doesn’t disable static rendering.

## Conclusion

In conclusion, the new patterns for fetching/caching that Next.js 14 introduces require some getting used to. Once you get the hang of it, It’s quite convenient to just be able to fetch the data where you need it, instead of having to set up client-side Context or endless prop drilling. The caching makes your UI feel very snappy and fun to use.

Same goes for working with Server Components and Server Actions. It requires you to plan out the structure of your app and forces you to think about what can be rendered on the server, and what has to be rendered in the client.

In my opinion, this method of work contributes to a cleaner, well-structured codebase. It clearly separates server and client code, logically groups Server Actions together, and the App Router enforces a clear project structure.

However, the approach is opinionated and involves a lot of 'magic' happening behind the scenes, such as with caching and Server Actions. Whether or not you're comfortable with this ultimately depends on personal preference.

**Want to try out the Medusa Next.js Starter?**

Like Medusa, the Next.js Starter is fully open source. Check out the [live demo](https://next.medusajs.com) or get the code on [GitHub](https://github.com/medusajs/nextjs-starter-medusa).


What we've learned from the transition to Next.js 14 with Server Components

Since selling its first mattress in 2016, [Matt Sleeps](https://www.mattsleeps.com/) has become popular among European consumers with its high-quality, adjustable mattresses. In 2023, the Financial Times listed Matt Sleeps as one of [Europe's five fastest-growing ecommerce companies](https://www.ft.com/ft1000-2023), with its 24x revenue growth over three years.

Matt Sleeps' success is a result of the company’s digital-first approach and ability to rethink the full customer experience when buying a new mattress. With initiatives like letting customers lend their mattresses for 120 days and untraditional publicity events like the [Hangover bar](https://www.youtube.com/watch?v=rkSPUV3lRBs) or their [“Bed Cinema”](https://www.youtube.com/watch?v=22gMSPNQ6T8), Matt Sleeps has always taken an innovative approach to their products. With Medusa, the time had come to push the bar for the digital parts of the customer experience.

<quote name="Joep Verbunt" title="Founder and CEO of Matt Sleeps">
I didn't know anyone who enjoyed buying a mattress. The big brands were sleeping in regard to ecommerce. Matt Sleeps was born with the mission to make the process of buying a mattress a fun experience even online.
</quote>

<video controls preload="none" style="object-fit: cover; max-height: unset; max-width: 100%; margin-left: auto; margin-right: auto;" poster="/images/matt-sleeps-video-1-cover.png">
<source src="/videos/matt-sleeps-video-1.mp4" type="video/mp4" />
</video>

## A commerce framework that can push the bar

When Matt Sleeps first launched, the company used a custom-built Laravel ecommerce platform to power its online store. However, the system's performance had decayed as more products were added, and hacky workarounds within the setup made it increasingly difficult to customize. This was not sustainable for a brand that constantly wanted to push the bar for its digital commerce experiences. Together with their implementation and performance marketing partner, [Webbers](https://webbers.com/), they sought to find a new commerce framework that would enable them to:

1.  **Build a unique and localized storefront experience:** As a primary showroom for their products, the storefront needed to be tailored to provide a unique experience while seamlessly supporting a multi-market setup.

2.  **Handle pricing complexity and ship new features fast:** To maintain their growth, the team required a framework that made it easy for them to rapidly build and test new features while also being able to handle complex requirements in the product and pricing areas.

3.  **Create a seamless admin experience:** With thousands of orders per month, Matt Sleeps needed an admin dashboard that made it easy for store operators to manage returns, track orders, review sales, handle customer reviews, and more.

While the team evaluated various composable and headless platforms, they ultimately selected Medusa. The modular and customizable architecture made it excellent for rapid feature experimentation and allowed it to support some of Matt Sleeps' more complex needs. Medusa also provides out-of-the-box multi-regional support, making it easy to use across multiple markets.

<quote name="Pepijn van Vlaanderen" title="CTO at Webbers">
Medusa made all the core ecommerce logic readily available and offered a great developer experience when we needed it to add custom logic to handle the more complex parts of the build.
</quote>

## Unique and localized storefront experience

Webbers built a responsive storefront that reflected Matt Sleeps' playful, experience-focused brand identity. They conveyed the brand and product story through videos, interactive content, and playful tools such as their [product configurator](https://www.mattsleeps.com/en/configurator). With the help of the Next.js framework, the team was able to achieve improvements of 30-50% across most of its core web vitals despite the heavy use of dynamic content.

<video controls preload="none" style="object-fit: cover; max-height: unset; max-width: 100%; margin-left: auto; margin-right: auto;" poster="/images/matt-sleeps-video-2-cover.png">
<source src="/videos/matt-sleeps-video-2.mp4" type="video/mp4" />
</video>

Matt Sleeps sells products in the Netherlands, France, Germany, and Belgium, with plans to enter more markets soon. As a result, the team required a CMS to localize site content and manage media assets without developer assistance. They chose [Builder.io](http://builder.io/) due to its user-friendly visual editing experience. [Builder.io](http://builder.io/) easily connects to Medusa using product IDs to pull pricing and inventory data for product pages.

Using Medusa’s [multi-region support features](https://docs.medusajs.com/recipes/multi-region), Matt Sleeps has been able to set up localized payment options while translating the site content directly within [Builder.io](http://Builder.io). Webbers also created a custom [Admin Widget](https://docs.medusajs.com/admin/widgets) that enabled the Matt Sleeps' team to configure localized storefront URL handles and product names directly in Medusa. These handles and names were used in the storefront, order confirmation emails, invoices, and similar contexts.

![](/images/matt-sleeps-tech-stack.png)

## Pricing complexity and new features

Medusa’s architecture allowed Webbers to build custom solutions for some areas with more complex requirements. One example of this was in the product and pricing area. Matt Sleeps offers various customization options for its mattresses and beds. For example, customers can modify a Boxspring bed's color, size, headboard, footboard, legs, and more. This allows for over 20,000 different possible product combinations. To avoid dealing with that many variants, Webbers customized the pricing configuration. Instead of creating separate variants for each combination, they added product add-ons as [metadata attributes](https://docs.medusajs.com/development/entities/overview#metadata-attribute) in [Medusa’s Product entity](https://docs.medusajs.com/modules/products). When the customer then selected different add-ons for a given bed size, the price adjustments were executed as [Price Overrides](https://docs.medusajs.com/modules/price-lists/backend/override-price-selection-strategy) based on a separate product master sheet that contains the price per add-on for each bed size.

Matt Sleeps also benefitted from Medusa's customizable architecture when implementing new custom features. For instance, the Matt Sleeps team wanted to experiment with bundled discount offerings; e.g., purchasing a mattress and a bed of the same size would result in a discount. For this, Webbers was able to define the bundle logic directly within Medusa by extending the [ProductVariant entity](https://docs.medusajs.com/modules/products#product-variant-overview) to include bundle information. They then extended the `discountService` to take the bundle discounts into account. Having all pricing logic controlled directly within Medusa made it both faster to implement and simpler for Webbers to maintain and evolve.

![](/images/diagram.png)

## Tailored admin dashboard

For daily store operations, Matt Sleeps used Medusa's Admin dashboard. The team again leveraged Medusa's extensibility to create custom admin extensions using [Medusa Widgets](https://docs.medusajs.com/admin/widgets), [UI Routes](https://docs.medusajs.com/admin/routes), and [Medusa's UI components](https://docs.medusajs.com/ui). Some examples include:

*   **Sales analytics** provide the team with a quick overview of essential sales metrics, such as total sales, orders, top-selling products, returning customers, and more. See more in the video below with anonymized data.

*   **The customer review page** is used to manage customers’ product reviews. Store operators can handle reviews and add them to the product pages for each locale shop when appropriate.

*   **Custom return Overview** provides a view of all customer returns related to the company’s 120-days full satisfaction or return guarantee. The dashboard makes it easy to review return statuses, respond to return inquiries, coordinate pick-ups, and more.

*   **Extended order detail pages** provide the team with custom functionality, such as generating order invoices and viewing the status of some order items that are handled by third-party suppliers. For example, Matt Sleeps uses a third-party provider for the fulfillment of some of their bed frames. Through an API connection with the supplier, the store operator can verify whether the product has been delivered to the customer.

<video controls preload="none" style="object-fit: cover; max-height: unset; max-width: 100%; margin-left: auto; margin-right: auto;" poster="/images/matt-sleeps-video-3-cover.png">
<source src="/videos/matt-sleeps-video-3.mp4" type="video/mp4" />
</video>

For Matt Sleeps, Medusa’s extensibility allowed them to elevate the user experience of their store while building an admin solution tailored to the needs of their store operators. For Webbers, an experienced [Medusa Expert partner](https://medusajs.com/experts/), the case served as another proof point of how powerful a toolbox Medusa provides when building tailored client solutions.

<quote name="Pepijn van Vlaanderen" title="CTO at Webbers">
For Matt Sleeps, chosing a stable tech foundation for future scalability was important. Medusa once again proved to be a solution that provided the flexibility our client needed and the right architecture to make customizations straightforward for us to implement.
</quote>



Matt Sleeps: Elevating customer xp at one one of Europe's fastest growing D2C shops

Matt Sleeps: Elevating customer experiences at one of Europe’s fastest-growing D2C shops

We love to see the continuous community contributions with new additions to our [Medusa Plugin Library](https://medusajs.com/plugins/), new Admin translations, and new Starters and plugins being shared on our [Discord](https://discord.gg/medusajs). Recently, two of our [Medusa Experts](https://medusajs.com/experts/), [Rigby](https://rigby.pl/) and [Agilo](https://agilo.co/), also open-sourced some of the larger plugins they have developed. Check it all out below.

## Medusa Admin translated into +20 languages

The amount of community language contributions has been exceptional since we [announced multi-language support in September](https://medusajs.com/blog/announcing-multi-language-support/). Medusa now supports over 20 languages, including English, French, Portuguese, German, Spanish, Italian, Polish, Japanese, Chinese, and many more. [Check out all the translations](https://docs.medusajs.com/user-guide/tips/languages) or learn how you can [contribute to the translation efforts](https://docs.medusajs.com/contribution/admin-translations).

## Medusa Custom Attributes Plugin

[Viktor Holik](https://github.com/vholik) from the Medusa Expert partner, [Rigby](https://rigby.pl/), recently contributed a new [Custom Attributes Plugin](https://github.com/vholik/medusa-custom-attributes) that allows you to expand the current product attributes to include new ones specific to your use case, such as “furniture type” or “Year of production”. These custom attributes can be in the form of strings, numbers, booleans, or arrays.

The plugin has a UI allowing you to access all your custom attributes from a separate Custom Attributes page in your Medusa Admin. After creating a custom attribute, you can edit it for each product on the Product page using a [widget](https://docs.medusajs.com/admin/widgets). The plugin is actively used in the vintage marketplace, [Patyna](https://medusajs.com/blog/patyna/).

Read more about the plugin in Viktor's blog posts around it, [part 1](https://medium.com/rigby-software-house/adding-custom-attributes-in-medusa-js-ba1af9f312bb) and [part 2](https://medium.com/rigby-software-house/introducing-custom-attributes-in-medusa-js-part-2-ui-8c1f111f8845).

![](/images/cropped.png)

## Medusa WordPress Plugin

[Ante Primorac](https://github.com/anteprimorac) and [Anamarija Papić](https://github.com/anamarijapapic) from another Medusa Expert partner, [Agilo](https://agilo.co/), have built a new plugin named [MedusaWP](https://github.com/Agilo/medusawp). This plugin allows you to use [WordPress](https://wordpress.com/) as a CMS with Medusa. It enables you to import various data from Medusa into WordPress, including products, collections, thumbnails, and more.

The plugin also offers an overview of your data health, identifying any sync errors, partially synced items, and successful synchs. It also includes a country switcher feature for stores with multiple regions, which updates cart regions based on the country code.

At last, the plugin provides a feature-rich set of functions for your WordPress theme. These include [medusa-react](https://docs.medusajs.com/medusa-react/overview) utility functions for calculating and formatting prices and amounts.

You can view the full plugin and its feature set within the [MedusaWP repo](https://github.com/Agilo/medusawp).

![](/images/292096021-a4a7b8f5-5a2a-44ff-a5bf-bdbaa64a2111%20$1$%201.png)

## Multi-platform starter templates for Medusa

[Rodrigo Figueroa](https://github.com/bidah) developed a starter kit, [Universal Medusa](https://github.com/bidah/universal-medusa), that lets you create multi-platform storefronts using [Next.js](http://nextjs.org/) and [Expo](https://expo.dev/) with a Medusa backend.

Universal Medusa offers a comprehensive development setup that includes shared Tailwind CSS styles and components adapted for native mobile development using [Nativewind](https://nativewind.dev/). The starter mostly matches Medusa's previous feature set and design from the [Next.js Starter Template](https://medusajs.com/nextjs-commerce/).

Check out the [project’s website](https://universal-medusa-docs.vercel.app) to get started. Or check out Rodrigo’s latest [Mobile Medusa](https://github.com/bidah/mobile-medusa) starter for a React Native mobile starter.

<video controls preload="none" style="object-fit: cover; max-height: unset; max-width: 100%; height: 700px; width: auto; margin-left: auto; margin-right: auto;" poster="/images/community-multi-platform-cover.png">
<source src="/videos/community-multi-platform.mp4" type="video/mp4" />
</video>

## Medusa Admin mobile (beta)

[Ragheb](https://github.com/mllrr96) is developing [Medusa Admin Mobile](https://github.com/mllrr96/Medusa-Admin-Flutter), a mobile-friendly Medusa Admin app for iOS and Android. This app is built using [Flutter](https://flutter.dev/) and comes in a [pre-compiled APK file](https://github.com/mllrr96/Medusa-Admin-Flutter/releases) for Android users. Although the app is in beta, it allows you to view and modify various aspects of your store, including settings, orders, products, customer information, discounts, gift cards, price lists, and more.

The latest version features a new look with material design and several themes. To try the application, visit the [Git repository](https://github.com/mllrr96/Medusa-Admin-Flutter), which provides all the steps to get started. Ragheb also encourages feedback either in the [project thread on Discord](https://discord.com/channels/876835651130097704/1149712066119217453) or in the [GitHub repo](https://github.com/mllrr96/Medusa-Admin-Flutter).

![](/images/Untitled%20$12$.png)

## Ultimate Medusa Plugin (beta)

[Kichou Nadir](https://github.com/raideno) is developing the [Ultimate Plugin](https://github.com/raideno/medusa-plugin-ultimate). This plugin provides a user interface for interacting with new entities added to your Medusa store. It allows you to create, edit, view, and delete documents associated with those entities directly within the Medusa Admin. For example, if you add a blog entity (database table, service, route, loader, etc.), the plugin will allow you to manage related documents for each blog post directly from the admin dashboard.

Read more about the plugin in Kichou's [documentation](https://medusa-plugin-ultimate.raideno.xyz/). Please note that the plugin is still in beta mode.

<video controls preload="none" style="object-fit: cover; max-height: unset; max-width: 100%; margin-left: auto; margin-right: auto;" poster="/images/community-ultimate-medusa-plugin-cover.png">
<source src="/videos/community-ultimate-medusa-plugin.mp4" type="video/mp4" />
</video>

## Let us know what you are building

We would love to hear about the cool projects you have created with Medusa. Whether it’s plugins, widgets, storefront starters, your own store built with Medusa, or similar.

You can share all your cool projects in the *#Showcase* channel on our [Discord](https://discord.com/invite/medusajs) where we usually collect the latest community highlights. You can also learn how to publish your plugins on our Plugin Library using this guide in our [documentation](https://docs.medusajs.com/development/plugins/publish).


Community Highlights Jan’24

[Patyna](https://patyna.pl/) is Poland's largest vintage marketplace, selling more than 30,000 unique furniture, lighting, decorations, accessories, and more on their platform. The company started in 2013 and has since grown to serve a diverse market of private and B2B customers, such as architects, retailers, and designers. Today, more than 2,000 vendors use the platform to market their vintage furniture, from established wholesalers to local sellers.

Supported by their implementation partner, [Rigby](https://rigby.pl/), Patyna migrated from WooCommerce to Medusa. With Medusa, Patyna has been able to experiment and build new features faster while spending less time on maintenance and debugging. Along with the migration, Patyna built an admin setup with multiple user types and accesses, custom category control, a mechanism for order splitting, and much more.

<callout icon="lightBulbSolid" button-label="Get started" 
button-url="https://docs.medusajs.com/recipes/marketplace">
**Marketplace Recipe**
Set up your own marketplace with Medusa. </callout>

## 34% traffic uplift and 30% shorter time to market

Patyna's team originally built their marketplace using WooCommerce. However, they constantly faced two major challenges: site performance and the release speed of new features. The performance issues stemmed from the platform being bloated with plugins and hacky workarounds, adversely impacting page load time and causing crashes during traffic peaks. Furthermore, vendors experienced considerable load time when making updates to their stores.

The slow development velocity resulted from the team spending too much time on platform maintenance and debugging. The tightly intertwined logic in WooCommerce meant that overriding parts of the system and its plugins could cause problems elsewhere, making root causes hard to identify and debugging a laborious task.

Medusa addressed both of these challenges. Its composable nature allowed Rigby to easily use [Next.js](https://nextjs.org/) to build a custom and performant frontend, resulting in a 34% traffic increase two months after going live. By optimizing CI/CD pipelines, minimizing debugging and maintenance time, and enabling smoother implementation of custom functionality, Medusa reduced the time to market for new features by 30%. Especially the ability to rapidly build custom logic was something Rigby found unique about the Medusa framework.

<quote name="Jakub Zbąski" title="Co-founder and CEO at Rigby">
We looked into other solutions, but I do not think it would have been possible, even at the slightest part, with any of the existing open-source or SaaS solutions to get the same result.
</quote>

## Custom functionalities and multi-access

When setting up the marketplace, Rigby aimed for simplicity in their stack using only a few external services. They used [Strapi](https://strapi.io/) to manage content data such as homepage images, text, and About pages. [Sendgrid](https://sendgrid.com) and [Mailchimp](https://mailchimp.com/) were used for marketing, [Sentry](https://sentry.io/welcome/) for application monitoring, and [OpenReplay](https://openreplay.com/) for user session recordings.![patyna-tech-stack](/images/tech%20stack.png)

The marketplace encompasses three user types: customers, vendors, and Patyna Admin. For vendors and Patyna Admin, Rigby created separate admin dashboards with unique access levels and control features.

### Patyna Admin: Controlling the marketplace

Patyna’s admin has a custom dashboard from where they can control the entire marketplace. They can view all products, orders, vendors, and customers across the platform. Additionally, it allowed the team to:

*   **Create sales reports:** This allows Patyna to generate PDF reports with sales and margin overviews across all products and vendors.

*   **Manage product attributes:** This enables Patyna to define both standard product attributes (e.g., date of production) and custom attributes per product category (e.g., "Types of legs" for sofas). These attributes are then filterable for customers on the marketplace and must be filled out by vendors when creating new products within a category.

*   **Control discounts and gift cards:** This allows them to create special customer discount codes or gift cards that can be used across all vendors.

### Vendors: Controlling their store operations

Vendors are limited to controlling and accessing orders, customers, and products related to their own stores. Additionally, Rigby built custom functionality for:

*   **Self-pickup delivery:** This feature allows vendors to offer pickup options for their products, and they can then manually mark orders as collected in their admin dashboard upon customer pick-up.

*   **Custom order splitting:** When customers purchase products from multiple vendors, the order is split under the hood, ensuring each vendor manages only their part while the customer sees it all as a single order.

*   **'Classics' products:** Patyna has a unique section in their marketplace called 'Classics' for select iconic products. Vendors can propose products for this section directly in their admin dashboard, and the Patyna Admin then gets a chance to review the submissions afterward and approve them within their dashboard.

Being able to ship custom features faster has paid off. Patyna quickly saw a resurgence in vendor activity on the platform, and some vendors even expressed their satisfaction with the platform's improved usability, noting that they were now inclined to add more products to the new platform because of its improved usability and performance.

![patyna-admin-overview](/images/admin-overview.png)

## Cutting maintenance and debugging time in half

For Rigby, the case demonstrated the profound impact the Medusa framework could have on their development velocity. Patyna's team estimated that Medusa roughly halved the time spent on ongoing maintenance and debugging. The framework made it easier for the team to keep logs for debugging purposes while offering an overall better developer experience when implementing custom logic and functionality.

Despite using various composable ecommerce frameworks in the past, Rigby's learnings from Patyna convinced them to commit to Medusa for the future. Today, Rigby is included in [Medusa's Expert list](https://medusajs.com/experts/) and has chosen Medusa as their framework for multiple other ecommerce cases. For them, the decisive factors for doubling down on Medusa were the developer experience and scalability.

<quote name="Jakub Zbąski" title="Co-founder and CEO at Rigby">
The whole developer experience was really awesome. From managing vast product listings to handling intricate vendor details, Medusa provided a robust and scalable solution.
</quote>



Patyna: Boosting performance for Poland's biggest vintage marketplace

In 2023, we introduced many new features, architectural changes, and developer experience enhancements in Medusa. The latest of which is highlighted in our [Recap 3](https://medusajs.com/recap/) page.

We recognized the importance of making sure the documentation aligns with the core product at the same speed. We knew we had to enforce a docs-as-code approach further to do so. A docs-as-code approach encourages adopting processes, testing practices, and implementations with documentation typically used with code.

As a result, we've created a custom documentation toolkit that we use internally, ranging from low-level documentation generation tools to custom-built documentation websites.

In this article, I'll share with you some of the custom documentation tools we built in 2023 at Medusa and some of the plans we have to continue improving our documentation.

## Why Build Custom Tools

Previously, our documentation was built using tools like Docusaurus and Redocly. Our team manually wrote the content within the documentation as Markdown files within the Docusaurus codebase.

While this setup worked initially, it was only a short time until Medusa outgrew it. The quick pace of releases made information in the documentation stale; the large number of API routes slowed down the API Reference; introducing new features like [Modules](https://docs.medusajs.com/modules/overview) and [Workflows](https://medusajs.com/blog/announcing-medusa-workflows-sdk/) raised the need for understandable and easy-to-use references.

Our documentation tools weren't enough anymore. So, we started building a documentation toolkit to resolve our problems and improve the developer experience in our documentation.

## Custom REST API Reference

Previously, our REST API Reference website was built using Redocly as part of our main documentation website, built with Docusaurus. While Redocly is a great tool for building an API reference website, we had performance issues due to our wide-reaching commerce API Routes and information within each of those routes.

We explored different existing options, but none satisfied our use case. As a result, we decided to build a [custom API Reference website](https://docs.medusajs.com/api/store) from scratch.

<video controls preload="none" style="object-fit: cover; max-height: unset; max-width: 100%; margin-left: auto; margin-right: auto;" poster="/images/api-reference-cover.png">
<source src="/videos/api-reference.mp4" type="video/mp4" />
</video>

The website is built with Next.js 14, and documentation for Medusa’s API Routes is loaded on demand, improving the website's overall performance. Our designer also created a fresh and clean design for the new API reference.

You can check out the source code [here](https://github.com/medusajs/medusa/tree/develop/www/apps/api-reference).

## References Generator

After introducing the [Product](https://docs.medusajs.com/experimental/product/overview) and [Pricing](https://docs.medusajs.com/experimental/pricing/overview) Modules, we wanted to provide a clear API reference in our documentation for the main interface of each module. We also wanted to improve our existing references, such as the JS Client reference.

To do that, we used [Typedoc](https://typedoc.org/), a tool that generates documentation from comments in TypeScript source code, with existing and custom plugins relevant to our use case. Some of the plugins we built were:

*   A plugin that converts OpenApi Specification (OAS) schemas to their equivalent TSDoc comments. This is especially useful for our JS Client reference as we can reuse the same request and response type details used for the REST API Reference.

*   A plugin that uses ESLint to lint code examples in the TSDoc comments.

*   A plugin that allows injecting custom frontmatter into Markdown files.

![](/images/references-generation.jpg)

This also allowed us to bring the documentation close to the code, which:

*   Mitigates information staleness: as members of our engineering team make changes to the code, they can directly reflect the changes on the documentation in the code's doc-block.

*   Improves code readability and maintainability.

*   Provides better auto-complete descriptions during development.

This encouraged us to move more of our documentation pages to live closer to the code, which is still ongoing.

## Coming Soon: Workflows Diagram Generator

In [Recap 3](https://medusajs.com/recap/), we introduced Workflows. A workflow is a series of steps that complete a task and can be executed from anywhere. Aside from providing the necessary documentation for Workflows, we also wanted to visualize workflows in the documentation for a better developer experience.

So, we built a tool that creates [Mermaid](https://mermaid.js.org/) diagrams of workflows used in the Medusa backend, which can be visualized in the documentation.

<video controls preload="none" style="object-fit: cover; max-height: unset; max-width: 100%; margin-left: auto; margin-right: auto;" poster="/images/workflows-diagram-generator-cover.png">
<source src="/videos/workflows-diagram-generator.mp4" type="video/mp4" />
</video>

While we still need to incorporate it in our documentation, we've built the necessary foundation of this tool to make it possible and look forward to adding it to our documentation soon.

You can check out the source code [here](https://github.com/medusajs/medusa/tree/develop/docs-util/packages/workflows-diagrams-generator).

## UI Props Generator

In 2023, we introduce [Medusa UI](https://docs.medusajs.com/ui), a package of UI components that implement the Medusa design system and allow developers to build customizations in the admin with a consistent design.

In the [Medusa UI documentation](https://docs.medusajs.com/ui), we show the props that each component accepts. To ensure that these props remain up-to-date, we created a tool that generates JSON spec files for each component from the source code.

These spec files are then loaded in the Medusa UI documentation website, built on Next.js 14, to display the component's details and props.

![](/images/Screenshot%202023-12-13%20at%207.50.18%E2%80%AFPM.png)

This tool is built on top of [react-docgen](https://react-docgen.dev/), which extracts details of React components and generates JSON documentation, and Typedoc. As we faced some limitations with `react-docgen`, we customized its handlers and resolvers to ensure that all props and components were recognized and used Typedoc to fill in any missing details.

You can find the source code of the tool [here](https://github.com/medusajs/medusa/tree/develop/docs-util/packages/react-docs-generator).

## Generate Documentation on Release

Building the tools is one thing, but another important aspect is ensuring the documentation is updated whenever there's a new Medusa release.

So, we've added GitHub actions that run whenever a new release is published, making documentation updates part of the release pipeline.

![](/images/release-process.jpg)

This GitHub action checks for any updates in the REST APIs, UI props, and general references and opens a pull request with the updates, eliminating the need to make the updates manually.

## Notable Documentation Improvements

Aside from the custom documentation toolkit, we've continued improving our documentation to provide a better developer experience. The improvements include:

Added a Recipes section in our documentation, with guided learning paths that you can start and finish at your own pace.

<video controls preload="none" style="object-fit: cover; max-height: unset; max-width: 100%; margin-left: auto; margin-right: auto;" poster="/images/learning-path-cover.png">
<source src="/videos/learning-path.mp4" type="video/mp4" />
</video>

An enhanced search experience with intuitive navigation.

<video controls preload="none" style="object-fit: cover; max-height: unset; max-width: 100%; margin-left: auto; margin-right: auto;" poster="/images/search-cover.png">
<source src="/videos/search.mp4" type="video/mp4" />
</video>

An AI Assistant to provide help during your learning journey.

<video controls preload="none" style="object-fit: cover; max-height: unset; max-width: 100%; margin-left: auto; margin-right: auto;" poster="/images/ai-assistant-cover.png">
<source src="/videos/ai-assistant.mp4" type="video/mp4" />
</video>

## Future of Docs at Medusa

There are still many more improvements to be made both for our documentation and its underlying tooling and processes. Also, since Medusa’s features now make it suitable for orchestration tooling, developers need to understand Medusa as a framework, which requires building a learning path that teaches Medusa’s concepts from end to end.

While it's difficult to list all of the documentation plans, some of the ideas we have for the near future include:

*   Improved documentation structure with better learning paths and guidance.

*   Interactive API reference and UI documentation.

*   Better feedback collection from users to keep improving our documentation and core product.

If you have any ideas for improvements and new features or find bugs in our documentation, please share them with us on [GitHub](https://github.com/medusajs/medusa), [Discord](https://discord.gg/F87eGuwkTp), or our social channels.



Our Custom Tools for Great Documentation

We care deeply about developer experience across all our products. Our primitives and tooling allow developers to effortlessly build digital commerce applications at record speed.

Today, we are excited to announce a massive update to our Subscriber API that significantly improves the developer experience of a core concept in Medusa’s customization toolbox.

## Subscribers

Services in Medusa emit events whenever actions like creating and updating records occur. Subscribers in Medusa provide a way for developers to run asynchronous logic in response to these events. This could include syncing a product to an external service when it is updated in Medusa or applying a special discount when a set of specific products is added to a cart.

With our updated API, you can create subscribers using a pattern similar to how you build API Routes.

<codeblock language="ts">
```
// src/subscribers/order-placed.ts
export default async function ({ data, container }) {
    const { id } = data

    const slackService = container.resolve("slackService")
    const orderService = container.resolve("orderService")

    const order = await orderService.retrieve(id)

    await slackService.sendNotis({ data: order })
}

export const config: SubscriberConfig = {
    event: OrderService.Events.PLACED,
}
```
</codeblock>

Example of a Subscriber

The example above illustrates a few key points of the updated Subscriber API:

*   Exports from files in `/subscribers` control the behavior of your event handlers. The default export is a function with the logic to run, and the `config` export specifies the event that logic should be run in response to

*   The handler accepts an argument of type `SubscriberArgs`. This can be de-structured to access the event data and the Medusa container.

In the example above, we register a handler that is run every time the product updated event is triggered.

The new approach to registering subscribers also comes with the benefit of making it easier than ever to set up a handler for multiple events. The `event` field in the config accepts either a single event or a list of events. Continuing with the above example, it would be possible to update the handler to update the external system when a product is created, updated, and deleted.

```ts
// src/subscribers/product-sync.ts
import { syncProductsWorkflow } from "../workflows"

export default async function ({ data, eventName, container }) {
  await syncProductsWorkflow.run({ input: data })
}

export const config: SubscriberConfig = {
  event: [
		ProductService.Events.CREATED,
		ProductService.Events.UPDATED,
		ProductService.Events.DELETED
	]
}
```

By updating the `event` field and adding a few additional lines of code, the handler can now process all relevant events. This keeps the external system synchronized with Medusa.

## What is next?

We are excited to hear your thoughts about our new Subscriber API. If you have any feedback or experience issues, don’t hesitate to post on our [GitHub Issues board ](https://github.com/medusajs/medusa/issues)or [GitHub Discussions](https://github.com/medusajs/medusa/discussions). To check other of our recent releases, check out our [Medusa Recap page](/recap/).

You can also track our progress on [X](https://twitter.com/medusajs) and in our [changelog](https://medusajs.com/changelog/).


Announcing Improved Subscriber API

Digital commerce happens across multiple systems, whether ERPs, CMSs, marketing tools, custom services, or other tools. A key challenge is to ensure these systems work together to complete the tasks that drive your business forward. We are, therefore, incredibly excited to announce the beta release of Medusa Workflows, a new, powerful primitive in the Medusa toolbox to help build custom business flows involving multiple systems.

Medusa’s Workflows SDK enables developers to write critical business flows with a simple DX and a strong foundation. Workflows have built-in retry and rollback mechanisms, which make them resilient to intermittent failures and a great place to define your commerce stack’s integrations and customizations.

Medusa Workflows are not dependent on Medusa’s commerce modules. You can start using them to integrate your commerce stack regardless of what ecommerce platform you are on, giving you access to Medusa’s powerful customization tools without needing to migrate your commerce platform.

## Build a Workflow

Building Workflows is like writing JavaScript functions, but unlike regular functions, the Workflows SDK creates an internal representation of your Workflow to keep track of its progress, retry failing steps, and roll back operations if necessary.

### Define a Workflow Step

To create a Workflow, you first define a Workflow Step using the Workflows SDK’s `createStep` function.

```ts
import { createStep, StepResponse } from "@medusajs/workflows-sdk"

const reserveInventory = createStep("reserve-inventory", async (cart, context) => {
    const inventoryService = context.container.resolve("inventoryService");
    await inventoryService.reserveInventory(cart.items);
    return new StepResponse({ success: true });
  }
);
```

The above step resolves an Inventory Service from the dependency injection container and reserves inventory for items in a Cart. Note that the step takes a Cart as input and responds with a StepResponse. The StepResponse can be used in subsequent steps.

### Create a Workflow

Once your step is created, you can use it within a Workflow. To construct a Workflow you use the `createWorkflow` helper from the Workflows SDK.

```ts
import { createStep, StepResponse, createWorkflow } from "@medusajs/workflows-sdk"

const reserveInventory = createStep("reserve-inventory", async (cart, context) => {
  const inventoryService = context.container.resolve("inventoryService");
  await inventoryService.reserveInventory(cart.items);
  return new StepResponse({ success: true });
});

const acceptQuoteWorkflow = createWorkflow("accept-quote", function (input) {
  const cart = retrieveCart(input.cartQuoteId);
  reserveInventory(cart);
  authorizePayment(cart);
  createOrder(cart);
});
```

The above Workflow accepts a quote shared with a customer, and the step we created to reserve inventory is used as part of the Workflow. In the Workflow, we have used our `reserveInventory` Workflow Step.

The function passed to `createWorkflow` is used to generate a representation of the Workflow logic and map the data dependencies between steps. For example, the Workflow SDK knows that `reserveInventory` step needs the output of `retrieveCart` as its input. This enables Medusa to automatically retry a step if it fails and only progress when possible and allowed. If a step fails more than a configurable number of times, Medusa will automatically roll back previous steps.

### Defining compensating actions

Let’s define the compensation for our `reserveInventory` step. We do this by specifying what data our step will need to roll back in the StepResponse and a compensation function to execute when rolling back.

```ts
import { createStep, StepResponse } from "@medusajs/workflows-sdk"

const reserveInventory = createStep("reserve-inventory", async (cart, context) => {
    const inventoryService = context.container.resolve("inventoryService");
    await inventoryService.reserveInventory(cart.items);
    return new StepResponse({ success: true }, cart.items);
  },
  async (items, context) => {
    const inventoryService = context.container.resolve("inventoryService");
    await inventoryService.releaseInventory(items);
  }
);
```

Note that the StepResponse now specifies the `cart.items` as rollback data. This is then used in the compensation function to release the inventory.

### Triggering a Workflow

You can execute a Workflow from different places within Medusa. For example, you may use API Routes if you want the workflow to execute in response to an API request or a webhook. Subscribers if you want to execute a workflow when an event is triggered. Or Scheduled Jobs if you want your workflow to execute regularly.

Here’s an example of executing a Workflow in an API Route. You can learn about more ways of triggering Workflows in our docs.

```ts
// src/api/quotes/accept/route.ts

import { acceptQuoteWorkflow } from "@/workflows"

export async function POST(req, res) {
  const workflow = acceptQuoteWorkflow(req.scope)

  await workflow.run({
    cartQuoteId: req.cart_id
  })

  res.json({ accepted: true })
}
```

## What can you use Workflows for?

Medusa Workflows are especially good for orchestrating multiple tools to achieve a task. Integrating systems in your stack using Workflows, for example, ensures that data is kept consistent and that unexpected errors are handled gracefully. To build an integration with Workflows, you would create a custom Medusa service connecting to your 3rd party system. The custom service can then be resolved in your steps to execute actions.

The more systems you integrate with Medusa, the more Workflows you can create to automate your operations and push your customer experience forward. Consider the example of integrating purchase orders from your ERP system with inbounds in your WMS system. With a Medusa connection to your ERP and WMS, you can easily map the purchase order flow and other ERP to WMS flows. Additionally, because you have other connections - like your product information - available, you can leverage those in your Workflows. For example, you can quickly configure your purchase order Workflow to record the expected restock date of your products to display to customers.

![](/images/Untitled%20$8$-65817d5b.png)

### Long-running workflows (coming soon)

With the initial beta release, Workflows can run exclusively in-band. We will soon add support for long-running Workflows that include asynchronous operations or human-in-the-loop steps. This opens further use cases for Workflows. For example, you can build a Workflow to manage the preparation of new products for sale. The Workflow starts when a product is inbounded at your warehouse. Then, tasks can kick off for taking pack shots, writing titles and descriptions, translating copy, and merchandizing the product. As each task is completed, the Workflow can proceed. All tasks would be mapped as Workflow Steps and could be completed in systems across your stack. If a task fails to complete or a configurable timeout is reached, rollback logic can help keep your data consistent, or notify responsible parties.

![](/images/long-running%20$1$.png)

## Core Workflows

Workflows are a key part of our efforts toward shipping Medusa 2.0. With Medusa 2.0, we are decoupling most of Medusa’s internal services and bringing them to standalone packages available on npm. This means you can use Medusa’s services, like Products, Pricing, Carts, etc., independently from the rest of Medusa. We will continue to offer Medusa’s powerful and customizable commerce API in a way that’s easy to install with `npx create-medusa-app`. For each default API endpoint, there will be an available core Workflow to do things like creating products, adding to cart, applying discounts, and much, much more. The core Workflows will orchestrate Medusa (or custom) modules and be extensible. This does two things:

1.  It makes Medusa pluggable - you can use any provider to handle Products, Carts, Discounts, etc. The Workflow will call the provider when it needs to.

2.  You will get a new and easy way to extend business logic by injecting custom code into Workflows. There is no need to modify core services or override default endpoints; the Workflow will ensure your custom logic is called when required.

Core Workflows are introduced incrementally behind the `medusa_v2` feature flag, and more and more Workflows become available as we ship new Commerce Modules.

## What’s next?

The Workflows SDK joins Custom Entities, Services, API Routes, Subscribers, and Cron Jobs in the Medusa toolbox. With Workflows, Medusa provides a primitive for building custom business flows spanning multiple systems. It has built-in failure handling and rollback logic to ensure your critical Workflows run smoothly and your data is kept consistent. You can start using the Workflows SDK without migrating to Medusa’s commerce modules, making it an excellent tool for integrating your digital commerce stack and building customizations for customer experiences and internal operations.

Visit [our docs](https://docs.medusajs.com/development/workflows) to get started with Workflows. And follow us on [X](https://twitter.com/medusajs) to stay tuned for updates on Long Running Workflows and information about our Commerce Module releases as we prepare for [Medusa 2.0](/blog/toward-medusa-2/).


Announcing the Medusa Workflows SDK

We are excited to announce Medusa’s Pricing Module - a standalone pricing service that enables granular pricing configurations. The Pricing Module ships as an npm package that can be installed in any Node project requiring advanced pricing logic and is integrated into Medusa experimentally behind the `medusa_v2` feature flag as part of our efforts to [release Medusa 2.0](https://medusajs.com/blog/toward-medusa-2/).

In Medusa, the Pricing Module is used to set prices for Product Variants conditional on currencies, regions, customer groups, sales channels, and more. You can read more about the Pricing Module functionality [here](https://medusajs.com/pricing-module/). Now, the Pricing Module’s logic works entirely independently and can be used to configure prices for anything specific to your needs.

The Pricing Module has two key functionalities:

1.  Creating a set of prices for a resource with pricing rules governing when each is applicable.

2.  Choosing the correct price to use given a context.

## Using the Pricing Module

Imagine you want to differentiate the prices of tickets to a tech conference based on the customer’s location. You want to offer cheaper tickets to local companies. With the Pricing Module you first configure your pricing rules:

```ts
const myTicketPriceSet = await pricingModuleService.create({
  rules: [{ rule_attribute: "city" }],
  prices: [
    { amount: 1000, currency_code: "usd", rules: {} },
    { amount: 500, currency_code: "usd", rules: { city: "New York" } },
  ]
})
```

The above code returns a PriceSet to associate with your ticket.

The Pricing Module provides a `calculatePrices` function to get the correct price to charge a customer. Before calling the function you will collect the city your customer is in; for example, based on the IP address, and pass it as context `calculatePrices`.

```ts
const [priceToCharge] = await pricingModuleSerivce.calculatePrice(
	{ id: [priceSet.id] },
	{ context: { currency_code: "usd", city: "New York" } }
)

priceToCharge // { calculated_price: 500, currency_code: "usd" }
```

You can configure as many rules as you need, and the Pricing Module will always provide the correct price to your customer, considering things like overlapping applicability and rule priorities.

## Serverless support

The Pricing Module is ready for serverless environments, making it possible to run price calculations from tools like Lambda, Vercel, or Netlify Functions. To use the Pricing Module in a serverless function, initialize the Pricing Module with the initialize function.

```ts
// my-next-app/app/api/price/route.ts

import { initialize } from "@medusajs/pricing"
import { headers } from 'next/headers'

export async function GET(req, res) {
  const headers = headers()
  const ipCity = headers.get("x-vercel-ip-city")

  const pricingModule = await initialize({ /* db credentials here */ })
  const [price] = await pricingModule.calculatePrices(
		{ id: [priceId] }, 
		{ context: { currency_code: "usd", city: ipCity } }
	)

	res.json({ price: price.calculated_amount })
}
```

With serverless support you can offer your customers fast and highly personalized experiences.

## What’s next?

At Medusa, we build tools for developers to create custom digital commerce applications. The Pricing Module is another step toward preparing Medusa for version 2.0. [Read more about what’s to come here.](https://medusajs.com/blog/toward-medusa-2/)

Try the Pricing Module today by installing `@medusajs/pricing` from npm. For more details on how the Pricing Module works - including details about the Pricing Module’s Price List feature - visit our [docs](https://docs.medusajs.com/modules/price-lists). We are excited to hear your feedback.


Announcing Pricing Module

We are excited to announce a new Scheduled Jobs API that significantly improves the developer experience of a core concept in Medusa’s extensibility toolbox.

## Scheduled Jobs

Scheduled Jobs in Medusa is a feature that lets developers schedule tasks or cron jobs to automate repetitive tasks. For example, you can push daily updates to an external ERP system or generate weekly sales reports.

With the new Scheduled Jobs API, setting up recurring tasks can be achieved with only a few lines of code with a syntax that is familiar to any JavaScript developer.

```
// src/jobs/daily-erp-update.ts
import { ProductService, ScheduledJobsConfig, ScheduledJobsArgs } from "@medusajs/medusa"
import ErpService from "../services/erp"

export default async function ({ container }: ScheduledJobsArgs) {
	const productService: ProductService = container.resolve("productService")
	// Service for interacting with external ERP system
	const erpService: ErpService = container.resolve("erpService")
	
	const products = await productService.listAndCount()

	await erpService.update(products)
}

export const config: ScheduledJobsConfig = {
  name: "daily-erp-update",
	schedule: "0 0 * * *" // At 00:00 every night
}
```

The above example illustrates a few key points of how to use the new Scheduled Jobs API:

*   Exports from files in `/jobs` control the behavior of the action performed in your task. The default export is a function with the logic to run, and the config specifies the name and schedule of the task.

*   The handler is a function that gets invoked each time the job runs. In the given example, it lists products in Medusa and forwards them to the ERP system.

*   The config assigns a name to the job and sets the schedule for the job. In the provided example, the schedule is set to repeat the job every night at 00:00.

You can read more about the new API [in our documentation](https://docs.medusajs.com/development/scheduled-jobs/overview).

We are excited to hear your thoughts about our new Scheduled Jobs API. If you have any feedback or experience issues, don’t hesitate to post on our [GitHub Issues](https://github.com/medusajs/medusa/issues) board or [GitHub Discussions](https://github.com/medusajs/medusa/discussions).

Track our progress on [X](https://twitter.com/medusajs) and in our [changelog](https://medusajs.com/changelog/).


Announcing Scheduled Jobs API 

Medusa Next.js Starter Redesign Announcement thumbnail

The Medusa [Next.js Starter Template](https://medusajs.com/nextjs-commerce/) has been a popular starting point for Next.js developers working with Medusa. We thought it deserved some love, so the Starter just got a big update with a complete design overhaul, Medusa UI components, Next.js 14, and better product search.

The goal of the Starter is to provide a foundation for developers to build on. It consists of a fully functional ecommerce frontend, already connected to a Medusa backend. We aimed for a design that is fresh but neutral so you can easily customize it to fit your brand.

## Medusa UI Support

We redesigned the Starter to work with [Medusa UI](https://docs.medusajs.com/ui) components and icons. This results in a fresh, recognizable design language and components that allow for easy customization.

Medusa UI is a React implementation of the Medusa design system. The collection includes components, hooks, utility functions, icons, and [Tailwind CSS](https://tailwindcss.com/) classes. It's designed for building a consistent user interface across Medusa Admin and other Medusa applications.

## Ready for Medusa 2.0

While we [work toward Medusa 2.0](https://medusajs.com/blog/toward-medusa-2/), you can already try out some of our cutting-edge serverless modules with the Next.js Starter. The Starter has support for both the [Product](https://docs.medusajs.com/modules/products/serverless-module) and the Pricing module, as well as Remote Query to build your own serverless product endpoints. If you’re feeling adventurous, you can enable these experimental features by enabling the `MEDUSA_FF_MEDUSA_V2` feature flag in both the Starter and the server.

## New design showcase

### Home

The homepage has been cleaned up and now shows featured product collections.

![](/images/Screenshot%202023-11-23%20at%2009.43.56-12d8a5f8.jpg)

### Product detail page

The product detail page has a new layout and now uses Medusa UI components.

![](/images/Screenshot%202023-11-23%20at%2009.43.45.jpg)

### Product overview page

The product overview page has been redesigned and now features sorting out of the box.

![](/images/Screenshot%202023-11-23%20at%2009.45.30.jpg)

### Product search

The Starter already supported Algolia and MeiliSearch out of the box, but now has a revamped instant search UI and a server-rendered search results page.

![](/images/Screenshot%202023-11-23%20at%2009.46.41.jpg)

### Cart

The new cart design is built almost exclusively from Medusa UI components.

![](/images/Screenshot%202023-11-23%20at%2009.47.51.jpg)

### Checkout

The redesigned checkout process provides a streamlined experience, making it easier than ever for customers to finalize their purchases.

![](/images/Screenshot%202023-11-23%20at%2009.50.39.jpg)

### Get started with Next.js and Medusa

See the full new design in action in our [updated hosted demo](https://next.medusajs.com/).

Want to build with the Starter yourself? To get started, [clone the Medusa Next.js Starter Template from GitHub](https://github.com/medusajs/nextjs-starter-medusa).


Announcing Next.js Starter Redesign with Medusa UI support

Medusa is a set of tools for developers to create digital commerce applications. Often, these are e-commerce sites, but they can also be [marketplaces](https://medusajs.com/blog/foraged/), [enterprise OMS systems](https://medusajs.com/blog/makro-pro/), [B2B commerce platforms](https://medusajs.com/blog/visionary/), and much more. When we started Medusa, we wanted to build something to avoid the frustrating and painful hacky workarounds we had encountered with other commerce platforms. And now, thousands of companies are using Medusa, including fast-moving startups and some of the world’s largest companies. It’s hard to explain how happy and proud we are to share our work with you, and our top priority continues to be improving your experience.

## Taming complexity in your stack

Companies reach for Medusa to manage complex workflows that SaaS providers and other open-source tools can’t handle. Examples of complexity we have seen include gathering customer data across different channels to deliver personalized experiences. Or fulfilling thousands of daily orders from hundreds of distribution centers in the way that best aligns with business strategies. Or creating a seamless B2B purchasing experience for highly configurable products. The complexity companies experience is especially common when multiple systems have to work together to deliver a customer experience or automate a business flow.

Many companies try to tame their complexity by building applications from scratch that tie systems together and define customizations; however, building the foundation for such applications takes focus from serving customers best. Medusa has proven to be a much better starting point for businesses to accomplish their customizations than anywhere else. Medusa already has standards for defining data models, custom business logic, and much more, all while being flexible and easy to work with. Instead of reinventing these standards, Medusa users can focus on defining the logic that gives customers the best experience and optimizes operations.

## Build custom digital commerce applications faster

Medusa 2.0 doubles down on ensuring Medusa is the best foundation for building custom digital commerce applications. This is achieved through a focus on supporting custom workflows involving multiple systems directly in Medusa. Today's digital commerce happens with help from different systems, whether point solutions, marketing tools, ERP systems, or custom-built internal systems. With many tools in a stack, a key challenge becomes aligning them and making them work together. Most tools and services have APIs and say they are composable. But they can merely only participate in a composable stack. No tool, except Medusa, helps businesses easily build the foundation for such a stack. And with Medusa 2.0, we will continue to make this much easier.

Two key changes in Medusa’s architecture will address this:

1.  We will make core commerce concepts like Products, Discounts, etc., pluggable so you can use Medusa’s APIs without necessarily having to use Medusa’s full commerce module suite.

2.  We will launch a new, powerful Workflow primitive to orchestrate modules and services to complete tasks in your digital commerce stack.

The outcome is that Medusa becomes a hub where your company’s systems can interact. With Medusa’s customization tools, it will be straightforward to build integrations, customer experiences, or internal business workflows from that central hub.

## Making Medusa's modules pluggable

Medusa's architecture has, from the beginning, been modular. The main Medusa package ships with a service for handling products, another for handling carts, another for handling discounts, and so on. The services provide great separation of concerns and make it easy to use them in customizations. All services, however, must run within the same server and database. This is not bad in itself, but it requires that Medusa stores a copy of your data from across your tools internally to make its features work. We are eliminating this dependency and thereby making Medusa pluggable with existing tools.  For example, if you have product data in an existing PIM system, you can integrate it deeply with Medusa. When a customer adds a product to their cart, we will fetch product information directly from the PIM system, and you can set up tax and discount rules for the products despite them not being part of Medusa's database.

![](/images/old-new.jpg)

We are moving services into standalone packages like `@medusajs/product` and `@medusajs/pricing` to achieve this. These modules work independently of the rest of Medusa and can be used within any Node environment, including compatible serverless runtimes. Simultaneously, within the Medusa package, we are defining interfaces to the modules to make Medusa's default API work with the new standalone modules. This work happens behind the `medusa_v2` feature flag.

## New primitives for building digital commerce flows

Soon, we will introduce Workflows -  a new, powerful primitive for digital commerce applications with Workflows. A Workflow is a sequence of queries and actions across your system that achieve a task. Medusa will ship a wide range of Workflows to create products, add to a cart, and other operations available in Medusa’s API today.

Workflows are customizable, so you can inject custom logic into core workflows. For example, you can run custom validation when customers update their shipping addresses. Or add rules governing who can add given products to a cart. Or create a product entry in your CMS system whenever a new product is created.

Given that Medusa may be mutating data in external systems - like a PIM for your product data - we are building error handling into Workflows. Medusa will automatically retry failed attempts to update data, and if the issue is permanent, Medusa’s Workflows will compensate for any previous data changes that may have happened.

![](/images/add-to-cart.jpg)

Developers will also be able to create custom Workflows, which opens the door for a broad range of use cases and makes Medusa the best place to build integrations between your systems.

Consider integrating purchase orders from your ERP with your warehouse management system's inbounds. You can easily build custom services for your ERP and WMS and then construct a workflow that processes the purchase order and forwards it to the WMS. Doing this through Medusa creates opportunities for better customer experiences, like decorating products with an expected restock date for your customers to know when their favorite product will become available. This is easy because your product data is readily available through Medusa. Additionally, with the workflows, you won't have to worry about stale data between systems as retries and compensations are built-in. This is just one example of how custom Workflows can be used. As you add more connections between systems in your stack and Medusa, the opportunities for what is possible with Workflows expand exponentially.

![](/images/medusa-connecter-76bb3996.jpg)

## A great toolbox for digital commerce applications

The Workflow primitive joins Medusa’s existing tools like API Routes for custom API request handlers, Admin Extensions to build dashboard UI extensions, EventBus and Subscribers for Pub/Sub, Services for custom business logic and connections to external systems, and, of course, Medusa’s commerce logic for core commerce functionality.

Medusa comes packed with many great defaults that would take years for internal teams in digital commerce businesses to build and even more effort to continue to improve. With Workflows and Medusa 2.0, we will lower the bar for adopting Medusa into your stack. You can, for instance, start using Medusa’s Workflows to integrate your systems and, at your own pace, adopt the commerce modules that make sense for you.

It’s important to note that while the architectural changes we have planned will enable more complex use cases, Medusa will still be simple to set up. Our default API will have minimal breaking changes, and we are committed to making the upgrade path for existing Medusa projects smooth and painless.

## What’s next?

Over the next couple of months, we will ship many new standalone commerce modules. Each of them will be a key milestone toward shipping Medusa 2.0, and we are excited to hear your feedback and inputs as they are made available.

You can expect our Workflows to be released very soon. The Workflow tools can be used independently of Medusa 2.0, so you will not have to wait long before using this new, powerful primitive. The timeline for when Medusa 2.0 is still TBD - [sign up for our newsletter](https://medusajs.com/changelog/) and [follow Medusa on X](https://x.com/medusajs) to stay tuned.


Toward Medusa 2.0

Today, we are excited to announce API Routes – a massive improvement of the developer experience of a core concept in Medusa’s extensibility toolbox.

We are highly committed to delivering a world-class experience across all our products. With our commerce primitives and tooling, developers can effortlessly build unique digital commerce applications at record speed.

## **API Routes**

API Routes in Medusa is a place for developers to add custom logic that HTTP requests can trigger. The endpoints have direct access to Medusa’s core services like the Product and Cart services and custom services added to your project or in installed plugins.

To create a custom endpoint in Medusa, developers have had to familiarize themselves with application routing and Express more generally. This created friction unrelated to our product, leading to frustration from users, the community, and our support team.

Today, we are introducing API Routes - drastically simplifying creating custom endpoints in Medusa.

Developers can now create custom routes using simple JavaScript without worrying about the intricacies of the Express Router. Routes are registered using the file system, an approach familiar to many from frameworks like Next.js and Svelte.

```ts
// api/admin/products/route.ts
import { MedusaRequest, MedusaResponse } from "@medusajs/medusa"

export async function GET(req: MedusaRequest, res: MedusaResponse) {
	const productService = req.scope.resolve("productService")

	const products = await productService.list()

	res.json({ products })
}
```

The example above illustrates a few key points of API Routes:

*   Endpoint paths are inferred from the file path

*   `route.{ts|js}` is a special file that contains the router handlers

*   HTTP methods are defined by the route handler name; here `GET`

In the example above, we register a `GET` route at path `/admin/products`.

### **Dynamic Segments**

API Routes support dynamic URL segments and are similarly registered through the file system.

```ts
// api/admin/products/[id]/route.ts

import { MedusaRequest, MedusaResponse } from "@medusajs/medusa"

export async function POST(req: MedusaRequest, res: MedusaResponse) {
  const { id } = req.params
	const { payload } = req.body

	const productService = req.scope.resolve("productService")

	const product = await productService.update(id, payload)

	res.json({ product })
}
```

In the example above, we register a `POST` route at path `/admin/products/:id`. The brackets in the file path, `api/admin/products/[id]/route.ts`, specify a parameter that can be accessed within the handler.

You can add as many dynamic segments as you’d like. However, if the parameter names clash, an error will be thrown, and your application will terminate.

### **Middlewares**

Adding middleware to routes has also been simplified. With API Routes, we are centralizing all middlewares in a file at `api/middlewares.{ts|js}`. In this file, you can register middleware to all endpoints, a subset of endpoints, or one at a time.

```ts
// api/middlewares.ts

export const config: MiddlewaresConfig = {
  routes: [
    {
      method: ["GET", "POST"],
      matcher: "/store/*",
      middlewares: [someStoreMiddleware],
    },
  ],
}
```

Per default, middleware is registered globally. The `matcher` option is required to configure the paths the middlewares apply to. The `method` option is used to configure the specific methods the middlewares apply to.

In the example above, we register a middleware, `someStoreMiddleware`, to all paths starting with `/store` that use HTTP methods `GET` and `POST`.

## **What’s next?**

We are excited to hear your thoughts about our new API Routes. If you have any feedback or experience issues, don’t hesitate to post on our GitHub Issues board or GitHub Discussions.

In the future, we plan to extend the `MedusaRequest` and `MedusaResponse` to offer an even better experience with access to types specific to our Request and Response context, such as the Awilix dependency container living at `req.scope`.

Track our progress on [X](https://twitter.com/medusajs) and in our [changelog](https://medusajs.com/changelog/).


Announcing API Routes

[Visionary Technologies](https://www.visionarytechnologies.co.nz/) has become a market leader in New Zealand for LED lighting technology, which it sells to business customers such as architects, electric trades, and similar. Together with their implementation partner, [Typed Development](https://www.typed.co.nz/), they used Medusa to deliver a new digital commerce experience for their B2B customers, creating a frictionless buying journey without intermediaries while automating their backend operations.

<callout icon="lightBulbSolid" button-label="Get started" 
button-url="https\://docs.medusajs.com/recipes/b2b">
**B2B Recipe**
Set up your own B2B shop with Medusa.
</callout>

## Simplifying the customer journey

Visionary develops, manufactures, and markets all its LED products in-house from its production facilities in New Zealand. Since its inception in 2012, the company has been at the forefront of providing high-quality lightning products at a fair price. Their competitive pricing has been made possible by their decision to forego wholesalers, which is a conventional industry practice.

With Medusa, the company has been able to automate manual buying processes that were otherwise handled by their sales team and go directly to their B2B customers. The result has been a simplified customer journey with a shorter time-to-market while freeing up time for the sales team to acquire new customers instead of handling orders.![visionary-customer-journey](/images/Visionary-Customer-journey.jpg)

## Advanced commerce needs

As with many B2B-focused webshops, Visionary had additional requirements to their commerce backend aside from handling traditional commerce tasks such as [products](https://docs.medusajs.com/modules/products/overview), [carts and checkout](https://docs.medusajs.com/modules/carts-and-checkout/overview), [orders](https://docs.medusajs.com/modules/orders/overview) etc. Specifically, they required:

*   **Unlimited Product variants:** The store should be able to support products with up to 300 variants, all with different prices, product pictures, etc.

*   **Customer login and authentication:** The store should only be accessible for authenticated users of companies Visionary works with.

*   **Multiple employees per customer:** Each B2B customer has multiple employees associated with them who all need to be able to purchase on the platform on behalf of their company.

*   **Special pricing and discounts:** Visionary wanted a loyalty engine where customers earn discounts and special benefits based on their spending levels.

*   **ERP synchronization:** Upon order completion, Medusa needs to synchronize orders with Visionary’s ERP system for order production and fulfillment.

While exploring available options, Typed Development quickly realized that most SaaS ecommerce solutions did not offer the required flexibility for the job. Instead, they adopted Medusa’s commerce modules, giving them the right commerce logic to get started quickly and the flexibility to meet Visionary’s custom requirements.

<quote name="Jono Allen" title="Founder of Typed Development">
We spent 3 to 4 days tweaking Shopify to handle our product complexity with little luck. Afterwards, we went to Medusa and within 3 hours we had one of the most complex variants set up, and using the Next-starter we had a basic store going within half a day.
</quote>

## Linking customers and companies

Visionary wanted the employees of their B2B customers to be able to handle purchasing on their own in the online store. This would allow Visionary's sales representatives to devote less time to handle customers' manual orders and instead focus on acquiring new customers. Additionally, existing B2B customers would enjoy a more seamless purchasing experience, enabling their employees to complete orders online easily.

To allow employees of B2B customers to make direct purchases, Typed Development has added an employee layer to Medusa. This ensures employees are associated with their respective companies when logging into the store. Once logged in, they can browse products and make purchases on behalf of their company. After an order is placed, the order information is sent to a custom ERP system for production and fulfillment. In this setup:

*   **Employees** own carts, which allows them to create orders.

*   **Companies** own orders, which means they handle payments via invoices upon order completion.

Aside from the employee account, each company has admin accounts that, aside from creating orders, can add new employees and view all order and billing information.

![b2b-purchasing-flow](/images/Visionary-Technologies-b2b-purchasing-flow.png)

## Building a custom loyalty engine for Medusa

Visionary wanted to reward loyal customers based on their online spending. To support this, Typed Development built a loyalty engine using [Medusa’s Pricing Strategies](https://docs.medusajs.com/modules/price-lists/price-selection-strategy), which allows them to override and discount prices based on the customer group to which the customer belongs. This way, Typed Development could group customers into loyalty tiers based on spending, with each tier having certain product discounts associated with it.

The custom loyalty engine itself consists of two primary tiering mechanisms:

*   **Upgrade tier:** This tier is determined by accumulating all customer spending to determine their loyalty tier. When a certain spending level is reached, the customer is upgraded to a new tier with better discounts.

*   **Retainer tier:** This tier is determined by customer spending in the past 12 months. Customers must meet a minimum spending threshold during the period to stay in their current tier. This prevents customers with low or no spending from remaining in their tier. The spending for the retainer tier is reset when a customer reaches a new tier.

This loyalty engine has created a transparent discount system that is fully automated to control the different discount tiers of each customer.

![loyalty-engine](/images/Visionary-Technologies-loyalty-engine.jpg)

## Towards full automation

By the end of 2023, Visionary expects to handle over 1,000 monthly orders through Medusa. With its B2B ecommerce foundation already in place, the company is now focused on digitalizing and automating even more of its processes.

Order fulfillment using Visionary’s ERP is one process they look to optimize. Currently, it requires a lot of manual copy-pasting of order data from Medusa into the ERP. Instead, Typed Development hopes to use Medusa’s new [Admin Widgets](https://docs.medusajs.com/admin/widgets) to extend the current order overview in Medusa, allowing Visionary to control delivery services and fulfillment for post-order creation directly within Medusa and afterward move that information into the ERP.

Typed Development believes that the decision to go with an open and extendible solution like Medusa gives them the flexibility needed to easily build these custom automations that will benefit Visionary’s sales operations in the future.

<quote name="Jono Allen" title="Founder of Typed Development">
We feel that Medusa gives us a lot of capabilities to actually go in our own direction in terms of customizing and changing things, while allowing us to look through the code as well. It is easy to use and really gives us full control over the setup.
</quote>


Visionary: Frictionless B2B ecommerce with Medusa

We are excited to announce new and improved authentication methods in Medusa, built in collaboration with community contributor [David Preininger](https://www.linkedin.com/in/david-preininger-217956236/).

This update introduces a new authentication method and establishes a clear separation between the now three supported methods: Session, API Token, and Bearer Authentication. The separation will make it more obvious what to use for different cases. Whether your focus is server-side communication or SPAs, our authentication primitives will meet your needs.

## **Authentication methods**

Following this update, Medusa supports three authentication methods that each serve specific use cases better.

### **Sessions**

Our session authentication remains unchanged. This method is suitable for traditional server-side rendered web applications, such as webshops, because of its user-friendliness. Users sign in once, and the authenticated session is maintained throughout the rest of the user’s journey browsing the application.

### **API token**

Our API token authentication method has been slightly updated to follow best practices and comply with established conventions. More specifically, the header type has changed from Authorization with a `Bearer` prefix to a custom header tightly coupled with Medusa, `x-medusa-access-token`. The former is, not shockingly, reserved for bearer authentication. This method is suitable for server-to-server communication without direct user involvement.

Below is an example of using API key authentication:

![api-key-authentication](/images/Untitled-bd22de40.png)

This is the only breaking change in version 1.17.0.

### **Bearer token**

Bearer token authentication is a new method that utilizes JWT tokens, making it a suitable choice for Jamstack applications. Use this type of authentication when serving content from an API to different clients, such as SPAs or mobile applications. Additionally, this method will eliminate issues related to cookie constraints in browsers.

## **The power of building in public**

This is yet another demonstration of the power of building open-source software. Our new and improved authentication methods were completed by David Preininger, who specializes in building customizable ecommerce solutions.

Thanks to David for his contribution. If you wish to contribute or have feature requests for Medusa, you are always welcome to contact our [core maintainers](https://github.com/medusajs/medusa/blob/develop/CONTRIBUTING.md).

## **What’s next**

There are several possible follow-up improvements to the authentication system or applications that use it. We will likely update Medusa Admin to use JWT Bearer authentication as this is more suitable for the aforementioned reasons.

Furthermore, David is working on incorporating these changes into the Medusa Authentication plugin built by core Medusa engineer Adrien. The plugin allows merchants to use additional authentication providers, including Google and Auth0.

Finally, we are considering implementing two additional features to enhance the system's flexibility and capabilities further.

Firstly, we aim to add native support for extending the authentication system with custom methods. This will allow for a more seamless integration of authentication methods specific to your business.

Secondly, we plan to introduce API token management in Medusa Admin, eliminating the need for users to jump through hoops when wanting to use the API token authentication method.


New and improved authentication methods

[Foraged](https://www.foraged.com/) is a two-sided marketplace for fresh wild and specialty foods like berries, mushrooms, truffles, and more. Foragers, farmers, and local stores list their products through the platform’s vendor portal, and everything from home cooks to Michelin-starred restaurants buy the products through the Foraged website or app. Using Medusa, the team has developed a custom experience where vendors can manage their entire shop from their dashboard, which is powered by Medusa. Meanwhile, customers can message, follow, and place special orders with their favorite sellers.

<callout icon="lightBulbSolid" button-label="Get started" 
button-url="https://docs.medusajs.com/recipes/marketplace">
**Marketplace Recipe**
Set up your own marketplace with Medusa. </callout>

## **Maximum flexibility to build a custom marketplace**

As producers and users of wild and specialty foods, Foraged founders Jack and Andy noticed the difficulties in selling and procuring these foods, which mostly happened locally or via small online communities. Driven by their passion for the area, they wanted to solve this problem via an online marketplace that would make wild and specialty foods more accessible to both professional and amateur chefs while giving small local businesses a new place to find customers.

<quote name="Jack Hamrick" title="Co-founder and CEO at Foraged">
If you take this very fragmented market and combine it with an incredibly passionate community and put that together on a platform marketplace, that’s a huge unlock.
</quote>

To build a first-of-its-kind wild and specialty food marketplace, they brought together a diverse team, including experienced engineers and a chef from Michelin-starred Noma, and later brought along prominent investors, including the[ VC firm Bessemer](https://techcrunch.com/2023/07/12/foraged-mushroom-marketplace-seed/).

![foraged-marketplace](/images/image%20$25$.png)

For the proof of concept, Foraged attempted two approaches: customizing a WooCommerce shop and building their own custom platform. However, both approaches had shortcomings.

With the WooCommerce shop, vendors had performance issues during traffic peaks as the application quickly got bloated from handling too many integrations. With the custom-built solution, the engineering team encountered bugs and instabilities in their ecommerce platform at every release. This was problematic since Foraged wanted to do several weekly releases as a fast-scaling company. Additionally, it was challenging to develop all commerce-related functionality from the ground up.

To solve the challenges, the team decided to look for alternative options. Specifically, the team was looking to:

*   **Support multiple vendors,** ensuring each vendor is able to handle products, shipping, orders, customers, and discount logic for their own store.

*   **Extend** **admin functionality** beyond regular commerce logic, ensuring vendors can chat with customers, track store followers, and similar.

*   **Integrate with multiple outside services** to add functionalities to the platform, like Shippo to handle vendor shipments, Auth0 for store access control, Contentful for product enrichment, etc.

The solution needed to be easily customizable and extensible to meet these requirements. Additionally, it had to provide a good developer experience when integrating with third-party solutions. The team found Medusa's modular architecture the perfect starting point for this.

<quote name="Andy Conner" title="Co-founder and Head of Product at Foraged">
Medusa was a saving grace really. There was no other alternative that would give us the control and customization options needed to build the unique customer and vendor experiences we wanted.
</quote>

## **Vendor dashboard to manage everything**

With many smaller shops and sellers on the platform, operating the store as frictionlessly as possible was a top priority for Foraged. Leveraging Medusa enabled them to focus on crafting a seamless vendor experience instead of building table-stakes commerce logic. Medusa’s modules would provide the necessary commerce features out-of-the-box while also offering the flexibility to add custom elements and integrate with 3rd party services.

![](/images/foraged-overview.png)

A key element in the seamless vendor experience was to ensure vendors could manage all store operations directly from their admin dashboard. To do this, Foraged enabled vendors to directly interact with 3rd party systems from the Medusa Admin, which is easily extensible through on-page [widgets](https://docs.medusajs.com/admin/widgets) or [UI routes](https://docs.medusajs.com/admin/routes) to create new pages. Some of their custom extensions include:

*   **User authentication** for store admins to sign in to their store via a Gmail account or equivalent SSO option via [Auth0](https://auth0.com/).

*   **Store dashboard** to view order notifications, find relevant articles, and access store data such as sales numbers, product views, and top-selling products.

*   **Fulfillment management** enables merchants to create shipments, print shipping labels, and track deliveries directly in their Admin. A custom [Shippo](https://medusajs.com/plugins/medusa-fulfillment-shippo/) integration powers all this.

*   **Extended product information** allows vendors to enrich product pages with additional data such as custom measurement specifications (Ozs., ltr., kg. etc.) and more product pictures using Medusa’s [Contentful integration](https://docs.medusajs.com/plugins/cms/contentful).

*   **Message app for** customers to directly message vendors with order inquiries, product questions, and more powered by [SendBird](https://sendbird.com/). Vendors can manage all chats directly from their admin dashboard.

*   **Waitlist feature** allows vendors to receive notifications when a customer signs up for a [product that is currently out of stock](https://medusajs.com/plugins/medusa-plugin-restock-notification/).

*   **Follower lists** enable customers to follow and get notifications about their favorite stores’ products. Vendors can view all followers within their Admin Dashboard.

Medusa’s out-of-the-box functionalities, such as [order overviews](https://docs.medusajs.com/modules/orders/overview), [product management](https://docs.medusajs.com/modules/products/overview), [discounts](https://docs.medusajs.com/modules/discounts/overview), [gift cards](https://docs.medusajs.com/modules/gift-cards/overview), etc., created an easy-to-manage dashboard for the Foraged vendors. Likewise, Medusa’s functionality was easily linked to the storefront, allowing the team to quickly and efficiently ship a great customer-facing webpage for the vendor's products.

<video controls preload="none" style="object-fit: cover; max-height: unset; max-width: 100%; margin-left: auto; margin-right: auto;" poster="/images/foraged-cover.png">
<source src="/videos/foraged.mp4" type="video/mp4" />
</video>

## **Improved development speed**

In addition to providing the team with the flexibility to build a customized vendor and customer experience, Medusa enabled the team to move much faster than anticipated. Previously, they had a troubled release process with several instabilities, but now they can ship multiple times per week without issues. Furthermore, pre-built Medusa integrations for solutions such as [Contentful](https://docs.medusajs.com/plugins/cms/contentful), [Stripe](https://docs.medusajs.com/plugins/payment/stripe), [Algolia](https://docs.medusajs.com/plugins/search/algolia), and others helped the team quickly get up and running.

<quote name="Andy Conner" title="Co-founder and Head of Product at Foraged">
We now release to production several times a week as Medusa is just easy to work with. Shifting to Medusa has felt a bit like going from building a car from scratch to getting our own custom one where we just had to hook up the wires and put them together.
</quote>

Next up, the team is looking to include subscription payments, allowing customers to subscribe to certain specialty foods for monthly deliveries. Aside from this, they are working on enabling vendors to create storefront customizations and utilizing Algolia to power dynamically populated shopping experiences, making it easier for customers to discover relevant products on the marketplace.


Foraged: Building a custom marketplace experience with Medusa

At Medusa, we’ve always focused heavily on empowering businesses to build products for a global audience with features like [multi-currency and multi-regional support](https://docs.medusajs.com/recipes/multi-region).

Today, we are excited to bring the same level of internationalization to Medusa Admin with the introduction of multi-language support. Multi-language support allows merchants to operate Medusa Admin in their preferred language by choosing from already-supported locales or creating new translations themselves.

This version includes translations in English, French, and Portuguese.

## Configuring your language

To configure your preferred locale, navigate to your store settings and select it from the list of supported languages:

![](/images/translations-medusa.gif)

The configuration will be specific to you and stored in your browser. This means you don’t have to worry about messing up your co-workers’ experience when choosing the locale for your Medusa Admin. However, this also means you might occasionally need to re-configure it if the browser storage is cleared.

## Adding new translations

If your preferred language is not currently supported, we encourage you to create and contribute with new translations to our project. This way, our community and users all over the world can benefit from them, and you will take part in helping us become the globally preferred commerce solution.

The process of adding a new translation file is relatively straightforward. You need to clone our [project](https://github.com/medusajs/medusa), copy one of the existing translation files, rename the file to the locale you are adding, and fill in all the translations.

For a detailed step-by-step guide, refer to our documentation covering [creating new admin translations](https://docs.medusajs.com/contribution/admin-translations).

## What’s next?

Multi-language support in Medusa Admin is the first step toward a fully internationalized merchant experience.

In the future, we will ship multi-language support to [Widgets](https://docs.medusajs.com/admin/widgets) and [UI Routes](https://docs.medusajs.com/admin/routes), so your Admin Extensions are displayed according to the locale setting of your store.

Additionally, we plan to support translation overrides, enabling you to replace existing translations with your own from your Medusa project. This feature will be useful in creating a bespoke merchant experience and will ensure that you can use admin extensions even if they are yet to be translated by the plugin author.

## Acknowledgments

Multi-language support was built entirely by community contributors [Geoffroy Empain](https://github.com/gempain) and [Mohammad Javad](https://github.com/mj-mehdizadeh). We owe them a huge thanks.

This is another testimony to open-source software's power and a great motivation for us (and you) never to stop building in public.


Announcing Multi-language support in Medusa Admin

With a market cap of +$10bn, CP Axtra Public Company Limited, is the number one wholesale operator in Thailand with their chain of Makro centers. The company operates over 155 outlets in 5 countries.  CP Axtra chose Medusa for their online platform, [Makro PRO](https://www.makro.pro/), which processes hundreds of individual and business orders from stores across Thailand every hour.

With Medusa’s building blocks, the Makro team simplified complexity and automated order management for Makro PRO, and they are now expanding the use of Medusa as their omnichannel order orchestration solution across all digital sales.

## Complexity at scale

![Makro PRO overview](/images/Makro%20Pro%20overview%20(2)-a93e503e.svg)

Makro PRO offers thousands of products across various categories such as food, home appliances, and electronics. Customers can access the store through [Makro PRO](https://apps.apple.com/us/app/makro-pro/id1570380497) mobile app and website. Orders are dispatched from over 100 stores across Thailand every hour. This expedited service requires efficient routing of fulfillments to nearby stores and third-party distributors.

In addition to the complex fulfillment handling, Makro PRO needed a commerce backend that would support:

*   **High order volume:** The solution needs to handle more than 5,000 orders daily, some of them including hundreds of line items, without compromising performance.
*   **Custom-built stack:** The solution must seamlessly integrate with their custom-built services, enabling them to retain control over essential elements like checkout, payment, and product services.
*   **Scalable**: The solution needs to handle orders from a product assortment curated across hundreds of Makro shops in Thailand along with its 3rd party distributor network.

## From monolith to modular

Makro PRO initially used a leading proprietary solution as their commerce backend but found their APIs increasingly difficult to integrate with as they rolled out [makro.pro](http://makro.pro/) across more stores in their network. For example, Makro reached rate limits and had to compromise on features due to the rigidity of its API.

The limitations led the team to search for a more adaptable solution. Building from scratch would be too time-consuming, so the team looked for a solution that would be great to work with for the team’s internal users but also be flexible enough to build great end-customer experiences around. The team evaluated various SaaS and open-source alternatives but ultimately chose to embrace Medusa, which would allow them to maintain data and stack ownership while providing core commerce primitives to build great customer experiences around.

<quote name="Pradeep Kumar" title="Tech Lead on the project">
Medusa offered the flexibility we needed to build a scalable setup. We could use our own custom checkout, fulfillment, and payment services while leveraging Medusa’s event-driven architecture for interprocess communication.
</quote>

## Medusa for Omnichannel Order Orchestration

![Omnichannel commerce setup](/images/Makro%20Pro%20setup%20(2\).svg)
Medusa is utilized as a central hub for order orchestration. Once orders pass through from one of Makro's storefronts, they are registered within Medusa and broken down by fulfillment type:

*   **1st party fulfillment** (1P) orders are sent to a custom-built system that coordinates the fulfillment across Makro stores.
*   **3rd party fulfillment** (3P) orders are sent to [Mirakl](https://www.mirakl.com/), a platform coordinating Makro's network of third-party sellers.

The Makro team utilized Medusa's customizable and event-driven architecture to manage the complexity of multiple fulfillment types per order. The team created a plugin using webhooks that allows Medusa to update the order statuses (in process, fulfilled, returned etc.) based on events triggered within the 1P and 3P systems. This enables Medusa to act as a unified order overview, which customer support uses as a reference point to check order statuses in real-time.

Similar custom integrations were also implemented for refund orchestration via their custom payment service.

<quote name="Thanakrit Gwan Juthamongkhon" title="Module lead on the project">
The design of the core modules [in Medusa] is consistent, it is clear how to use the database structures, and the domain modelling is done beautifully. It was easy to work with the Medusa framework.
</quote>

In the end, the Makro team successfully implemented Medusa within a few months to cover orders across Thailand. Currently, the solution processes over 5,000 orders daily.

The team now plans to extend the setup further in 2023 to let Medusa handle orders that go through sales reps, who currently create orders in a custom app for their B2B customers.


Makro PRO uses Medusa’s order management module to orchestrate +180,000 orders and +$300M in GMV yearly.

Makro Pro: Omnichannel Order Orchestration of +5,000 daily orders

We are excited to announce that [the Figma Community file for Medusa UI is now live](https://www.figma.com/community/file/1278648465968635936). The React component library for Medusa UI was introduced together with the [general availability of Admin Extensions](https://medusajs.com/blog/medusa-ui-and-general-availability-of-admin-extensions/) to make it simple to build beautiful extensions. Now, plugin authors (and anyone else curious) can build their designs in Figma using the same system our design team uses. Below, we share some of the core principles of the Medusa UI design system and its significance.

## Focus on function

The fundamental principle driving Medusa UI is simplicity, functionality, and low maintenance. We've streamlined the system to be lightweight yet effective, emphasizing the essentials without unnecessary complexities. Our approach is to include just the right amount of tokens and components so the designer using the system feels empowered and not overwhelmed.

Medusa UI embodies this principle through its straightforward approach. It is based on just two core elements: Tokens and Components. Tokens are named after their functionality and not their value. At first glimpse, this seems like a lot, but once you start using the system, you feel the speed. For instance, when designing, one can easily access default background colors by typing "bg-base" or default text colors with "fg-base”

![](/images/default-fg-colors.jpg)

All with variations referring to their function like Hover, Pressed, etc. You don’t need to remember what shade of Grey you decided to go with when you cursor over Secondary Buttons. Similarly, typography is organized into groups like Headers, Text, and Code. For some components, we use the very popular principles of Atomic Design Systems, but only if/when it makes sense. Some components are just components if it is faster to use and build it that way. We don’t rely on some heavy guidelines other than keep asking ourselves when we add new stuff: Does this speed up the design and development process?

## What's next?

If you want to dive deeper, we encourage you to explore Admin Extensions as a place to experiment with Medusa UI to integrate with the Admin Dashboard seamlessly. Furthermore, we are eager to get suggestions from the community on improvements to the system or requests for additional components to include. Reach out on [Discord](https://discord.gg/medusajs) or [Github](https://github.com/medusajs/medusa) to share your thoughts.


We are open-sourcing the companion design file for Medusa's UI library. Available now in Figma Community.

Medusa UI in Figma Community

Medusa UI and general availability of Admin Extensions

During [Recap](https://medusajs.com/recap/) in June, we announced the [beta launch of Admin Extensibility](https://medusajs.com/blog/announcing-admin-extensions/) — a way for developers and plugin authors to create components that enrich the merchant experience through additional context and tailored workflows.

Today we are excited to announce the general availability of Admin Extensibility. To try it out, upgrade to the latest version of Medusa and check out our guide to building your first Admin Extensions. 

```bash
yarn add @medusajs/admin@latest @medusajs/medusa@latest
```

Our community has helped us improve our Admin Extensibility feature and provided input to enhance the developer experience further. One area we especially wanted to tackle was making it easy to create Admin Extensions with the same look and feel as the rest of the Admin Dashboard.  As a result, we are excited to introduce Medusa UI – a component library for building beautiful and performant Admin Extensions fast. With minimal effort, the library enables developers to achieve the same look and feel as the rest of Medusa Admin when building UI Routes and Widgets.

## Medusa UI

Medusa UI is a React implementation of the Medusa design system. Most components are based on [Radix UI Primitives](https://www.radix-ui.com/primitives), and we use [Tailwind CSS](https://tailwindcss.com/) for styling, shipping our own preset with our customizations.

We aimed to keep the component APIs light, composable, and reasonably unopinionated. Much like the primitives we have built upon, we have tried to leverage and respect the native HTML API as much as possible, and we hope you will find the components easy to get started with and put together to build the experiences you need.

Using Medusa UI in an Admin Extension can be as simple as:

```tsx
import type { WidgetConfig } from "@medusajs/admin"
import { Button, Container, Heading } from "@medusajs/ui"

export default ({ order }) => {

  const sendOrderToErp = () => {
    // POST order details to your ERP
  }

  return (
    <Container>
      <Heading>Your ERP</Heading>
      <Button onClick={() => sendOrderToErp()}>Push order</Button>
    </Container>
  )
}

export const config: WidgetConfig = {
	zone: "order.details.after",
} 
```

To help you get started with Medusa UI, we have published [its own Documentation site](https://docs.medusajs.com/ui). This should get you up and running and provide more information on the available components and how to use them. You will also find information on Medusa Icons we have made public and more details on theming.

In the coming weeks, we aim to provide more composition and complex Medusa-specific examples within the docs.

## What’s next?

To get started building Admin Extensions, visit the guide in [Our Documentation](https://docs.medusajs.com/admin/widgets). We are excited to see how this new feature will be leveraged to build powerful digital commerce applications.

The Medusa community constantly makes new additions to the Medusa ecosystem. We are always excited about these contributions, which range from plugins to platforms and templates. Currently, our [Plugin Library](https://medusajs.com/plugins/) has more than 100 open-source plugins available via npm. Below, we wanted to highlight some of the latest additions from our community members.

## Latest community contributions

### SvelteKit Storefront Starter for Medusa

![SvelteKit-Medusa](/images/Untitled%20(14\)-87873634.png)

In our most recent [community highlight](https://medusajs.com/blog/community-highlights-1/), we were excited to announce the introduction of the SvelteKit client. Now, [Lacey Pevey](https://github.com/pevey) made it even easier to get started using [Svelte](https://kit.svelte.dev/) with her new [SvelteKit eCommerce Store Starter](https://github.com/pevey/sveltekit-medusa-starter/tree/main), a Svelte storefront designed to integrate with your Medusa backend seamlessly.

The starter uses the [SvelteKit client](https://medusajs.com/plugins/sveltekit-medusa-client/) behind the scenes to interact with the Medusa backend. It comes with ready-to-use pages like a product gallery and product detail pages. You will also find auth, cart, and checkout flows implemented in the starter. All the pages and flows are customizable to adapt the template to your use case.

You can watch Lacey set up Medusa with Svelte in her latest video from the Svelte Society, [here](https://www.youtube.com/watch?v=rVVHxows9dY).

### Postmark Plugin

[Bram Hammer](https://github.com/breakerh) recently contributed with a new [Postmark plugin](https://medusajs.com/plugins/medusa-plugin-postmark/). The plugin lets you use the Postmark service as a [notification provider](https://docs.medusajs.com/development/notification/overview) with your Medusa backend. This can be useful for upselling and transactional emails, among other things.

Bram even took this plugin a step further by adding support for generating and attaching PDF invoices and credit notes to customer emails. Additionally, it lets you send personalized reminder emails to customers who have abandoned their cart or upselling emails to customers who have recently purchased from specific collections.

### Medusa Blog Plugin

[Lacey Pevey](https://github.com/pevey) developed a [blog plugin](https://medusajs.com/plugins/medusa-plugin-blog/) for users managing blog pages as part of their commerce site. This plugin expands the capabilities of your Medusa backend by enabling you to organize and manage blogging content.

With this plugin, you can create your own blog posts and conveniently categorize them using tags such as product, collection, or custom values already existing within your store. Additionally, it enables you to query and retrieve all your blog posts based on various criteria, including tags, categories, products, or collections, for a more user-friendly blog experience.

### Medusa Admin Flutter in beta

![Medusa-Admin-Flutter](/images/Medusa-Admin-Mobile-Screenshot-48f33110.png)

[Ragheb](https://github.com/mllrr96) is developing a mobile-optimized Medusa Admin app using Flutter for iOS and Android. The app is currently in beta, but you can test it and keep track of newly added features and enhancements by visiting its [git repository](https://github.com/mllrr96/Medusa-Admin-Flutter).

Despite being in beta, the app already offers a range of valuable features, such as updating store settings (regions, sales channels, etc.) and managing collections of products, customers, and discounts. The app also includes a built-in dark mode feature.

### Canada Post Fulfillment plugin

[Alexghebo](https://github.com/alexghebo) created a [Canada Post plugin](https://medusajs.com/plugins/medusa-fulfillment-canadapost/) for integrating your Medusa backend with the Canada Post fulfillment provider, which can be utilized during the checkout process and throughout the order management workflow.

The plugin enables customers to access real-time shipping rates and track their orders. It also allows merchants to manage shipping labels, generate customs documentation, and monitor shipment statuses, ultimately enhancing the overall shopping experience for buyers and sellers.

### Platform.sh for Medusa deployment

[Vinnie Russo](https://github.com/vincenzo) built a [Platform.sh template](https://github.com/platformista/medusa) designed to ease the deployment process for a Medusa ecommerce solution. The template includes the essential Medusa backend infrastructure, the admin dashboard, and the Next.js storefront.

The template allows users to use [Platform.sh](https://platform.sh/)’s infrastructure to launch their Medusa ecommerce shop with a single click. [Platform.sh](https://platform.sh/) is a PaaS that offers a unified solution for building, running, and scaling websites and applications.

## Community Radar

<tweet tweetId="1679568690138980352" />

Shout-out from the Vercel-team to our updated Medusa Next.js Starter Template with App Router support.

<tweet tweetId="1687131317845037059" />

[Lacey Pevey](https://github.com/pevey) shows how to combine Svelte and Medusa on the latest live stream from the Svelte Society.

<tweet tweetId="1685718106583293952" />

Adil showing off some well-deserved Medusa merch from his community contributions.

## Created something cool with Medusa? Let us know!

We would love to hear about the cool projects you’ve created with Medusa. Whether it’s plugins, widgets, storefront starters, your own store built with Medusa, or anything similar.

You can share all your cool projects in the *#Showcase* channel on our [Discord](https://discord.com/invite/medusajs) where we usually collect the latest community highlights. You can also learn how to publish your plugins on our Plugin Library using this guide in our [documentation](https://docs.medusajs.com/development/plugins/publish).


Community Highlights Aug'23

layout

title

excerpt

markdown_content

theme

featuredImage

seo_description

seo_keywords

date

authors

postSeries

Announcing Next.js Starter with App Router support


Medusa is introducing Admin Extensibility in public beta to enable easy customization of Medusa's Admin dashboard. With Admin Extensibility, developers can create Widgets with custom React components that enrich the merchant experience through additional context and tailored workflows.


Admin Extensibility is a big addition to Medusa's capabilities for supporting rich digital commerce applications. With the launch of our public beta, we hope to give developers more power when solving commerce problems, and we would love to hear your feedback on further improving the feature.


## How Widgets work


Widgets allow developers to add custom React components in injection zones spread across existing pages in the Admin Dashboard. For example, you can add a button on the order details page that links to the order in an integrated ERP system.


Widgets are easy to build, and Medusa automatically registers them when exporting a React component and its configuration from files placed in the `src/admin/widgets` directory in your project or plugins.


For example, you can add a link to an ERP system in your order details page with the following widget:


```typescript
// my-plugin/src/admin/widgets/erp-button.tsx

import type { WidgetConfig } from "@medusajs/admin"

export default ({ order }) => {
  const link = `https://myerp.com/orders/${order.id}`
  return (
    <a href={link}>
	    View in MyERP
	</a>
  )
}

export const config: WidgetConfig = {
  zone: "order.details.after"
}
```


Widgets can be placed on most existing pages in the Admin Dashboard, and often there are multiple zones within each page.


You can learn more about widgets in [our documentation](https://docs.medusajs.com/admin/widgets).


## Admin UI Routes


Another aspect of admin extensions that we’re introducing is Admin UI Routes. You’ll be able to add new routes into your admin dashboard in routes similar to Next.js 13 routes.


Similar to Widgets, Admin UI Routes are simply exported React components created in files under the `src/admin/routes` directory. You can also specify that these routes can be added into the sidebar.


For example, you can add a new “Custom Route” link into the sidebar by creating the following component:


```typescript
// src/admin/routes/custom/page.tsx

import { RouteConfig } from "@medusajs/admin"
import { CustomIcon } from "../../icons/custom"

const CustomPage = () => {
  return (
    <div>
      This is my custom route
    </div>
  )
}

export const config: RouteConfig = {
  link: {
    label: "Custom Route",
    icon: CustomIcon,
  },
}

export default CustomPage
```


You can learn more about Admin UI Routes in [our documentation](https://docs.medusajs.com/admin/routes).


## Enhanced Developer Experience


An important constraint for our work when building Admin Extensibility was ensuring a great development workflow.


As mentioned, we are therefore introducing the `src/admin/widgets` and `src/admin/routes` directories as new special directories in Medusa plugins and projects. The Medusa core automatically scans for valid Widgets and Admin UI Routes during build time, ensuring that you don’t have to battle with configuration files and can get straight to solving the important problems you are working on.


Additionally, we extended the `medusa develop` command used to start your development server. We now listen for changes in the `src/admin` folder and hot reload your dashboard, so you can instantly view your changes as you build new Widgets and Admin UI Routes.


## Shipping admin extensions in plugins


Widgets and UI Routes can ship together with plugins, adding a new dimension to their capabilities. For example, we have added a Widget to the Stripe plugin that shows additional data like fraud evaluation on your order details page when the plugin is installed.

<video controls preload="none" style="object-fit: cover; max-height: unset; max-width: 100%; margin-left: auto; margin-right: auto;" poster="/images/custom-widget-fraud-cover.png">
<source src="/media/custom-widget-fraud.mp4" type="video/mp4" />
</video>


To ship Admin extensions with plugins, plugin developers need to run the bundle command from `@medusajs/admin` and Medusa will then automatically pick up the customization upon installation:


```bash
medusa-admin bundle
```


When installing plugins you can specify in your `medusa-config.js` file whether you want a plugin’s Admin extensions injected in your dashboard or not to ensure you are always in control of the merchant experience. Opting in to admin extensions is done with the `enableUI` option:


```javascript
// medusa-config.js

module.export = {
  ...,
  plugins: [
    {
       resolve: "medusa-payment-stripe",
       options: {
         ...,
         enableUI: true,
       }
    }
  ]
}
```


You can learn more about creating plugins including admin extensions in [our documentation](https://docs.medusajs.com/development/plugins/create).


## What’s Next?


Admin extensions are still in beta, so we will continue on improving this feature to make it stable and provide a better developer experience.


We are also excited to see what you will build with the new Admin Extensibility feature and as we continue improving the feature, we would love to hear your feedback.


If you want to learn more about Admin Extensibility, check out the docs [here](https://medusa-docs-git-docs-recap-2023-q2-medusajs.vercel.app/admin/widgets).


You can also visit our [Discord](https://discord.gg/medusajs) or [GitHub Discussions](https://github.com/medusajs/medusa/discussions) to provide feedback on the feature.



Announcing Admin Extensions

Building rich commerce experiences often starts in the front end. But the backend is what defines the boundaries of what’s possible. This realization is what motivated Medusa and our approach to simplifying commerce development.

While Medusa has made building deep customization in your backend easy, creating these customizations requires developers to switch contexts between storefront and backend codebases.

Today, we are thrilled to bring our commerce building blocks closer to frontend frameworks and serverless environments with the beta release of our Product Module.

The Product Module enables developers to access Products, Variants, Categories, and more through a standalone package that can be installed and run in Next.js functions and other Node.js compatible runtimes.

## Usage Example with Next.js

Here is what the Product Module looks like used in a Next.js function:

```
// app/api/products/route.ts

import { NextResponse } from 'next/server'
import { initialize } from "@medusajs/product"

export async function GET(request: Request) {
  const productService = await initialize()

  const products = await productService.list({
		tags: { value: ["featured"] },
	}, {
    take: 5
  })

  return NextResponse.json({ products })
} 
```

With the `initialize` call, the Product Module establishes a connection to your database and gives you a Product Service to run queries through.

When installed, the Product Module feels like an extension of your codebase that you can use to build bespoke experiences across your storefront with minimal friction and full control.

Learn more about how to use the Product module in [our documentation](https://docs.medusajs.com/modules/products/serverless-module).

## Serverless Compatibility

The Product Module works independently of your Medusa backend and can be deployed directly to serverless environments like Vercel. This new deployment mode has many benefits, like providing auto-scaling during traffic spikes without configuring advanced infrastructure.

## Product Module Demo

To demonstrate how the Product Module works with Vercel and Next.js, we have built an ecommerce personalization demo. The demo uses the visitor’s location and a user’s session to personalize what products are shown to the customer first.

The personalization code runs directly in a Next.js function deployed to Vercel and uses Medusa’s Product Module to query and respond with relevant products.

You can check out the demo [here](http://product-module.medusajs.com) and learn more about how it works.

<video controls preload="none" style="object-fit: cover; max-height: unset; max-width: 100%; margin-left: auto; margin-right: auto;" poster="/images/product-module-cover.png">
<source src="/videos/product-module.mp4" type="video/mp4" />
</video>

## Runs in any Node.js project

The Product Module can be used in any Node.js project, including other frontend frameworks like Nuxt, SvelteKit, and Remix, but also in more traditional Node applications.

This makes Medusa portable to existing projects that need to orchestrate and manage products. As more of Medusa’s features adopt this new approach, this opens an incremental migration path for larger applications.

## What’s next?

With the initial release of the Product Module, the scope has been constrained to read-only operations, but this is still powerful enough for you to play around with and understand our direction.

In the coming weeks, we will be working on adding write operations to the Product Module, making it possible to create and update Products, Variants, and more through the module.

Later this year, we will ship more modules that adopt this new approach and pushes boundaries for what’s possible in digital commerce.

If you have feedback or ideas for improvements, please join the conversation in our [Discord](https://discord.gg/medusajs) or [GitHub Discussions](https://github.com/medusajs/medusa/discussions).

Check out more product announcements on our [Recap page](https://medusajs.com/recap). You can also learn more about the Product module in [our documentation](https://docs.medusajs.com/modules/products/serverless-module).


Announcing Product Module


Digital commerce today happens across multiple channels and regions. From the beginning, Medusa was built to support omnichannel sales and with the introduction of the[ Inventory module](https://medusajs.com/blog/announcing-multi-warehouse/) in April, we further strengthened these capabilities with multi-warehouse support.

Today, we are excited to announce Reservations Management, which gives merchants a better overview and control of their inventory status.

## A real-time overview of your inventory

Reservations in Medusa are virtual reductions in stock to avoid overselling, and they are automatically created after customers place orders pending fulfillment.

With Reservation Management, we are bringing a new view to the Admin Dashboard, where merchants can see Reservations across Stock Locations.

![](/images/sc0zYs4tJO.png)

Reservations can be accessed from your inventory list to quickly answer questions like “What orders hold reservations on this item?”.

<video controls preload="none" style="object-fit: cover; max-height: unset; max-width: 100%; margin-left: auto; margin-right: auto;" poster="/images/reservation-management-real-time-cover.png">
<source src="/videos/reservation-management-real-time.mp4" type="video/mp4" />
</video>

## Custom reservations for new experiences

With better visibility of Reservations in the Admin Dashboard, we also enable new uses for Reservations. Merchants can now create and edit Reservations directly from Admin, and add descriptions and metadata to provide context to a Reservation’s origin.

For example, if a merchant wants to ensure stock for certain customers (e.g., physical retail customers), they can create a Reservation and specify in the description field which customers the stock is reserved for.

<video controls preload="none" style="object-fit: cover; max-height: unset; max-width: 100%; margin-left: auto; margin-right: auto;" poster="/images/reservation-management-custom-cover.png">
<source src="/videos/reservation-management-custom.mp4" type="video/mp4" />
</video>

We have built a demo to show how Reservations can be used as a building block in omnichannel experiences. In the demo, we walk through how to create a book-online-try-in-store feature for an e-commerce website. Customers select a size they want to try in a physical retail store, and a Reservation ensures that the item is ready for them to try when they arrive.

[The demo](https://reservation-demo.vercel.app/) uses our Inventory Module to create Reservations directly in a Next.js function.

## Filters to find what you need

Together with the new capabilities, we have added advanced filtering to ensure tracking down relevant Reservations is quick and easy. You can filter based on items, descriptions, creation dates, and more.

<video controls preload="none" style="object-fit: cover; max-height: unset; max-width: 100%; margin-left: auto; margin-right: auto;" poster="/images/reservation-management-filters-cover.png">
<source src="/videos/reservation-management-filters.mp4" type="video/mp4" />
</video>

## APIs and integrations

Reservation management has powerful APIs to enable automated orchestration and integration with ERP and IMS systems. You can learn more about the Inventory Module and its APIs in [our docs](https://docs.medusajs.com/modules/multiwarehouse/overview).

## What’s next?

Medusa makes it easy for developers to create rich digital commerce applications. With the new Reservation Management features, we are taking another step toward simplifying the complexities of omnichannel commerce, which Medusa is already being used for today.

As we build new and more advanced features to support developers in building the next generation of commerce, it’s important to ensure that the underlying data is accessible and manageable by users.

We are excited to see what creative ways you will put Reservations to use and, as always, would love to hear your feedback and input on how we can improve Medusa’s omnichannel capabilities further. Please join our [Discord](https://discord.gg/medusajs) or open a [GitHub Discussion](https://github.com/medusajs/medusa/discussions) to participate in the conversation.

Dive further into other parts of our latest release on our [Recap page](https://medusajs.com/recap).


Announcing Reservation Management

Good Chef & Webbers: Powering subscriptions with Medusa’s commerce modules


[Webbers Agency](https://webbers.com/) helped build an online meal subscription store for [Good Chef](https://goodchef.nl/) that sells shock frozen plant-based food. Webbers chose Medusa for its building blocks, which provided them with the flexibility to support Good Chef’s subscription logic while giving customers a great online experience.

<video controls preload="none" style="object-fit: cover;" poster="/images/goodchef-video-cover.png">
<source src="/videos/goodchef-video.mp4" type="video/mp4" />
</video>

## Ideal solution for a bespoke subscription model

When scoping the Good Chef project, Webbers identified that the subscription logic would be a key constraint on the implementation. Other ecommerce platforms were too rigid to support Good Chef's subscriptions, and the alternative of building the entire system from scratch would mean spending a lot of time recreating core commerce features like cart logic and discounts.

Instead, they chose to use Medusa, which provides building blocks for core commerce logic that can easily be customized for custom needs, like Good Chef's subscriptions.

<quote name="Daan van den Burg" title="Managing Partner at Webbers Agency">
We had used Magento and WooCommerce in the past, but they were not ideal for a modern headless stack. We tested Shopify, but then quickly hit a limit on how scalable and customizable the setup could be.
</quote>

It was important for Good Chef that subscriptions could be paid with the customer's preferred payment method. Likewise, they wanted the subscription flow, e.g. when renewals should happen, to be controllable as part of the commerce logic. This meant that Webbers couldn't use a payment provider-specific subscription solution like Stripe Billing.

So, they decided to build the subscription logic into Good Chef's Medusa project, making it independent of payment providers and giving customers the best experience.

## Building Subscription into Medusa

It is possible for customers to make single purchases on the site, but for the most part, customers sign up via the subscription flow outlined below.

![](/images/goodchef-customer-journey-2_(3\).png)

To implement subscriptions, Webbers leveraged Medusa's support for [custom data models](https://docs.medusajs.com/development/entities/overview). Webbers created a Subscription data model to hold information about Good Chef's offerings, including type of meal box, available frequencies and prices. Additionally, they added relations between Orders and Subscriptions to be able to track which Subscription an Order is related to.

<quote name="Pepijn van Vlaanderen" title="Head of Development at Webbers">
The architecture of Medusa made it simple to add custom logic to the codebase. It was very easy to create our own entities and extend Orders in Medusa.
</quote>

To trigger the creation of new Orders, Webbers used [Medusa's cron jobs](https://docs.medusajs.com/development/scheduled-jobs/overview) to execute a nightly check for Subscriptions that need renewal. Orders are created with Line Items of the customer's chosen meal box and are automatically paid for through the Subscription payment method.

![](/images/goodchef_payment_flow_-_vertical_(2\).jpg)

With this implementation, Webbers was able to bring Good Chef’s vision to life without compromising the commerce system’s flexibility or their control over the logic behind the subscription flow.

## Straightforward Developer Experience

This project was Webbers’ first time using Medusa, so they had to learn its architecture and fundamentals to understand how to customize it and implement Good Chef’s use case. This was not a big challenge, and they quickly grasped the concepts within Medusa and how to utilize them.

<quote name="Pepijn van Vlaanderen" title="Head of Development at Webbers">
It was a new system for us, but it was straightforward and easy to learn.
</quote>

One of the aspects the Webbers team has come to appreciate is the developer experience that Medusa provides. It offers the flexibility to select only the necessary functionality for their use case and extend with custom logic when needed.

This made Medusa the commerce infrastructure of choice for Webbers, as they now use it as their go-to solution in other client projects.

<quote name="Pepijn van Vlaanderen" title="Head of Development at Webbers">
We like the SDK approach that Medusa offers, as it makes it easy for us to cherry-pick what we need and quickly build it out. It gave us the confidence to use Medusa for other projects so that we can help our clients and give them a stable ecommerce infrastructure.
</quote>

Good Chef: Powering subscriptions with Medusa’s commerce modules

Community Highlights: Strapi Integration, SES Plugin, and More!

[Changing the way commerce is built](https://medusajs.com/readme/) is no easy undertaking. Therefore, we are incredibly excited about our Medusa community, their support, and their amazing contributions that make it easier for others to move to a more modular way of building commerce.

This article is part of an ongoing series that periodically highlights community plugins, storefront starters, quotes, and more. Join our community of over 5,000 developers on [Discord](https://discord.com/invite/medusajs) to stay updated with all community-related news and discussions. You can also visit our [Plugin Library](https://medusajs.com/plugins/) to browse many community contributions.

## Latest community contributions

### Medusa and Strapi Integration

![](/images/ou83fyNmjX.png)

[Govind Diwakar](https://github.com/SGFGOV) has created a [Strapi monorepository](https://github.com/SGFGOV/medusa-strapi-repo) with all the components necessary for you to set up and use Strapi with Medusa. Within this monorepository, you’ll find a Strapi project, a Medusa plugin for Strapi, a Strapi plugin for Medusa, and other components that will make your integration between Medusa and Strapi successful.

By integrating Strapi and Medusa, you can utilize rich CMS features that Strapi provides while using Medusa’s powerful commerce features.

Check out the [monorepository](https://github.com/SGFGOV/medusa-strapi-repo) for more details about the project and how to set it up.

### Medusa SES Plugin

[Lacey Pevey](https://github.com/pevey) created a plugin that allows you to use AWS Simple Email Service (SES) as a notification provider in your Medusa backend. By using this plugin, you can send emails to the customer when an order is placed, a password reset has been requested, a gift card has been created, and more using AWS SES.

The templates used for the emails are stored within your Medusa backend in a `data` directory, and they’re based on handlebars. So, they’re compatible with SendGrid templates as well.

Check out the [Medusa SES Plugin](https://medusajs.com/plugins/medusa-plugin-ses/) for more details about its features and how to install it.

### Medusa SvelteKit Client

We also got a much-requested SvelteKit client that lets you interact with your Medusa backend from a SvelteKit storefront. With this client, you can easily build a SvelteKit storefront or admin for your Medusa backend.

SvelteKit enables you to combine the fluid user experience of client-side reactivity with the ability to handle logic on the server when desired. This keeps your Medusa backend firewall-protected and accessible only to your storefront server, which provides an additional layer of security compared to directly exposing your backend.

Check out the [Medusa SvelteKit Client](https://medusajs.com/plugins/sveltekit-medusa-client/) for more details about its features and how to install it. Thanks to [Lacey Pevey](https://github.com/pevey) for another great contribution.

## Community Radar

<tweet tweetId="1650797861192323072" />

## Created something cool with Medusa? Let us know!

We would love to hear about all the cool projects you’ve created with Medusa. Whether it’s plugins, storefront starters, your own store built with Medusa, or anything similar, we’d love to see it and hopefully share it in our next Community Highlights!

You can share all your cool projects in the Showcase channel on our [Discord](https://discord.com/invite/medusajs). You can also learn how to publish your plugins on our Plugin Library using this guide in our [documentation](https://docs.medusajs.com/development/plugins/publish).


Community Highlights May'23

At Medusa, we empower developers to do more with less. Our modular approach to commerce tooling equips developers with the means to create rich applications without hacky workarounds.

These applications often integrate with 3rd party solutions e.g. to accept payments, which we support through easy-to-configure plugins. To make our plugins more conveniently accessible, we are excited to have recently launched our Plugin Library.

Our [Medusa Plugin Library](https://medusajs.com/plugins/) provides a simple way to view the pre-built plugins available for Medusa. The list includes plugins supported by the core team (indicated by a small Medusa logo) and community plugins that can be accessed through npm.

## Covering the full commerce stack

By using Medusa commerce modules, you already get a strong commerce foundation out of the box, including support of [inventory and multi-warehousing](https://docs.medusajs.com/modules/multiwarehouse/overview), [multi-region support](https://docs.medusajs.com/modules/regions-and-currencies/overview), [multi-channel handling](https://docs.medusajs.com/modules/sales-channels/overview), [advanced tax](https://docs.medusajs.com/modules/taxes/overview), [promotion features](https://docs.medusajs.com/modules/price-lists/overview), and more.

Our Plugin Library allows you to extend beyond these modules and quickly build a connected stack with integrations for services such as:

*   **Payments** (e.g. [Stripe](https://medusajs.com/plugins/medusa-payment-stripe/), [Paypal](https://medusajs.com/plugins/medusa-payment-paypal/), [Adyen](https://medusajs.com/plugins/medusa-payment-adyen/), [Klarna](https://medusajs.com/plugins/medusa-payment-klarna/))
*   **Notifications** (e.g. [Sendgrid](https://medusajs.com/plugins/medusa-plugin-sendgrid/), [Mailchimp](https://medusajs.com/plugins/medusa-plugin-mailchimp/), [Slack](https://medusajs.com/plugins/medusa-plugin-slack-notification/), [Twilio](https://medusajs.com/plugins/medusa-plugin-twilio-sms/))
*   **Shipping** (e.g. [Webshipper](https://medusajs.com/plugins/medusa-fulfillment-webshipper/), [Brightpearl](https://medusajs.com/plugins/medusa-plugin-brightpearl/), [Shippo](https://medusajs.com/plugins/medusa-fulfillment-shippo/))
*   **Search** (e.g. [MeiliSearch](https://medusajs.com/plugins/medusa-plugin-meilisearch/), [Algolia](https://medusajs.com/plugins/medusa-plugin-algolia/))
*   **Storage** (e.g. [S3](https://medusajs.com/plugins/medusa-file-s3/), [DigitalOcean](https://medusajs.com/plugins/medusa-file-spaces/), [MinIO](https://medusajs.com/plugins/medusa-file-minio/))
*   **CMS** (e.g. [Contentful](https://medusajs.com/plugins/medusa-plugin-contentful/))
*   **Analytics and monitoring** (e.g. [Segment](https://medusajs.com/plugins/medusa-plugin-segment/), [Sentry](https://medusajs.com/plugins/medusa-plugin-sentry/))

## Contributing your own plugin

We always welcome community contributions. To get your plugin live in our Plugin Library, all you have to do is [create your own Medusa plugi](https://docs.medusajs.com/development/plugins/create)n and publish it through npm following our [publishing guidelines](https://docs.medusajs.com/development/plugins/publish). Within a week the plugin will appear in the plugin library. If this is not the case, feel free to create an Issue on GitHub, and we’ll look into it.

On that note, we want to thank our community so far for helping us create an extensive plugin universe. Without your contributions, we would not have much to showcase.

## More Medusa

If you want to know more about our recent release and product priorities head to our [April’23 Recap](https://medusajs.com/recap/). Otherwise, stay in touch via our newsletter for more product updates.


Introducing Medusa’s Plugins Library

Extending Medusa Example: Creating a Marketplace

Find related blog posts below

Want to know more about Medusa

We're excited to announce a new plugin that provides developers with a better way to manage and deploy Admin for Medusa stores.

This plugin introduces a new approach for shipping the dashboard and lays the groundwork for other product improvements planned for Admin later this year. Specifically, we plan to support admin extensibility, essential for enabling developers to build rich commerce applications. With the ability to extend the admin UI with plugins and extensions, developers will be able to create solutions that meet their end-to-end use cases.

Although admin extensibility is still in development, this initial step provides developers with more options and improves the developer experience of deploying and maintaining Admin.

## Seamless Updates

With the move to distributing Medusa’s Admin through `npm` we will also ensure that Medusa Admin is versioned. Prior to this release, the dashboard was available through a GitHub repository, and users must keep up with the latest changes. This has sometimes led to version mismatches and incompatibilities between the UI and server.

With the new introduction of admin as an NPM package, users can update their admin with a single command. The plugin's versioning follows major and minor updates to the Medusa core, ensuring users can update their admin without worrying about compatibility issues.

## Flexible Deployment Options

Developers have two options for deploying Admin using the plugin. They can either integrate it as a part of their server, where the dashboard is directly served from an endpoint, or they can use the plugin as a build tool and deploy the dashboard to a hosting service such as [Vercel](https://docs.medusajs.com/deployments/admin/deploying-on-vercel).

Users can also combine both options. They can use integrated hosting while in development to have a simple development environment when building with Medusa. Later, they can opt for deploying to an external host in production to leverage modern infrastructure tools.

## An Integrated Part of Your Store

Medusa’s mission is to equip developers with the necessary tools to create robust commerce applications. Medusa's extensible core makes this possible. With this plugin, we're bringing Admin closer to the core. This opens the door to many new, exciting possibilities, including allowing developers to create admin extensions directly from their server directory or through plugins. This will give plugin maintainers the ability to create end-to-end extensions. We're currently in the process of creating a new Extensions API, and we'll share more on this soon.

## Trying it Out

As mentioned, the plugin provides developers with two options for deployment. In this section, we will cover how to host Admin as an integrated part of your server. For information on deploying Admin to an external host, please refer to our [documentation].

## Installing the Plugin

To install the plugin, use your preferred package manager:

```bash
yarn add @medusajs/admin
```

Then configure it in `medusa-config.js`:

```js
const plugins = [
  // ...
  "@medusajs/admin"
];
```

In `package.json` we need to add a new script to build the dashboard:

```json
"scripts": {
	// ...
	"build:admin": "medusa-admin build"
}
```

We can now build Admin and start up our server

```bash
yarn build:admin
yarn start
```

The dashboard can now be accessed from your browser. If you run Medusa on the default port, the URL is ``.

![](/images/FtMuPMrHJ1.png)

## What's next?

We have several exciting improvements planned for the Admin in the coming months. Currently, we are improving our design system and will ship a new component library to go along with it. Our goals are to enhance the overall look and feel of the dashboard and its responsiveness, and to introduce a new dark mode theme. The new component library will be open-sourced, and we hope developers will find it useful when creating admin extensions once the Extensions API is released later this year.

For a full overview of what we have planned for Admin and Medusa, you can read more on our [GitHub discussions page](https://github.com/medusajs/medusa/discussions/categories/roadmap). We would love to hear any feedback and ideas you might have for the next features we are working on, so please do not hesitate to share them with us.

You can learn more about the [admin plugin in our documentation](https://docs.medusajs.com/admin/quickstart).


Announcing Admin plugin

[Medusa](https://medusajs.com/) provides commerce building blocks for developers to build rich commerce applications. With the latest evolution of our toolkit towards a more modular architecture, we are taking steps to make Medusa more agnostic to infrastructure. As a big step in this direction, we are excited to announce Medusa’s new cache modules.

In this article, we will look under the hood to see how cache modules work, which cache module you can use in your project today, and, finally, we will demonstrate how easily a Memcached module can be built.

## How it works

Cache modules in Medusa implement the [`ICacheService`](https://github.com/medusajs/medusa/blob/develop/packages/types/src/cache/service.ts) interface and are used internally to cache data like product prices and tax rates.

Medusa’s default starter project comes with an in-memory cache module (`@medusajs/cache-inmemory`) pre-installed, which uses a plain JavaScript Map object to store data. This is great for testing and development purposes, but not recommended for production environments. You can have one cache module installed at a time and for production environments, we have built a cache module that uses Redis (`@medusajs/cache-redis`). To enable the Redis cache module, simply install the package:

```bash
yarn add @medusajs/cache-redis
```

And configure it in your `medusa-config.js` file:

```js
module.exports = {
  //...
  modules: {
  	// ...
		"cacheService": {
			resolve: "@medusajs/cache-redis",
			options: { ttl: 30, redisUrl: REDIS_URL }
		}
	},
};
```

And that’s it. With just a couple of changed config lines, you use a different data store for our caching layer.

## Building a cache module

As mentioned above, we are making in-memory and Redis cache modules available today. Building a new cache module is, however, very easy if you have a different caching tool in place already or prefer another caching technology. To demonstrate how to build a cache module, we will implement `ICacheService` to work with Memcached. For communication with the Memcached instance, we will be using the [Memcached client for Node.js](https://www.npmjs.com/package/memcached).

The first thing to do is to create our project. We need a basic TypeScript project configured for Node. You can clone a preconfigured starter [here](https://github.com/fPolic/medusa-cache-memcached/tree/setup), and after running `yarn install`, start building.

To implement the service, create a new TypeScript file in `src/services`:

```ts
// src/services/memcached-cache.ts

import Memcached from "memcached" // 1. Memcached client
import { ICacheService } from "@medusajs/medusa" // 2. Interface from medusa core that all caching modules need to implement

const DEFAULT_CACHE_TIME = 30 // 3. Keep data cached for 30 seconds

/**
 * 4. Module config type.
 * Defines which options can be passed to the module in the medusa-config file.
 */
type MemcachedCacheModuleOptions = {
  /**
   * Time to keep data in the cache (in seconds)
   */
  ttl?: number

	/**
		* Allow passing the configuration for Memcached client
		*/
  location: Memcached.Location
  options?: Memcached.options
}

type InjectedDependencies = {}

class MemcachedCacheService implements ICacheService {
  protected readonly memcached: Memcached
  protected readonly TTL: number

  constructor(
		{}: InjectedDependencies,
    options: MemcachedCacheModuleOptions // 5. Options passed as module config will be injected here by the modules loader
  ) {
    this.memcached = new Memcached(options.location, options.options) // 6. Instantiate Memcached client for communication with the Memcached instance
    this.TTL = options.ttl || DEFAULT_CACHE_TIME
  }

 /**
   * Set a key/value pair to the cache.
   * It is also possible to manage the `ttl` through environment variables using CACHE_TTL. If the ttl is 0 it will
   * act like the value should not be cached at all.
   */
  async set(
    key: string,
    data: Record<string, unknown>,
    ttl: number = this.TTL
  ): Promise<void> {
    return new Promise((res, rej) =>
      this.memcached.set(key, JSON.stringify(data), ttl, (err) => {
        if (err) {
          rej(err)
        } else {
          res()
        }
      })
    )
  }

  /**
   * Retrieve a cached value belonging to the given key.
   */
	async get<T>(cacheKey: string): Promise<T | null> {
    return new Promise((res, rej) => {
      this.memcached.get(cacheKey, (err, data) => {
        if (err) {
          res(null)
        } else {
          if (data) {
            res(JSON.parse(data))
          } else {
            res(null)
          }
        }
      })
    })
  }

  /**
   * Invalidate cache for a specific key.
   */
  async invalidate(key: string): Promise<void> {
    return new Promise((res, rej) => {
      this.memcached.del(key, (err) => {
        if (err) {
          rej(err)
        } else {
          res()
        }
      })
    })
  }
}

export default MemcachedCacheService
```

And that’s it. The final thing to add is export from the `index.ts` file like so:

```ts
// src/index.ts

import { ModuleExports } from "@medusajs/modules-sdk"

import { MemcachedCacheService } from "./services"

const service = MemcachedCacheService

const moduleDefinition: ModuleExports = {
  service,
}

export default moduleDefinition
```

You can find the entire implementation [here](https://github.com/fPolic/medusa-cache-memcached/blob/main/src/services/memcached-cache.ts).

To test the module with a Medusa instance, [link](https://classic.yarnpkg.com/lang/en/docs/cli/link/) your module project with a Medusa instance:

```bash
// first build the package from the root
yarn build

// register package
yarn link
```

Next, we need to add this package to our Medusa project and tweak our `medusa-config.js` file:

```bash
// in the root of your Medusa project run:
yarn link medusa-cache-memcached
```

```js
// medusa-config.js
module.exports = {
  // ...
  modules:{ 
		// ...
		"cacheService": 
			{
				resolve: "medusa-cache-memcached", 
				options: { location: "localhost:55000" }}
			},
};
```

With this example, we see how straightforward it is to build a (cache) module for Medusa. This, combined with the fact that Medusa is an open-source project, shows the advantages users of such projects have in terms of a growing ecosystem of existing modules.

## What’s next

The introduction of cache modules is a step in adding infrastructure agnosticism to Medusa’s architecture. This will make it easier to integrate Medusa into existing stacks and improve the developer experience. Our introduction of [EventBus modules](https://medusajs.com/blog/announcing-event-bus-modules) is a similar evolution to Medusa’s architecture. We are excited to see what you build with these new tools and can’t wait to launch more modules in the near future.

Learn more about [Cache Modules in our documentation](https://docs.medusajs.com/development/cache/overview).


Announcing Cache Modules

Today, we are announcing a significant update and change to the events system of Medusa. We are moving part of the Event Bus from the core package to a separate module. Our continuous efforts to build a more modular and flexible engine motivate the decision.

In a space with continuous innovations and fierce competition, the ability to adapt your product to changes, run experiments, and leverage new technology becomes highly relevant for businesses to stay ahead (or keep up) with the competition.

To do so, you need flexibility in your setup.

At Medusa, we strive to provide merchants and developers with the building blocks to create bespoke experiences. These building blocks give you a strong starting point and are created to be replaced with more advanced functionality as your business grows, and your needs change.

The flexibility and ease of customization enable businesses to focus on building the best product for their customers without worrying about the typical triennial migration project.

The Event Bus modules give businesses the freedom to choose the technology to power the events system of Medusa.

## What are modules?

Until now, Medusa has offered two ways of extending or replacing core functionality with custom implementations or third-party services; through [Strategies](https://docs.medusajs.com/advanced/backend/batch-jobs/customize-import/) and [Plugins](https://docs.medusajs.com/advanced/backend/plugins/overview/).

Strategies allow you to override an isolated piece of business logic e.g. cart completion or product import, and plugins are used to build custom features or integrate services with your engine. The latter is especially well-suited for when you want several of the same type of services installed, e.g. payment providers.

Modules allow you to replace business domains or specific elements in your stack with pre-built functionality, custom implementations, or third-party providers. They can be shipped through `npm` and are configurable in `medusa-config.js` - similar to plugins.

The main difference between Modules and Strategies and Plugins, in the context of business domains, is that Modules do not necessarily share application scope and resources with the core. Effectively, this means that a module can live without dependencies on core concepts and be powered by a separate data store.

This unlocks a multitude of opportunities, as you can power entire domains of Medusa with third-party APIs or custom implementations that fit your organization’s needs. Let’s take user authentication as an example. Separating the Users domain into a module will allow businesses to use providers like Okta to manage everything related to users, authentication, roles, etc. -  without shoehorning an existing feature to work correctly through an integration.

Refer to [our documentation for a detailed walkthrough of the Modules API](https://docs.medusajs.com/development/modules/overview), including setup and building one yourself. In this post, we only briefly explain simple usage and configuration.

## Event Bus module

One of the first use cases of modules is within the events' domain. We are introducing an Event Bus module enabling businesses to use any available pub/sub technology to power the message broker of Medusa.

We still offer a fully functional event bus powered by Redis out-of-the-box, but instead of being baked into the core, you must install and configure it.

Additionally, we are replacing the default event bus, which previously used a mocked Redis instance, with a [local event bus module](https://docs.medusajs.com/development/events/modules/local) powered by the Node EventEmitter. This module is not recommended for a production environment.

You’ll find more details about the Redis event bus functionality and configuration in [the documentation](https://docs.medusajs.com/development/events/modules/redis).

### Installation

The following steps should be taken to install the Redis Event Bus and upgrade your existing setup to use the Modules API.

These are the required steps for any module going forward - unless the module comes with a default package; in that case, you only need to install the `npm` package in your Medusa project.

**Installing the Redis Event Bus**

Install the Redis event bus with `npm`:

```bash
yarn add @medusajs/event-bus-redis
```

Configure it in `medusa-config.js`:

```js
module.exports = {
  projectConfig: {
    database_url: DATABASE_URL,
		...
  },
  modules: {
    eventBus: {
      resolve: "@medusajs/event-bus-redis",
			options: {
        redisUrl: "redis://...",
      },
    },
  },
  plugins: ["medusa-payment-stripe"],
};
```

Again, we won’t cover the details of the configuration in depth - our documentation serves that purpose - but only briefly explain the code snippet above.

We use the new `modules` property on the project configuration object to specify the modules we want to override or add. The keys of this object are defined and exposed in the core, ensuring that modules are correctly registered.

The module key for the event bus is, you guessed it, `eventBus`. The value of the key is the module configuration. The `resolve` property points to the package you want to use and can be an `npm` package or a path to a local implementation.

The `options` property is a set of required and optional settings that are injected into the module. The only required property for the Redis Event Bus is the URL of your Redis instance. Other optional settings can be found in the documentation.

After performing these steps, you can restart your Medusa instance, and everything will work as always, but your events system will be configured and powered by our Modules API.

## Summary

The Modules API is a huge step toward a more composable architecture and will play a critical role in all our work as we advance. The Event Bus module is one of the first demonstrations of the API’s capabilities, though it does not do it full justice. The full power of the API will be more evident as we move into the business domains e.g. multi-warehousing. Read the [product announcement here](https://medusajs.com/blog/announcing-multi-warehouse).

The Event Bus module abstraction is valuable for products and companies that use Medusa as part of their larger system, as they typically have existing messaging infrastructure in place. Giving them the ability to use this infrastructure to power events in Medusa will make the integration easier and reduce costs and stack complexity.

The abstraction is also valuable for developers unfamiliar with Redis or BullMQ (our message queue library). It allows them to replace the technology of the events system with a framework they are more comfortable with, thus offering a better developer experience.

You can learn more about [the events system in our documentation](https://docs.medusajs.com/development/events/)

Give the new modules a try, and let us know what you think. Feedback is highly appreciated.


Announcing Event Bus Modules

On March 15th, we rolled out a new [Medusa documentation](https://docs.medusajs.com/) with a cleaner design and a straightforward structure. This is part of our mission to constantly improve our developer experience and help guide developers in their journey using Medusa.

In this article, I’ll detail the thought process, planning, and general work that went into revamping our documentation.

![](/images/qysrRNH_A6.gif)

## Problems with the Previous Documentation

A few months back, I wrote an article about [how we improved our documentation](https://medusajs.com/blog/how-we-improved-our-documentation/) at Medusa. In that article, I discussed why and how we decided to take a product approach towards documentation.

![](/images/edwfMn9F4E.png)

This lead to an improvement to our documentation from its initial state both in design, structure, and development tools and processes.

![](/images/-i90gZaZ2A.png)

However, it wasn’t long until we realized that although this was a huge improvement, it was still lacking in different areas.

### Documentation Structure

Our approach to structure was simple: if a documentation page was a tutorial or a guide that informed developers how to perform something, we put it under the “How-to Guides” category; if a documentation page was a conceptual guide explaining how a feature or a tool generally works, we put it under the “Conceptual Guides” category.

Although we believe in the beauty of simplicity, this approach was too simple for a solution like Medusa. Medusa is not an ecommerce platform that can be used in a single use case. Medusa provides the building blocks to build commerce applications. It can be used to create a fully-fledged ecommerce system, or some of its modules can be used within a larger microservice or composable architecture.

So, categorizing documentation pages that may cover topics related to the Medusa backend, the storefront, the admin, or other areas under general categories such as “How-to Guides” or “Conceptual Guides” became limiting. It made it difficult for developers to find the guide they’re looking for in a specific area, and it was misguiding, as it didn’t properly inform developers of the different ways they can use Medusa.

### Documentation Design

The previous design was a major step-up from the initial design we had, but it mainly lacked in visual elements that can help developers differentiate between different sections or areas of the documentation.

In addition, while performing user trials — where we ask developers to use our documentation to perform a task in Medusa — we received comments about some confusion while using the sidebar due to how it was designed.

## Planning for the New Documentation

As documentation is essential for a pleasant developer experience, our documentation team decided it was time to look into how we can improve our documentation.

### Figuring out the Information Architecture

We started off by building a new information architecture for the documentation. We created a hierarchy of the areas in Medusa, starting from the too-general categories and getting down to specifics.

For example, in the previous architecture, we stuffed the How-to category with guides that were not remotely related to one another. So, you would find a guide on how to implement a cart in the storefront right next to a guide on how to create an endpoint.

We started de-structuring that architecture to find the top-level main areas of interest, and work our way down from there. These areas ended up being [Commerce Modules](https://docs.medusajs.com/modules/overview) — which covered all guides related to commerce features, such as the implement cart guide — and [Medusa Development](https://docs.medusajs.com/development/overview) — which covered the fundamentals of developing with Medusa, such as the create endpoint guide.

Then, we would dive into the structure of each of these top-level areas and work our way down from there. For example, inside Commerce Modules, the guides should be categorized by each module. Within the category of each module, we categorized the guides based on whether they’re architectural guides or how-to guides, and what areas do these guides tackle (for example, admin or storefront).

Taking this granular approach towards categorizing the documentation can easily become too confusing. So, it was important to also design a journey that allows developers to find their next steps and not get lost within this architecture. This was a combination of writing an informative content structure and providing visual elements and effects to make the journey even clearer to developers.

### Re-designing the Documentation

After coming up with the initial draft of our new information architecture, we started working on the design to bring it to life. The redesigning of the documentation involved redesigning existing elements and creating new elements that provided visual values.

For example, we moved towards using descriptive icons in our main sidebar. We also redesigned the global sidebar within the documentation to ensure the categorizing and hierarchy is visually visible and clear.

Part of the redesign was also maintaining a consistent design system within our products at Medusa. So, the documentation now uses the same design system that products like the Admin use.

### Building the New Documentation

The last piece of the puzzle was building the new documentation. This included modifying existing functionalities and components, building new components, and reflecting the Medusa design system into the documentation.

One component we changed was the Feedback component that can be seen at the end of documentation pages. Although this component provided us with insightful feedback from developers using our documentation, we realized that we weren’t actually providing developers with any solutions if they run into any problems.

So, we revamped the Feedback component that provides possible solutions from closed GitHub issues. The issues are shown either based on the message that the developer enters, or based on the page they’re in.

![](/images/feedback-component.gif)

## The Final Result

The new documentation was a product of a lot of discussions and brainstorming to come up with an improved developer experience. After numerous rounds of iterations and improvements, we decided to roll out the new documentation.

As always, this in no way means that the documentation is now perfect or finished, and it should be no surprise if later in the year you find another article on how we — again — improved our documentation. Documentation is a continuous learning and growing experience as we further understand developers using Medusa, and as we further innovate with Medusa.

We look forward to any feedback you have, which you can always send on our [Discord](https://discord.gg/medusajs), GitHub [issues](https://github.com/medusajs/medusa/issues) and [discussion](https://github.com/medusajs/medusa/discussions), or using the feedback form within our documentation.


Announcing Medusa’s New Documentation

We are thrilled to announce the integration of Modules into Medusa's architecture. Medusa’s mission is to equip developers with the resources necessary for constructing rich and unique commerce applications. With our work to modularize commerce, we make commerce logic portable to modern infrastructure while further improving customization and scalability options.

This article introduces Modules in Medusa, an overview of how it's currently being used, and what to expect in the future.

## Understanding Modules

In software development, Modules are self-contained, reusable pieces of code that encapsulate specific functionality or features within an application. They foster separation of concerns, maintainability, and reusability by organizing code into smaller, independent units that can be easily managed, tested, and integrated with other modules.

Applying this concept to Medusa's architecture enables functional components (e.g., Medusa’s cart engine) to be extendable, entirely replaceable, or even capable of running independently of the main application.

A module comes with a definition containing information about its configuration and capabilities.

```ts
{
  key: string,
  registrationName: string,
  defaultPackage: string,
  label: string,
  canOverride: boolean,
  isRequired: boolean,
  dependencies: string[],
  defaultModuleDeclaration: {
    scope: "internal" | "external",
    resources: "shared" | "isolated",
  },
}
```

| **Property**                            | **Description**                                                                                                                                                                                                                                                                                                                                     |
| --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `key`                                   | The key to register a module in your `medusa-config.js` file.                                                                                                                                                                                                                                                                                       |
| `registrationName`                      | The name of the main service of the module and its registration in the `Awilix` dependency container.                                                                                                                                                                                                                                               |
| `defaultPackage`                        | If the module comes with a default package, it will be added directly in the definition. If there's no default package, this value is `false`.                                                                                                                                                                                                      |
| `label`                                 | Readable label to identify the module.                                                                                                                                                                                                                                                                                                              |
| `canOverride`                           | If `true`, the module is replaceable.                                                                                                                                                                                                                                                                                                               |
| `isRequired`                            | If `true`, the module is required.                                                                                                                                                                                                                                                                                                                  |
| `dependencies`                          | Array of dependencies. The `key` property of other modules.                                                                                                                                                                                                                                                                                         |
| *defaultModuleDeclaration `scope`*  | The module’s scope can be internal or external. An internal module communicates with other services part of the same application. An external module communicates with other services via a separate protocol e.g. HTTP, rpc, etc.                                                                                                                  |
| *defaultModuleDeclaration*`resources` | This is only applied to internal modules. A module that shares resources with the core uses the same database connection and the same Awilix container as the core. An isolated module will establish a separate database connection or uses a different data store and its Awilix container will only contain required dependencies from the core. |

Modules are loaded in a manner akin to plugins. When the server starts, modules specified in `medusa-config.js` are loaded while adhering to their respective configurations.

The latest version, v1.8, comes with several modules ready to be installed:

1.  **Inventory**: This module manages inventory for items, supports item reservations, and handles stock levels across multiple locations.
2.  **Stock Location**: This module handles stock locations for stores with multiple warehouses.
3.  **Event Bus (Local or Redis)**: A messaging module for publishing and subscribing to Medusa events. The default `module is ideal for local use, while the Redis-based` module is recommended for production environments.
4.  **Cache (Memory or Redis)**: A caching module designed to store cacheable parts of the application. The default `module stores data in memory, while the` module utilizes Redis for storage and is recommended for production use.

## The Road Ahead

The development of Modules is progressing rapidly, with numerous intriguing features in the pipeline. Modules that rely on databases can already either share the same database connection as the main application or establish a separate connection. Similarly, developers can choose whether a module will utilize its own dedicated database or share the primary Medusa Core database.

Modules will also offer the flexibility to be used within any Nodejs application. Below is an example of the inventory module being initialized and used directly in a Next.js handler:

```ts
import { initialize, InventoryServiceInitializeOptions } from "@medusajs/inventory";
import { IInventoryService } from "@medusajs/types";
import { NextApiRequest, NextApiResponse } from "next";

let inventoryService = null;
async function getInventoryService(): Promise<IInventoryService> {
  if (!inventoryService) {
		const options: InventoryServiceInitializeOptions = {
		  database: {
		    type: "postgres",
		    url: `postgres://postgres:@localhost/inventory`,
		  },
		};
    inventoryService = await initialize(options);
  }
  return inventoryService;
}

export default async (req: NextApiRequest, res: NextApiResponse) => {
  const { sku } = req.query as { sku: string };
  try {
    const service = await getInventoryService();
    const item = await service.createInventoryItem({
      sku,
    });
    res.json({ item });
  } catch (e) {
    res.status(400).json({ error: (e as Error).message });
  }
};
```

Nonetheless, this method may constrain module development to the same technology stack as Medusa (Node.js, TypeScript, and JavaScript). To attain a truly composable commerce architecture, we plan to support external modules in the future. These external modules will operate as independent services, facilitating communication through HTTP/RPC.

By implementing this feature, not only will default Medusa modules be capable of functioning as standalone services, but developers will also be at liberty to craft their services using their preferred language or technology. Medusa will subsequently communicate effortlessly with these custom services.

You can learn more about [Modules in our documentation](https://docs.medusajs.com/development/modules/overview). You can also Check out our [roadmap in GitHub](https://github.com/medusajs/medusa/discussions/categories/roadmap) to follow along with plans for future modules and to see what the team is working on.


Announcing Modules

Read more about our module architecture [here](https://docs.medusajs.com/development/modules/overview).

We’re excited to see what great new commerce applications will be built with these new primitives. To get started building, follow the installation guide [here](https://docs.medusajs.com/modules/multiwarehouse/install-modules).

With the release of the Inventory and Stock Location modules for Medusa, we provide a lightweight default option for multi-warehousing, as well as powerful customization options for bespoke integrations or solutions.

## Try it out

We’ve implemented the Multi warehousing feature using the new Module architecture. This is a powerful new pattern we are introducing to enable Medusa modules to be used within existing systems or hosted in isolated environments. An additional benefit of the modularized architecture is that Medusa core only depends on an interface. This allows you to replace Medusa’s inventory module with an IMS system of your choice. All you have to do is adhere to our `IInventoryService` interface.

### Integrate with the systems you know

<video controls preload="none" style="object-fit: cover;" poster="/images/fulfillment-video-cover.png">
<source src="/videos/fulfillment.mp4" type="video/mp4" />
</video>

We are introducing multi-warehouse functionality in Medusa, complete with extensive support for fulfilling orders from various locations, including the ability to split orders across stock locations. Furthermore, Medusa's sophisticated return, exchange, and claim processes are fully prepared for multi-warehouse operations, guaranteeing optimal order routing. As always, you have access to an extensive array of events to subscribe to, enabling the automation of your workflows.

## Flexible fulfillment options

Initially, we are launching the inventory module featuring a 1:1 mapping between variants and inventory items. Soon, we will introduce support for variants comprising multiple inventory items, such as those consisting of several components (e.g., a tabletop and legs).

<video controls preload="none" style="object-fit: cover;" poster="/images/manage-inventory-video-cover.png">
<source src="/videos/manage-inventory.mp4" type="video/mp4" />
</video>

Inventory is managed together with an inventory item’s variant information.

### Managing inventory items

Use the overview to adjust stocked quantities or go to variants to manage inventory further.

<video controls preload="none" style="object-fit: cover;" poster="/images/inventory-video-cover.png">
<source src="/videos/inventory.mp4" type="video/mp4" />
</video>

In the **Inventory** section, you'll obtain a comprehensive overview of your inventory items within a specific warehouse, providing you with a clear understanding of your real-time stock.

### Managing inventory

You can designate a location for Sales Channels, enabling its inventory to be readily accessible for carts and orders linked to the respective channel.

Locations are managed from the new sidebar item **Inventory** in a dedicated **Locations** tab.

## Managing Locations and Sales Channels

These entities seamlessly integrate with Medusa's existing data model and effortlessly connect with the current workflows around sales channels, carts, orders, fulfillments and returns.

Reservations can be used to allocate stock at an inventory level. This will initially be used to reduce inventory availability when orders are placed. But other opportunities like reserve-online-try-in-store can also be accomplished using Reservations.

### Reservations

Inventory Levels hold stock information for an inventory item at a specific location.

### Inventory Item Levels

Inventory Items represent your stock-kept items.

### Inventory Items

Use Stock Locations to register information about each location where you store inventory.

### Stock Locations

The Inventory and Stock Location modules come with the following new building blocks:

Medusa delivers versatile commerce primitives and tools designed to adapt seamlessly as your requirements evolve. Our new inventory management features follow suit, offering a clear pathway for integration with third-party tools, customization with your unique business logic, and exceptional portability to craft distinct commerce experiences.

## New primitives to manage inventory

As commerce businesses expand, they inevitably encounter the need to maintain inventory across multiple locations, such as global distribution centers or brick-and-mortar stores. Medusa now offers a comprehensive, ready-to-use solution for effectively managing inventory across various locations and streamlining order fulfillment processes.

We are excited to announce the release of two new modules built with the new Module SDK: [Inventory](https://docs.medusajs.com/modules/multiwarehouse/inventory-module) and [Stock Locations](https://docs.medusajs.com/modules/multiwarehouse/stock-location-module). Together, these modules unlock powerful Multi-Warehouse management capabilities for Medusa.

You can learn more about the Multi-Warehouse functionality in [our documentation](https://docs.medusajs.com/modules/multiwarehouse/overview).


Announcing Multi-Warehouse

We are excited to unveil an experimental release of our forthcoming tooling for OpenAPI Specification (OAS).

[Medusa](https://medusajs.com/) offers modular, adaptable, and user-friendly solutions to streamline digital commerce application development and create rich, unique customer experiences.

With Medusa, you can incrementally adopt commerce modules into your stack, extend core behavior or build entirely new functionalities to achieve your goals. With our new OAS and generative tools, you can effortlessly bundle OAS files, generate SDKs, and automate documentation specific to your Medusa setup’s distinct configuration and customizations.

This article explains how to use our new OAS tool in your Medusa backend to generate OAS files and TypeScript client types.

## Writing OAS in a codebase

The OpenAPI spec is a standardized way of documenting APIs. All Medusa’s REST endpoints are decorated using the [swagger-inline](https://github.com/readmeio/swagger-inline#standard-usage) library to document their behavior. These decorations allow us to generate OAS files, which we use to build our [Admin API](https://docs.medusajs.com/api/admin) and [Store API](https://docs.medusajs.com/api/store) reference documentation.

You can find examples of how our endpoints and data models are decorated in our codebase here.

*   [base OAS file](https://github.com/medusajs/medusa/blob/v1.8.0-rc.0/packages/medusa/oas/store.oas.base.yaml)
*   [path definition](https://github.com/medusajs/medusa/blob/v1.8.0-rc.0/packages/medusa/src/api/routes/store/regions/list-regions.ts#L10-L99)
*   [schema definition](https://github.com/medusajs/medusa/blob/v1.8.0-rc.0/packages/medusa/src/api/routes/store/regions/list-regions.ts)

With the new improvements, we enable you to leverage the same techniques to generate OAS for your Medusa customization and configuration. Additionally, we have made it possible to automate the generation of our Client SDKs to ensure consistency in all our tools.

## Generating an OAS file

To generate an OAS file for your Medusa project, install the `medusa-oas` CLI as a dev dependency in your Medusa backend:

```bash
yarn add --dev medusa-oas-cli
```

Then, generate an OAS file for the Medusa Store API:

```bash
yarn medusa-oas oas --type store --out-dir ./build/oas
```

You can also combine your swagger-inline OAS from your server source code with Medusa Store API OAS:

```bash
yarn medusa-oas oas --type store --out-dir ./build/oas --paths ./src
```

You can also customize other OAS sections that are not paths or schemas:

```bash
yarn medusa-oas oas --type store --out-dir ./build/oas --paths ./src --base ./src/oas/store.base.yaml
```

## Generate TypeScript client types

With comprehensive documentation of our APIs, we have also enabled generation of TypeScript client types to reduce runtime errors and improve consistency and developer experience. We generate all core Medusa types and release them through `@medusajs/client-types` for use in storefront implementations and custom applications. If you decorate your customizations, you can also leverage our new CLI to generate client types specific to your customizations.

Start by generating an OAS file for both the Admin API and the Store API:

```bash
yarn medusa-oas oas --type combined --out-dir ./build/oas
```

Then, generate client types:

```bash
yarn medusa-oas client --component types --src-file ./build/oas/combined.oas.json --out-dir ./types
```

## Future iterations

The current release of Medusa’s OAS tooling is experimental, and there may be changes in the CLI’s API. Here are some items we are exploring in future iterations:

### Introduce `medusa-oas docs` command

We plan to allow developers to generate rich API reference documentation similar to Medusa’s core documentation. Until then, we recommend using [SwaggerEditor](https://editor-next.swagger.io/) for viewing the generated OAS.

### Generate JS and React SDKs

We wish to deprecate our current JS and React client SDKs and replace them with fully generated equivalents. This would further allow developers to generate their own custom SDKs that match their server.

## Summary

We hope that by sharing our new OAS tooling early, we will be able to gather feedback from our community to better align our roadmap with what matter the most. We hope you’ll enjoy these and looking forward to the next iterations.


Announcing OpenAPI Spec Codegen Tool

Medusa is thrilled to announce the release of our new payment processor plugin interface. This update is another significant milestone in our mission to provide developers with modular building blocks that empower them to build rich, efficient, and customizable digital commerce applications without having to reinvent core commerce functionality.

## Simplified and Focused Interface

The new payment processor plugin interface has been deliberately designed with a reduced scope compared to its predecessor. This ensures that integrating new payment providers is now easier than ever, providing a simple yet powerful primitive in Medusa to capture and process payments seamlessly.

## Improved Adaptability and Customization

By addressing some of the limitations of the previous interface, which sometimes led to hacky implementations and difficult-to-debug issues, the new interface allows for better adaptability and customization. This flexibility aligns with Medusa's long-term vision of enabling developers to create bespoke digital commerce experiences efficiently.

## Effortless Payment Processing with the PaymentProviderService

The `PaymentProviderService` abstracts obtaining payments through different providers by following a few simple steps. This service is used for authorizing payments for carts, obtaining additional payments on orders through payment collections, and can also be used for custom flows where payment authorization is necessary.

## Compatibility with Leading Payment Providers

Our new interface is compatible with leading payment providers, including Stripe, PayPal, Klarna, Adyen, and more, further broadening the range of possibilities for your commerce application.

## Availability and Documentation

The new payment processor plugin interface is available starting with version 1.8. To learn more about the new interface and how to build plugins that implement it, please refer to [our documentation](https://docs.medusajs.com/modules/carts-and-checkout/backend/add-payment-provider).

## Embracing the Future of Digital Commerce

We are excited to see the unique experiences and plugins that developers will create using the simplified payment processor plugin interface v1.8. Try it out now by upgrading to the latest version of Medusa:

```bash
yarn add @medusajs/medusa@latest
```

Or start a new project:

```bash
yarn create medusa-app
```

Join us as we continue to innovate and empower developers to build the future of digital commerce.


Announcing Payment Processor

We're thrilled to announce one of the most requested features from the Medusa community - Product Categories! With this new addition to our Product module, you can create, nest, and rank categories and add products to multiple categories.

Our mission is to provide developers with the necessary tools to build rich commerce applications. To build these rich experiences, we need customer facing commerce APIs to be fast, so we’ve optimized Product Categories to deliver on that front. We've also taken the burden of managing complex tree structures that is needed to accomplish this off your hands, and instead provided a simple API for you to work with. This means you can focus on what really matters - creating wonderful experiences for your customers.

<video controls preload="none" style="object-fit: cover;" poster="/images/product-categories-video-cover.png">
<source src="/videos/product-categories.mp4" type="video/mp4" />
</video>

## Efficient Category Tree Structures

Dealing with tree structures in relational databases is complex. Stores often limit the depth of a menu or category tree because of the performance issues that can stem from having deep tree structures. We didn’t want to enforce nesting limits and focused on building a performant schema that could overcome the limitations of other categorization engines.

We evaluated quite a few different methods on building nested tree structures, built out our criteria, evaluated tradeoffs, circumvented and managed these tradeoffs and concluded with one - Materialized Path. We could write a whole article on this process, but thats for another day.

What we decided to prioritize were these scenarios:

*   How quickly can we build an entire tree / sub-tree of categories?
*   How quickly can we query products by category?
*   How quickly can we query products by a category tree or group of category trees?

We were able to pass these scenarios with great results! We setup an environment with 100 categories that were nested to a depth of 5. With the help of [k6.io](http://k6.io) performance toolkit, we bombarded our server with 400+ requests over 20 second stretches and benchmarked the results. These are the benchmarks for the category API that returns the entire tree of 100 records without caching:

```
avg=238ms
min=130ms
med=238ms
max=295ms
p(90)=245ms
p(95)=248ms
```

![](/images/HmgtmNHZAM.png)

## Simple & Performant Tree APIs

After implementing Materialized Path method to model Product Categories, our focus shifted towards designing performant  APIs to output this data.

### Categories

As tree structures, categories differ slightly from regular relational APIs, and this must be considered when building category-related experiences to optimize API queries. Be prepared to dust off your recursive programming skills, because you'll be needing that a bit.

Here are ways you can query the API:

*   ```
    GET /store/product-categories?parent_category_id=null&include_descendants_tree=true
    ```

*   ```
    GET /store/product-categories
    ```

*   ```
    GET /store/product-categories?q=jeans
    ```

*   ```
    GET /store/product-categories/pcat_testid
    ```

When querying the retrieve endpoint for product categories, the descendants are always returned. However, for the list endpoint, you must pass in `include_descendants_tree` to explicitly retrieve all descendants of each category. Keep in mind that this operation incurs a cost, as for every record in the collection, we perform an additional query to fetch its descendants. Therefore, it is a good idea to limit the scope to avoid calling it on a potentially large list.

### Products

To query products by category, pass category IDs as a parameter to the products API. We have added a pivot table between products and categories to categorize products. When category IDs are provided, we perform a simple join to return the results. For store APIs, we limit categories to only public and active ones.

Like with the categories API, you can include the `include_descendants_tree` parameter to search for not only the category you want but also its descendants. This will result in as many category queries as there are categories to fetch their descendants, but the join on products will remain singular.

## Craft Bespoke Experience with Categories

With the complexities of category structures out of the way, you can focus on building rich commerce experiences that delight customers.

Building out deep nested categories without a limit (while keeping performance) is something that most commerce platforms don’t offer. This means that you don’t have to bend to the limitations of the platform on the categorization front.  This strengthens our offering for large catalog stores, multi-brand stores, and, generally, stores that need deep and complex categorization. This also future-proofs your store's ability to handle these categorization needs as you scale.

Well-designed category structures can also help customers quickly find the products they're looking for. Categories are another layer of data for upselling and recommendation strategies.

You can unleash your creativity and design unique experiences around categories that set you apart from your competitors or help you achieve your business objectives. We’re excited to see what you build with it.

You can learn more about [Product Categories in our documentation](https://docs.medusajs.com/modules/products/categories).


Announcing Product Categories

Medusa is introducing a powerful new feature called **Transaction Orchestrator** (TO).

In a monolithic application with a single data source, managing transactions is an easy task using standard SQL transactions. However, Medusa is evolving its architecture to be more modular, allowing individual modules to run in isolation, potentially with their own data sources or even on separate servers.

This change in architecture brings new challenges for handling transactions, as one system can no longer control another's commit or rollback actions. That's where the Transaction Orchestrator (TO) steps in, offering an effective way to manage transactions within this increasingly complex environment.

Designed to enhance the control and management of transactions and workflows across multiple services or modules, the TO simplifies creating and executing distributed transactions. This allows developers to concentrate on feature implementation rather than dealing with the intricacies of managing complex distributed transactions. At Medusa, we build tools for developers to create rich commerce applications that scale, and adapting to these new challenges is a part of that mission.

## The Need for Improved Transaction and Workflow Management

The TO supervises transaction flows and guarantees that successful transactions are executed fully or entirely rolled back in case of failure. With clearly defined steps for Invoke and Compensate actions, the TO follows the separation of concerns principle, allowing developers improved control over transactions and workflows.

Distributed transactions are necessary for scenarios where a given workflow involves different modules for several reasons:

1.  **Data consistency:** In a distributed system, maintaining data consistency across different databases becomes challenging. A TO ensures that if any part of the transaction fails, all the previous steps are rolled back (compensated), keeping the data consistent across all involved databases.
2.  **Coordination:** Acting as a coordinator between different modules and their respective servers, the TO manages the order of execution and communication between modules, ensuring that each transaction step is executed correctly and at the right time.
3.  **Simplifying complex workflows:** In a distributed environment, transactions can become complex due to the need to coordinate between different services and databases. A TO simplifies this process by abstracting away the complexities of managing distributed transactions, allowing developers to focus on implementing the business logic.
4.  **Scalability:** As a system grows, managing transactions across multiple services becomes increasingly difficult. A TO helps with scalability by providing a robust framework for managing distributed transactions, making it easier to maintain and expand the system.

In the context of digital commerce, this is an important addition to Medusa’s toolbox for the following reasons:

*   **Composable architectures:** A transaction orchestrator supports composable architectures, allowing developers to easily combine and reuse modules as needed. This enables the creation of highly customizable commerce applications, tailored to specific business requirements.
*   **Adoption in legacy systems:** The TO can also facilitate the gradual transition of legacy systems to more modern, distributed architectures. This makes it easier for businesses to adopt and integrate new technologies without having to rebuild their entire infrastructure from scratch.
*   **Unlocking infrastructure technologies:** With a transaction orchestrator, developers can leverage advanced infrastructure technologies, such as serverless and edge computing. This can lead to improved performance, reduced latency, and increased reliability for commerce applications, resulting in better user experiences and higher customer satisfaction.

Here's an example of how a transaction orchestrator would help in a distributed system involving three modules:

```
Module A creates an order (Server 1, Database 1)
Module B manages inventory (Server 2, Database 2)
Module C handles payments (Server 3, Database 3)

A typical transaction flow would be:

1. Create order in Module A
2. Deduct inventory in Module B
3. Process payment in Module C
```

With a TO, you can define the steps in the transaction and specify compensation actions for each step. If any step fails, the orchestrator will automatically execute the corresponding compensation actions to revert previous steps, ensuring data consistency across services.

In this example, if the payment processing in Module C fails, the TO would trigger compensation actions to add back the deducted inventory in Module B and remove the created order in Module A, preventing data inconsistency.

## Achieving Cleaner Code with the Transaction Orchestrator

Utilizing a transaction orchestrator results in cleaner code and single-responsibility functions compared to manually managing distributed transactions. This is due to several factors:

1.  **Abstraction:** A TO abstracts the complexity of managing distributed transactions by providing a standardized framework for defining transaction steps, their corresponding compensation actions, and the flow of execution. This allows developers to focus on implementing the core business logic of each step rather than managing the complexities of distributed transactions.
2.  **Separation of concerns:** By clearly delineating the responsibilities of each function, the TO enforces the separation of concerns. Each function is responsible for either the "Invoke" (execution) or "Compensate" (rollback) action, ensuring they perform a single, specific task. This makes the code more readable, maintainable, and testable.
3.  **Modularity:** By using a TO, the code becomes more modular as each step in the transaction is encapsulated within its own function. This allows developers to easily modify, add, or remove transaction steps without affecting the overall structure of the transaction.
4.  **Error Handling:** When handling distributed transactions manually, the code can become convoluted due to intricate error handling logic. The TO simplifies this by automatically managing errors and retries, allowing developers to create cleaner code without the need to address error handling for each step.
5.  **Reusability:** The TO allows you to define reusable functions for both the "Invoke" and "Compensate" actions, which can be easily reused across different transaction scenarios. This reduces code duplication and ensures that changes to a specific action only need to be made in one place.

Here is an example used in the [Multi-Warehouse Project](https://docs.medusajs.com/modules/multiwarehouse/overview) that coordinates the flow to create a product variant, creating an inventory item and finally linking both together.

Here is definition of the flow:

```ts
const createVariantFlow: TransactionStepsDefinition = {
    next: {
        action: "createVariantStep",
        saveResponse: true,
        next: {
            action: "createInventoryItemStep",
            saveResponse: true,
            next: {
                action: "attachInventoryItemStep",
                noCompensation: true,
            },
        },
    },
}
```

The actions are handled by a single function called by the TO respecting the Transaction Definition above.
Note that the implementation of each function was omitted to keep the example short; however, their names are self-explanatory.

```ts
async function transactionHandler(
    actionId: string,
    type: TransactionHandlerType,
    payload: TransactionPayload
) {
    const command = {
        createVariantStep: {
            invoke: async (data: CreateProductVariantInput) => {
                return await createProductVariant(data) // omitted
            },
            compensate: async (data: CreateProductVariantInput, { invoke }) => {
                await removeProductVariant(invoke.createVariantStep) // omitted
            },
        },
        createInventoryItemStep: {
            invoke: async (data: CreateProductVariantInput, { invoke }) => {
                return await createInventoryItem(invoke.createVariantStep) // omitted
            },
            compensate: async (data: CreateProductVariantInput, { invoke }) => {
                await removeInventoryItem(invoke.createInventoryItemStep) // omitted
            },
        },
        attachInventoryItemStep: {
            invoke: async (data: CreateProductVariantInput, { invoke }) => {
                return await attachInventoryItem( // omitted
                    invoke.createVariantStep,
                    invoke.createInventoryItemStep
                )
            },
        },
    }

    return command[actionId][type](payload.data, payload.context)
}

```

Finally, the TO is instantiated and a new transaction initialized.

```ts
const strategy = new TransactionOrchestrator(
    "create-variant-with-inventory", // transaction name
    createVariantFlow // transaction steps definition
)

const transaction = await strategy.beginTransaction(
    ulid(), // unique id
    transactionHandler, // handler
    createProductVariantInput // input
)
await strategy.resume(transaction)
```

Here is an animated diagram of the transaction described above:

![](/images/TO.gif)

This marks just the beginning of Transaction Orchestration in Medusa. In the near future, we'll introduce numerous other flows that function similarly, enabling you to customize and expand existing workflows with your unique steps.

## Handling Complex Workflows with the Transaction Orchestrator

The Transaction Orchestrator enables developers to create complex workflows for synchronous and long-running tasks that may take a while to receive a response (asynchronous). These workflows can be organized in a way that may not necessarily be transactional but can still be effectively orchestrated.

There are several scenarios where asynchronous workflows with long-running steps can be applied using the TO:

1.  **E-commerce order fulfillment:** In an e-commerce system, a workflow might involve creating an order, reserving inventory, charging the customer, generating shipping labels, and updating the shipping status. Some of these steps, such as generating shipping labels or charging the customer, could take a considerable amount of time due to external dependencies like payment gateways and shipping services.
2.  **Fraud detection and prevention:** In an e-commerce system, fraud detection and prevention workflows might involve analyzing customer data, order patterns, and payment information to identify potential fraudulent activities. These workflows may include time-consuming tasks like querying external fraud detection APIs or applying machine learning models to analyze data.
3.  **Returns and refunds processing:** In an e-commerce returns and refunds workflow, several steps may involve long-running tasks, such as receiving returned products, inspecting their condition, updating inventory, and processing refunds. Some of these steps may take a considerable amount of time, especially when dealing with external payment gateways or waiting for products to be returned and inspected.

In all these examples, workflows are valuable for handling intricate, multi-step processes that include tasks taking considerable time or involving external dependencies without immediate responses. By leveraging the Transaction Orchestrator, developers can proficiently manage these workflows, ensuring proper execution order and handling errors and compensations as needed.

## What’s Next

The Transaction Orchestrator in Medusa enhances control over transactions and workflows in complex, multi-service scenarios. As Medusa's architecture becomes more modular, many flows will be refactored to leverage the Orchestrator. This allows developers to focus on business logic while the Orchestrator handles consistency and infrastructure concerns. In the future, support for asynchronous tasks will be added, enabling the handling of long-running tasks or non-REST API approaches, making Medusa even more adaptable and developer-friendly.


Announcing Transaction Orchestrator

Best Practices for Ecommerce Checkout Design for your Business

Optimizing your ecommerce checkout process is crucial to reduce cart abandonment rates, as it affects customer satisfaction and the likelihood of returns. If the checkout process is not smooth and simple, the customers may [abandon their carts](https://medusajs.com/blog/ecommerce-cart-functionality/) without making a purchase and may not return to your ecommerce.

This article shares the best practices for optimizing your checkout process and boosting your sales.

*What is Medusa?* [*Medusa*](https://medusajs.com/) *is a set of open source commerce modules that gives developers and businesses the flexibility to build sophisticated and unique digital experiences. One of Medusa’s building blocks include a *[*Next.js storefront*](https://docs.medusajs.com/starters/nextjs-medusa-starter)* that implements all the checkout best practices mentioned in this article.*

## 10 Ecommerce Checkout Best Practices

### Don’t Force Customers to Create an Account

Forcing customers to register means you are creating an obstacle for customers who want to buy, ultimately increasing abandoning carts. Therefore, offering a guest checkout option helps you to increase the chances of a sale.

Allow guests to checkout and complete their purchases with an email address to make the checkout experience more effortless.

In addition, you can allow customers to log in using their social media accounts, including Facebook or Google, to simplify the checkout process and eliminate the need for registering and entering personal information.

Alternatively, let the customer have the option to create an account by adding a checkbox that prompts them to choose whether they want to create an account. When customers select this option, a password field should appear, allowing customers to set a password. This way, the customer must only fill in an extra field for the password.

**Don't**

*   Force customers to create accounts to fill their carts or to complete the checkout process.

**Do**

*   Allow customers to checkout as guests.
*   Make creating an account simple by enabling social login and by one-click creating an account.

### Ask Only for Necessary Information and Enable Auto Fill

Avoid annoying the customer with extra steps and information, as this may make their shopping experience time-consuming and uncomfortable.

To ease the checkout process, keep the forms concise by requesting only essential information about the customer. Eliminate any unnecessary steps and clearly describe why certain information is required. For example, avoid asking for non-essential details, including Address 2, birthday, gender, or company name. Add a single field for the full name instead of separate fields for first and last name.

![](/images/7nRhTYuYHH.gif)

*Clarify why this field required on* [*Amazon*](https://www.amazon.com/)

In addition, make sure to enable Autocomplete Attribute for input elements. This helps speed the process up by making billing and shipping addresses auto-fill as soon as the customer starts typing. Most browsers like Firefox, Google Chrome, and Safari support this feature.

Furthermore, offer a checkbox to enable customers to use the billing address as the shipping address, simplifying the form-filling process and making it more efficient. You can automatically populate the form with email, shipping, and billing address information if the customer is logged in. However, allow customers to change this information if needed to streamline the process.

![](/images/PzHeKEqUVG.gif)

*Checkout on* [*Palmes*](https://medusajs.com/blog/palmes/)

**Don’t**

*   Ask for unnecessary information, including age, gender, company name, and more.
*   Make the form too long to fill.

**Do**

*   Enable auto-fill for all checkout form input fields.
*   Let the user use the same address for shipping and billing. If the customer logs in, fill in the payment and address information form account information.

### Offer Multiple Payment Methods

Support multiple [payment](https://medusajs.com/blog/stripe-ecommerce/) options when purchasing online, especially for ecommerce that supports global shipping. This ensures a seamless payment experience for the customer.

Provide a variety of payment methods that customers in different locations can use, and set the most popular methods first. That allows customers to pay with the preferred payment method that suits them and helps you to increase your credibility.

Most customers prefer to use common credit or debit cards from Visa or Mastercard, but many alternatives have emerged in the last few years. You should consider including payment options such as Apple Pay and Google Pay.

**Don’t:**

*   Limit payment options on your ecommerce.
*   Use uncommon payment methods that confuse the customer.

**Do:**

*   Provide a variety of payment methods.
*   Consider Mobile payments and e-bank transfers, not only cards.

![](/images/8zW_MJ7mjR.png)

*Payment Method on* [*Tekla*](https://medusajs.com/blog/tekla/)

### Use Descriptive Form Labels

Form Labels are an essential part of accessibility. Good labeling can guide the customers to add the correct information.

Keep labels short and descriptive, telling the customer what the input fields mean and that the form is easy to read and scan. For example, instead of using “Where do you live?” or “Where would you like to receive the package?” use the label “Address”. Customers will recognize what information they should add.

Don't use the placeholder as a label because the placeholder disappears when the customer starts typing. Still, the label or the floating placeholder remains visible after the field has been filled in. That helps customers remember what exactly the purpose of the field is.

You can use the placeholder with the label as a description or example of the required information for the field.

![](/images/QJXfJJUIoQ.png)

*Pincode placeholder on* [*Amazon India*](https://www.amazon.in/)

Place the label above an input field so the customer is not forced to look separately at the label and the input field, which results in a quick and easy completion time. Make the label font clear and bold.

![](/images/XgWkSODOVU.png)

*Checkout Form on* [*Tekla*](https://medusajs.com/blog/tekla/)

**Don't:**

*   Use long-form labels.
*   Use a placeholder as a label.

**Do:**

*   Use the placeholder as a description for the input information.
*   Place the label above of input fields.

### Highlight Required Fields and Use Clear Validation Messages

Form validation ensures the customer’s data entered into a form meets the requirements and serves as a communication point during checkout.

To save your customer time and prevent errors, highlight the required fields and provide clear instructions on what they need to pay attention to while completing the process. If a customer enters incorrect information in a field, provide concise and informative validation messages to guide them on fixing the error and moving forward quickly in the checkout process.

Place the validation message near the field with the error to draw the customers' attention and avoid the need to search for the field.

It’s also important to notify customers of any invalid or missing input fields in real time before proceeding to the checkout process's next step. This way, customers can address any issues without retracing previous steps later.

![](/images/ZcWLCvopDb.gif)

*Checkout Form on* [*Tekla*](https://medusajs.com/blog/tekla/)

**Don’t:**

*   Add broad messages such as “there’s something wrong” when there is an error or invalid data.
*   Use long validation messages.

**Do:**

*   Highlight the required fields.
*   Make validation messages specific, concise, and informative. And use field validation in real time.

### **Make The Checkout Page Mobile Friendly**

With the growing number of people using [mobile phones](https://medusajs.com/blog/why-headless-commerce-is-the-perfect-solution-for-omnichannel-support/) for online purchases, it’s essential to create a seamless mobile experience and optimize your checkout process for the success of your ecommerce business.

On smaller devices, use wide checkout buttons and large fonts to minimize this risk and help customers to complete a purchase smoothly without any obstacles. Also, avoid placing two or more fields in a single row. Instead, use individual rows with labels for each field; this ensures a smooth sequential transition through the checkout process.

![](/images/tywqLtj00p.gif)

*Checkout Form on* [*Tekla*](https://medusajs.com/blog/tekla/)

**Don’t:**

*   Place more than one field in a row.
*   Keep the buttons and fields small.

**Do:**

*   Make the form fields vertical and use wide buttons on small devices.
*   Put one field in a single row, a maximum of two fields for short inputs.

### Highlight Security and Privacy

The more secure your ecommerce is, the more trust and credibility you establish with your customers. They can confidently purchase through your ecommerce with their sensitive payment information, billing, shipping, and personal information.

Show the payment methods with the original payment gateways logo, such as Visa, MasterCard, and PayPal, to offer customers a transparent and secure experience.

To further earn customer trust, display security certifications or trust seals like Norton and Better Business Bureau at the checkout screen, showcasing your ecommerce protection. Adding Extended Validation Certificate (EV) can help your customers to comprehend your ecommerce verification and display a green assurance bar with your ecommerce name.

Having an SSL certificate with HTTPS also reassures customers and motivates them to move forward in the checkout process.

**Don’t:**

*   Let the checkout process without security options.

**Do:**

*   Use original payment gateway logos, including Visa, MasterCard, and PayPal.
*   Use certifications or trust seals like Norton and Better Business Bureau.
*   Add SSL certificate with HTTPS.

### **Show Checkout Progress Bar**

When customers don’t know how long the checkout process will take, they might abandon their checkout process. Prevent this by adding a progress indicator that allows them to track their progress and know where they are in the checkout process. It guides and shows the customer what to do during the checkout process.

Make the progress indicators with the fewest steps to show the customers how quick checkout will be. The design should be clear, with each status indicated by a different color.

Add a descriptive label for each step instead of just displaying a number. For example, Step 1-Personal Details, Step 2- Shipping Details, and Step 3- Payment Details. This informs customers what they need to complete the purchase.

Offer customers a back option if they need to edit their address or make any other changes. Also, always save the progress if the customer wants to exit and return later.

![](/images/fOB375jw_T.gif)

*Checkout Indicator on* [*Tekla*](https://medusajs.com/blog/tekla/)

**Don’t:**

*   Make the process too long.
*   Reset the information in case the customer is back.

**Do:**

*   Make the indicators in as few steps as possible.
*   Make the steps clear visually and add a descriptive label for each step.

### **Improve Website Performance**

Improving site performance is important for any ecommerce website. Poor performance, including crashes and slow loading times, can lead customers to abandon the checkout process. Therefore, good performance can encourage the customer to complete the process and lead to increase conversions and sales.

Make sure to use a hosting service that fits your ecommerce and customer traffic. Avoid shared hosting and opt for VPS or cloud hosting, which allows you to scale performance according to your needs.

Test your ecommerce with tools like [Pagespeed](https://pagespeed.web.dev/) Insights and [GTmetrix](https://gtmetrix.com/) to evaluate your ecommerce and identify areas for improvement.

Website speed is impacted by the number of files the browser has to request to load a website, causing delays in loading time. To speed up your website, reduce the number of HTTP requests by removing unnecessary elements, features, and plugins, minifying code, compressing assets and utilizing Lazy Loading. Lazy Loading allows the browser to upload assets while customers are scrolling, sending requests only for the visible portion of the page, which speeds up the initial loading time.

**Don’t:**

*   Don’t send too many HTTP requests.

**Do:**

*   Test your website with performance testing tools to discover improvement areas.
*   Use lazy loading.

### Add Upsell and Cross-Sell

Upselling and cross-selling strategies increase customer satisfaction and result in additional purchases, making them an easy win for increasing sales. Upselling involves encouraging customers to purchase higher-end or premium versions of the products that the customer selects. And coss-selling encourages customers to purchase related or complementary products to the ones selected by the customer.
Offer product bundling to make the customer buy more products with fewer steps, and offer a special price or discount on the total amount of product bundling, making them feel like they have received a good deal. However, it’s important to only suggest relevant products based on the customer's browsing history or car content. Avoid suggesting products the customer doesn’t need, as you could lose credibility.

**Don’t:**

*   Offer product bundling with products not relevant to each other.
*   Show products that customers are not interested in.

**Do:**

*   Offer product bundling.
*   Offer a special price or discount for product bundling.

## Conclusion

A well-designed checkout process is one of the most critical aspects of success in your ecommerce. This process determines whether potential customers become loyal or abandon their carts.

Optimizing the checkout process covers several elements, but it mainly involves ensuring customers can complete the process quickly and easily with a few steps. It’s important to ensure that the checkout process is enjoyable for the customer, without any boredom and difficulties that could discourage them from buying.

Developers can utilize Medusa to build a checkout experience tailored towards their users. There are no limitations in how they build it or what tech stack they use. You can learn more about Medusa and what it offers in [its documentation](https://docs.medusajs.com/).


Nuxt-Medusa Module: Integrate Medusa with your Nuxt.js application


<callout icon="exclamationCircleSolid" button-label="Go to Docs" button-url="http://docs.medusajs.com">
**Notice**
Medusa is under active development, so the content of this post may be outdated. Please check out our documentation instead.
</callout>

Great news for Nuxt fans. [Jakub Andrzejewski](https://twitter.com/jacobandrewsky) recently created a new `nuxt-medusa` module, that simplifies the process of integrating Medusa’s commerce modules with a Nuxt application.

[Access the module here](https://github.com/baroshem/nuxt-medusa), including a tutorial, documentation, video, and release notes. You can also try it directly in your browser using the [module sandbox on Stackblitz](https://stackblitz.com/github/baroshem/nuxt-medusa?file=.stackblitz%2Fnuxt.config.ts).

<iframe width="560" height="315" src="https://www.youtube.com/embed/EuakPz8M7CM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

> **What is Medusa?** [Medusa](https://medusajs.com/) provides modular and open commerce infrastructure built to make custom-development processes easier for developers. Medusa’s components and APIs are built in abstract layers, making it easy for developers to customize the core functionalities for different commerce cases.

## Technical aspects

The Nuxt-Medusa module is built on top of Nuxt.js, a popular framework for building server-side rendered Vue.js applications. It is designed to work seamlessly with Medusa.

The module uses [@medusa/medusa-js](https://www.npmjs.com/package/@medusajs/medusa-js) under the hood to query the Medusa API and retrieve data, which is then exposed to the Nuxt.js application.

## Features

Setting up the Nuxt-Medusa module is a relatively [straightforward process](https://nuxt-medusa.vercel.app/getting-started/setup). The module is relatively new, but it includes short and concise documentation that provides step-by-step guidance on configuring and using its two available features.

*   [**useMedusaClient**](https://nuxt-medusa.vercel.app/features/usemedusaclient) **composable**.
*   [**serverMedusaClient**](https://nuxt-medusa.vercel.app/features/servermedusaclient#servermedusaclient) **utility.**

At this moment, there aren’t more features available, but the module maintainer [opened an issue ](https://github.com/Baroshem/nuxt-medusa/issues/13)on the GitHub repository, so other users can ask for new features.

## Why use it

*   It simplifies the process of integrating the Medusa engine with a Nuxt.js application. This can save you significant time and effort, as they no longer need to manually configure and integrate the two frameworks.
*   It’s the first module in the Nuxt 3 version that specifically targets digital commerce functionality. This opens the door for developers interested in building commerce applications using Nuxt.js, providing a streamlined and efficient way to integrate Medusa with their Nuxt.js applications.

## How to Install the Module

Install the module in your Nuxt.js project:

```
npm install --save-dev nuxt-medusa
```

Then, add `nuxt-medusa` to the `modules` section of `nuxt.config.ts`:

```
export default defineNuxtConfig({
  modules: ['nuxt-medusa'],
})
```

Finally, in your `.env` file add a `MEDUSA_URL` variable with its value being the URL of the server:

```
MEDUSA_URL=<YOUR_MEDUSA_URL> # By default http://localhost:9000
```

## How to Use the Module

You can fetch data from Medusa in Nuxt like this:

```
<script setup lang="ts">
  const client = useMedusaClient();
  const { products } = await client.products.list();
</script>
```

And you will get the data about your products. It’s that simple!

This approach certainly works in case of fetching products’ data on the client (browser). However, in some cases you may want to fetch this data on the server side of Nuxt (for example, to reduce network latency of customers visiting your website). You can do this with the module as well!

To fetch the data on the server side, let’s first enable this functionality by setting the `server` option in the configuration to `true`:

```
export default defineNuxtConfig({
  modules: ['nuxt-medusa'],
  medusa: {
    server: true
  }
})
```

This will enable the server utility to be imported in your project and you can use it like following:

```
import { serverMedusaClient } from '#medusa/server'

export default eventHandler(async (event) => {
  const client = serverMedusaClient(event)
  const { products } = await client.products.list()

  return { products }
})
```

As you can see, the approach here is almost the same as in the client, with the only difference that we are using the event Handlers of Nuxt to handle this functionality on the server.

Finally, we can call this event handler from the frontend like the following:

```
<script lang="ts" setup>
  const { products } = await $fetch('/api/products')
</script>
```

And that’s it! You can now fetch the products on the server. Keep in mind that you are not limited to products only, as you can fetch basically whatever you like as you have access to the Medusa client.

Happy coding!

## Want to contribute to the Medusa Community?

If you are also interested in building a community plugin for Medusa and showcasing it to the broader [Medusa](https://medusajs.com/) community, do not hesitate to contact nick@medusajs.com.

We appreciate the contributions.


Nuxt-Medusa Module: Integrate Medusa with your Nuxt application

Pros and Cons of using Node.js for Ecommerce


<callout icon="exclamationCircleSolid" button-label="Go to Docs" button-url="http://docs.medusajs.com">
**Notice**
Medusa is under active development, so the content of this post may be outdated. Please check out our documentation instead.
</callout>

[Node.js](https://nodejs.org/en/about/) is a JavaScript runtime environment which developers use to build scalable network applications. You can use it in various software, including ecommerce platforms.

To deliver high performance and speed for ecommerce applications, Node.js is one of the best choices. It provides features like an event-driven, non-blocking I/O model. It also provides an extensive ecosystem of third-party modules and packages.  With Node.js, it is much easier to build applications.

This article highlights the pros and cons of using Node.js in ecommerce. It’ll guide developers to make informed decisions about whether to use Node.js for ecommerce solutions or not.

## What is Node.js?

[Node.js](https://medusajs.com/blog/nodejs-ecommerce-backend/) is an open source, cross-platform JavaScript runtime environment. It is built on a V8 engine and is known for its speed and performance. Node.js enables JavaScript development on the server side.

The traditional client-side JavaScript is executed within a web browser. However, Node.js runs JavaScript code outside of a web browser, allowing it to be used for server-side development.

Node.js has a non-blocking I/O model; it can handle multiple requests simultaneously without blocking the execution of other code. It differs from conventional server-side technologies, which typically operate on a threaded model where individual threads manage each request.

Node.js is a flexible tool used for building a vast number of projects, including the following:

*   Web servers: Using Node.js as a web server guarantees speed and flexibility.
*   Web applications: Node.js is a great choice for building real-time web applications. It is especially important for applications that require fast and scalable server-side logic.
*   Chatbots: Creating bots that interact and respond to users' requests is possible with Node.js.
*   Command-Line Tools: Node.js can help build command-line tools to automate repetitive tasks.

![](/images/At6G8XPqol.jpg)

As seen in the image above, Node.js is the most popular web technology according to [StackOverflow](https://survey.stackoverflow.co/2022/#section-most-popular-technologies-web-frameworks-and-technologies). It's a suitable choice for ecommerce as resources and relevant information to learn and use this language are readily available.

## 5 Pros of Using Node.js for Ecommerce

There are many advantages of using Node.js for ecommerce. This section outlines some of the advantages in detail.

### 1. Speed and Performance

Owing to the V8 engine it is built on, Node.js is known for its speed. The V8 engine compiles JavaScript code into machine code, allowing it to run faster than interpreted languages.

Additionally, Node.js can handle multiple concurrent requests due to its event-driven, non-blocking I/O model. Therefore, even under high-traffic conditions, Node.js can deliver quick response times, making it a viable choice for ecommerce applications.

### 2. Scalability

An advantage of web applications is the ability to automatically scale up or down depending on incoming traffic. This is true for ecommerce applications that deal with growing numbers of users and transactions. It is therefore essential to utilize Node.js in building ecommerce applications.

Node.js is scalable due to its single-threaded event-loop, non-blocking I/O model, and modular design. Adding more servers, distributing the workload among them, and increasing each server's resources allows the system to scale.

This means that you can add more resources to a single Node.js server to increase its capacity or you can add more servers to handle an increasing amount of traffic.

### 3. Large Community

Node.js has an extensive community of developers willing to provide support, resources, and tools. You can utilize these to build ecommerce applications. With a growing library of packages and modules, Node.js offers developers the resources to create efficient and reliable ecommerce applications.

It's easier to find solutions to problems and stay updated when information is more accessible and easy to learn.

The following are avenues to join various Node.js communities:

*   [Twitter](https://twitter.com/nodejs)
*   [Slack](https://www.nodeslackers.com/)

### 4. Modular Approach

Ecommerce applications handle large amounts of data, and managing this data becomes increasingly difficult over time. However, Node.js developers use a modular approach to develop these applications.

Node.js supports a modular approach to development that allows you to break down code into manageable and functional blocks. It makes building, maintaining, and testing code easier.

### 5. Integration with Other Technologies

Node.js is compatible with various technologies. You can integrate Node.js with technologies ranging from frontend frameworks to databases and other programming languages.

With this advantage, it becomes easier to build ecommerce applications that integrate with other systems and services critical to business. Some of these services may include payment services, third-party systems, etc.

Node.js offers some critical advantages for ecommerce applications. You can create robust, efficient, and scalable ecommerce applications that meet your business and customers' needs by leveraging Node.js's advantages.

## 3 Cons of Using Node.js for Ecommerce

While Node.js has a lot of pros for developing ecommerce applications, there are also some cons. When developing an application with Nodejs, developers should carefully consider the tradeoffs and prepare to address these cons. Some of them are outlined below.

### 1. Limited Library Support

As of 2022, the official repo for Node.js packages (NPM) contains over 1.5 million packages, indicating that there is an extensive library of packages available for Node.js. However, not all of these packages are relevant or suitable for ecommerce applications.

Some critical functionalities required for ecommerce applications may have limited support or only a few packages available. Inventory management, order processing, and payment gateway integration are essential for ecommerce applications but may have limited support in Node.js libraries.

Developers can write code from scratch to implement these features. However, it could take a long time and restrict the number of features included in the application. Therefore, it's important to carefully evaluate the availability and quality of packages when building an ecommerce application using Node.js.

### 2. Callback Hell

When there are deeply-nested callbacks inside a function, it's referred to as "Callback Hell". Node.js suffers from callback hell because it heavily relies on asynchronous programming. Callbacks are the primary way to handle asynchronous operations in Node.js.

Multiple asynchronous operations are nested inside one another. The code can become deeply nested and difficult to read and maintain leading to callback hell.

### 3. Single-Threaded Model

The Node.js single-threaded model means that all code runs on one thread making it efficient for handling I/O tasks. However, it can create issues with functions requiring significant processing power or I/O operations that can block other tasks.

Node.js runs on a single thread; hence any long-running operation can block this thread. This will prevent other requests from being processed. It can lead to slower response times and a degraded user experience.

In ecommerce applications, it is essential to have a scalable and responsive platform. This is important because it can handle a high volume of requests without causing performance issues.

## 5 Best Practices for Building an Ecommerce Platform with Node.js

The following are practical tips and recommendations for building scalable and secure ecommerce platforms using Node.js.

### 1. Choose a Reliable Node.js Ecommerce Engine

An ecommerce engine is a software solution that provides the core functionality for building an ecommerce application. It handles product catalogue management, order processing, payment processing, and customer management. It typically consists of APIs, data models, and user interfaces that developers can use to develop custom ecommerce applications.

Using a dependable ecommerce engine can help developers save time and energy in creating essential ecommerce features. It lets them concentrate on developing distinct capabilities and adaptations for their requirements.

One option to consider is [Medusa](https://docs.medusajs.com/usage/create-medusa-app). Medusa is a set of open source commerce building blocks that allows you to build bespoke commerce applications without using cumbersome commerce platforms. Medusa is built on Node.js and can be deployed on modern infrastructure like serverless or edge workers.

### 2. Consider a Modular Approach

Modules are supported by Node.js. It would be best if you used modules while building ecommerce applications. In addition, modules simplify the process of debugging code in development. If one module has an error, it won't break the entire code, as each module contains its functions.

Modular development allows developers to work on different application parts concurrently. It improves productivity and reduces development time. It also makes it easier to maintain and update the application since you can change individual modules without affecting the rest.

To implement a modular approach, developers can use techniques such as dependency injection and module bundlers like Webpack. They can also use pre-existing libraries and frameworks that support modular design, like Nest.js and Express.js.

To implement the modular architecture, follow the steps below:

1.  Identify all the application's core features, e.g. user management, cart management, order management, etc.
2.  Break down the modules into smaller independent modules where each performs a specific task. This will make it easier to test and debug.
3.  Define clear interfaces between modules so that when you make changes to one module, they do not affect the other.
4.  Utilize a package manager such as [npm](https://www.npmjs.com/about) to manage modules and their dependencies.

### 3. Integrations

When building an ecommerce platform with Node.js, leveraging modern technologies for integrations is essential. This ensures seamless connections with other applications and services.

One way to achieve this is by using APIs (Application Programming Interfaces), which allow different systems to communicate with each other. APIs can help to integrate various services and features into the ecommerce platform. These platforms include payment gateways, shipping providers, customer relationship management (CRM) systems, and more.

Another approach is to use [webhooks](https://medusajs.com/blog/medusa-webhooks-best-technical-project-of-medusa-hackathon/), which allow automatic notifications and updates to be sent from one system to another. For example, when placing an order on the ecommerce platform, a webhook can trigger an update to the shipping provider. This notifies them to fulfil the order.

Some examples of popular webhooks include:

1.  Stripe: Payment and subscription events
2.  Twilio: SMS and call events

By utilizing modern integration technologies, ecommerce platforms can provide a better experience for customers.

### 4. Frontend Development

The frontend of an ecommerce application is what the user interacts with directly. It includes the design, layout, and functionality of the website or web application. Utilizing modern frontend technologies can improve the user experience and increase customer engagement.

One popular modern technology for frontend development is the [Jamstack architecture](https://jamstack.org/what-is-jamstack/). Jamstack stands for JavaScript, APIs, and Markup. It is a modern web development approach that emphasizes pre-built markup, serverless functions, and client-side JavaScript. This approach helps to create fast and secure websites.

In addition to providing speed, security, and stability, Jamstack sites use static site generators. This loads quickly and are more secure than traditional server-side rendering methods. It is significant for ecommerce sites, where speed and security can impact sales and customer trust.

Jamstack technology enables third-party service integration, such as payment gateways or shipping providers, through webhooks and APIs.

Some other popular frontend technologies for ecommerce applications include:

*   [React](https://medusajs.com/blog/5-react-based-tools-for-ecommerce-stack/): A JavaScript library used to create user interfaces. It is well-known for its flexibility and ability to reuse components.
*   Angular: A framework for building web applications known for its robustness.
*   Vue.js: A progressive JavaScript framework for building user interfaces known for its simplicity and flexibility.
*   [Next.js](https://medusajs.com/blog/nextjs-ecommerce-storefront-comes-packed-with-ready-integrations-to-paypal-meilisearch-stripe-and-more/): A framework for building server-side rendered React applications, known for its performance and SEO benefits.

Today's ecommerce landscape requires optimizing websites for mobile devices, implementing responsive design, and utilizing the technologies mentioned earlier. It is because more and more users are shopping on their mobile devices.

### 5. Implement Security Measures

Implementing security measures on an ecommerce platform is crucial to protecting sensitive information. Such information includes customer data, payment information, etc. With proper security measures, your ecommerce platform can become protected from various security threats, such as hacking, phishing, and other cyberattacks.

By implementing proper security measures, you can help ensure that your ecommerce platform is secure and protected from these threats. It will help build trust with your customers and protect their sensitive information. This is crucial for the success of any ecommerce business.

Here are some best practices for enhancing security:

1.  Secure the Server: Configure the server correctly, and make sure all security patches are current. Implement firewalls and intrusion detection/prevention systems to protect against unauthorized access.
2.  Use HTTPS: The protocol encrypts data transmissions between the server and the client. It helps protect sensitive information such as login credentials and payment information.
3.  Implement User Login and Permission Controls: This ensures that only authorized users can access the platform. It can include strong passwords and role-based access controls.
4.  Cross-Site Scripting (XSS) and Injection: Implement measures to prevent these attacks, which could put customer data at risk. It can involve verifying input, using prepared statements, and encoding output.
5.  Regularly Update Software and Plugins: Keep all software and plugins up to date with the latest security patches and updates.
6.  Conduct Regular Security Audits and Testing: Regularly conduct security audits and tests to identify potential weaknesses and areas for improvement. It can include penetration testing, and code reviews.

By implementing these security measures, ecommerce platforms built with Node.js can better protect sensitive customer data and maintain customer trust.

## Medusa and Node.js

Node.js offers a versatile and efficient platform for building fast, scalable, and secure ecommerce applications. Node.js has its downsides, such as limited library support, callback hell, and difficulty with concurrent processing. However, it remains a popular choice among developers. This is due to its speed, performance, and large community.

Medusa is already the leading commerce infrastructure for Node.js developers on GitHub. It provides a set of commerce modules built to make custom-development processes easier for developers. It provides core commerce functionality related to order and customer handling, product management, along with many other features such as multi-currency multi-channel support. You can read more about Medusa’s offering the [Docs](https://docs.medusajs.com/).


Ecommerce has evolved a lot since its start. It hasn’t always been well-designed stores with extensive features and carefully-planned user experiences. A lot of what is fundamental and basic today was revolutionary when discovered at its time.

This article goes down the memory lane of ecommerce, uncovering some old-but-gold ecommerce websites, and highlighting the main difference from ecommerce today.

## 1979: Michael Aldrich's First Attempt at Ecommerce

![](/images/rot_j_ksu4.gif)

In 1979, [Michael Aldrich](https://www.aldricharchive.co.uk/) invented online shopping through televisions. This was way before the inventions of the Internet and the World Wide Web (WWW). He invented it by connecting a modified domestic TV to a transaction processing computer through a domestic telephone line.

Michael Aldrich believed that [Videotex](https://en.wikipedia.org/wiki/Videotex) was a revolutionary communication medium that was universally applicable and participative, and the first of its kind since the invention of the telephone.

Following his invention, [two businesses used Michael’s invention](https://www.aldricharchive.co.uk/internet-online-shopping): Gateshead SIS with Tesco and Bradford Centrepoint with Wm. Morrison. This allowed consumers to [open their TV and choose groceries](https://www.bbc.com/news/magazine-24091393) from a local supermarket. The order would then be sent through the phone line to a local Tesco, where the ordered items would be packaged and sent to the consumer.

## 1984: CompuServe’s Electronic Mall

![](/images/JY4yU_yI-u.png)

[*Image Source*](https://www.youtube.com/watch?v=k-oBJml1mL0)

CompuServe was one of the first businesses getting close to an ecommerce experience. It was a popular networking service that provided users with emails, message boards, and more.

In 1984, CompuServe added a service called “Electronic Mall” that allowed users to buy items [from over 100 online retailers](https://money.howstuffworks.com/history-e-commerce.htm) through a simple CLI interface where customers could browse different vendors, product categories and even insert credit information for later purchases.

You can see a demo of it all [here](https://www.youtube.com/watch?v=k-oBJml1mL0).

## 1992: Book Stacks Unlimited, the Amazon Predecessor

![](/images/Book%20Inc.gif)

[*Image Source*](https://www.timetoast.com/timelines/el-comercio-electronico-35fa3c79-6531-4038-97cd-48fcde70e856)

Contrary to popular belief, Amazon was not the first online bookstore. Book Stacks Unlimited was created in 1992, three years before Amazon. It began as a dial-up bulletin board. They then launched the website Books.com in 1994, which was eventually [acquired by Barnes & Noble](https://en.wikipedia.org/wiki/Book_Stacks_Unlimited).

Not only did Book Stacks Unlimited offer 500K titles, but they provided features such as editorial book recommendations, book summaries, RealAudio interviews with authors, book search, and more.

## 1994: NetMarket and the First Sale on the Internet

![](/images/__Z8PQBCcf.gif)

[*Image Source*](https://people.apache.org/~jim/NewArchitect/webrevu/1998/05_29/strategists/05_29_98_2.html)

In 1994, Dan Kohn created NetMarket, which would sell a variety of CDs and books. He then marked the [first sale of a product over the internet using a credit card](https://en.wikipedia.org/wiki/NetMarket): a Ten Summoner’s Tale CD by Sting.

According to the [New York Times](https://www.nytimes.com/1994/08/12/business/attention-shoppers-internet-is-open.html), which covered the story back then, this was the first retail transaction on the Internet using a readily available version of powerful data encryption software designed to guarantee privacy. Dan Kohn [said about the purchase](https://www.nytimes.com/1994/08/12/business/attention-shoppers-internet-is-open.html) that “even if the N.S.A. was listening in, they couldn't get his credit card number.”

## 1994-1999: The Launch of Ecommerce Giants

### 1994: PizzaNet (PizzaHut)

![](/images/e_fChIFFJG.png)

[*Image Source*](https://web.archive.org/web/20140123215657/https://www.pizzahut.com/assets/pizzanet/home.html)

In 1994, PizzaHut created PizzaNet, their online ordering service. Not only did it allow customers to order from the menu, but it also allowed them to [customize the pizza](https://www.latimes.com/archives/la-xpm-1994-08-25-fi-31168-story.html).

In the skepticism of how the website might be used, the local restaurant would always call the customer to verify the order to minimize the risk of pranksters.

### 1995: Amazon

![](/images/9WFJUOhR9E.png)

[*Image Source*](https://www.webdesignmuseum.org/gallery/amazon-1995)

Amazon launched in 1995 as a book store. Although the design wasn’t too appealing, there were features that were advanced for its time: a virtual shopping cart, secure way of entering credit card details, an internal search engine, product reviews, and more.

In the very beginning, Amazon’s engineers used [C](https://en.wikipedia.org/wiki/C_(programming_language\)) to code a lot of the features of the website, and used [Berkeley DB](https://en.wikipedia.org/wiki/Berkeley_DB) to store the website’s data.

### 1996: eBay

![](/images/8Lu58_fxwo.png)

[*Image Source*](https://www.webdesignmuseum.org/gallery/ebay-1996)

eBay (initially Auction Web) was launched in 1996. It was one of its kind, being the first online auction website providing a [person-to-person marketplace](https://www.cs.brandeis.edu/~magnus/ief248a/eBay/history.html). Buyers would present their products, and customers bid on the items to eventually purchase it.

eBay was free of charge at the start. However, as their traffic hugely increased, [eBay’s founders were informed](https://en.wikipedia.org/wiki/EBay) that they needed to upgrade their hosting account. This led them to take commissions on bids to fund the website.

### 1997: Apple

![](/images/6jszNsuSyc.webp)

[*Image Source*](https://www.versionmuseum.com/history-of/apple-website)

Steve Jobs returned to Apple in 1997. His first line-of-action was to improve Apple’s presence in the ecommerce world. Apple launched their new-and-improved ecommerce website at the end of 1997 aimed at [improving customer experience](https://en.wikipedia.org/wiki/Apple_Store).

### 1998-1999: Nike

![](/images/omqdCPbqTu.webp)

[*Image Source*](https://theecommmanager.com/ecommerce/ecommerce-sites-from-history-old-screenshots/)

Nike created their first website in 1997. However, it was mainly focused on teaching their consumers more about Nike and their products, rather than selling these products online.

In 1998, the Nike website improved to provide consumers the ability to [customize their own Nike shoes](https://www.shoepalace.com/blogs/all/the-history-of-nike). It wasn’t until 1999 that Nike moved from editorial content to an online store.

## 2000-2005: Dot-Com Crash

In the 1990s, the Internet garnered heavy attention and adoption. Web-based startups gained a lot of funding, and all companies suddenly needed to “move to the internet”. Later followed what is now known as the Dot-Com Crash in March 2000 where the Nasdaq index slipped ~77% over less than three years.

The dot-com crash took down many ecommerce and internet-based companies that gained success during the 1990s. This affected even big companies like Amazon. Still, some companies like [eBay thrived despite the headwinds](https://www.itbusiness.ca/news/how-ebay-canada-survived-the-dot-com-bust/5053).

### SnowDevil and Shopify

In 2004, SnowDevil was launched, which ended up being [the spark that ignited Shopify](https://producthabits.com/shopify-grew-snowboard-shop-10b-commerce-ecosystem/). Tobias Lütke and Scott Lake wanted to sell snowboards online, but couldn’t find a software that would help them do that.

They initially used a variety of tools and services such as Miva, OsCommerce, and Yahoo stores. However, they frequently ran into trouble when trying to bring their vision to life. [According to Lütke](https://signalvnoise.com/posts/2378-qa-with-tobias-ltke-of-shopify) they had a “great CSS-based layout done with all these new fanged ‘web standards’”. However, the lack of customization capability that Yahoo provided barely allowed him to change the background color of the top frame.

![](/images/FN1UzFqeHw.png)

So, Lütke and Lake set out to create a solution that would not only solve their problem, but solve the problems of businesses across the globe. They built Shopify in 2007 and transformed SnowDevil to a Shopify demo store, bringing their vision to life.

Shopify now powers over [4.5 million websites](https://trends.builtwith.com/shop/Shopify) worldwide.

### Note on 2000s Designs

When looking back at some of the designs from the early 2000s, you’ll notice that there was a significant advancement from the HTML, almost only text and disarrayed images design that dominated that 1990s.

![](/images/lykPkVuVRy.png)

[*Image Source*](https://www.webdesignmuseum.org/timeline/amazon-2001)

Even though the design was still clunky and crammed, there was a clear usage of layouts and different colors. Ecommerce websites at the time also started using some elements that are now basics to ecommerce, such as a navigation menu and a sidebar for categories.

During that period, tech giants like Amazon and eBay continued to innovate with new features that are now core ecommerce features. Amazon added features like [Search Inside the Book](https://press.aboutamazon.com/2003/10/amazon-com-announces-sales-impact-from-new-search-inside-the-book-feature), allowing customers to search for words inside books. eBay also added a Live Chat feature to provide support for customers.

![](/images/KCswmchaw3.png)

[*Image Source*](https://www.webdesignmuseum.org/timeline/ebay-2002)

## 2006-2010: Rise of Ecommerce Platforms

After the dot-com crash, ecommerce companies and stores steadily regained momentum, and new ecommerce platforms emerged.

In 2007, Magento was created by Varien, and it was later [acquired by eBay](https://en.wikipedia.org/wiki/Magento). In the beginning, Varien were building their platform on osCommerce. However, they found it [incapable of accommodating all the features](https://www.icecubedigital.com/blog/what-is-magento-its-history-facts-usage-more/) and functionalities they had in mind. So, they decided to build a new open-source solution from scratch.

With the passing years, Magento grew to be one of the top open source ecommerce platforms at its time. In its first year, it was downloaded over 500K times. Magento’s popularity is due to the customizability capabilities it provided, as well as its open source nature. This allowed businesses to break away from proprietary solutions and take full ownership of their store.

![](/images/peVhSZ9erZ.jpg)

[*Image Source*](https://commons.wikimedia.org/wiki/File:Magento_Admin_Panel_screenshot.jpg)

BigCommerce was launched in 2009, after its founders met in a [programming online chat](https://signalvnoise.com/posts/2727-bootstrapped-profitable-proud-bigcommerce). BigCommerce initially wanted to provide a shopping-cart-only solution called Interspire. However, their consumers found it difficult to manually find, install, and update their software on a server, which lead to the change from Interspire to BigCommerce.

BigCommerce gained popularity among businesses that didn’t want the hassle of handling the technical parts of ecommerce, but still wanted to have the customizability options that allowed them to grow and scale. By 2011, BigCommerce was powering almost 10K stores.

![](/images/p4Hs4dQqZO.png)

[*Image Source*](https://signalvnoise.com/posts/2727-bootstrapped-profitable-proud-bigcommerce)

## 2010-2020: The Platform Puzzle

As the 2010s started, ecommerce saw a rapid uptake, and over the decade, [global ecommerce sales grew 8-fold](https://tblocks.com/how-e-commerce-has-changed-over-the-last-10-years).

During this period, ecommerce saw a lot of shifts in user behavior as new platforms emerged, effectively reshaping how users interacted with brands online.

### Design Changes

The 2010s show a big improvement in the design and functionalities that ecommerce stores provided. Many of the features that were carefully implemented in the 1990s and early 2000s became fundamentals that every ecommerce store had.

![](/images/RB8K80noFH.jpg)

With more businesses moving towards the ecommerce landscape, they each needed to stand out through unique branding and design. Ecommerce platforms that started emerging in the late 2000s provided more customizable options for the storefront.

This also lead to newer technologies, concepts, and approaches rising that would reshape websites in general, including ecommerce storefronts. Concepts like [Jamstack](https://www.netlify.com/press/unite-modern-web-ecosystem-at-jamstack-conf-2022), coined by Netlify in 2015, and the launch of static-site generator frameworks like Gatsby or Next.js, allowed businesses to have more control over designing their storefront and provide a better user experience.

### Mobile Commerce

The 2010s also marked the rise of mobile commerce. Ecommerce businesses started rolling out mobile apps that allowed their consumers to access the same web functionalities from their smartphones. This went through its own timeline of evolution, starting from a simple design and advancing to more sleek and user-experience tailored design.

This elevated the development of ecommerce stores from only catering to a website to multiple platforms. Developers needed to design and build APIs within their existing systems to cater for mobile development.

![](/images/EaVETdC2Qk.jpg)

[*Image Source*](https://www.talkandroid.com/43842-ebay-app-gets-updated-you-can-now-sell-items-from-your-phone/)

### Social Commerce

In the mid 2010s, social commerce started emerging. In 2015, Pinterest rolled out its first shopping capabilities through [Buyable Pins](https://techcrunch.com/2015/06/02/pinterest-unveils-buyable-pins-a-way-to-purchase-things-directly-from-pinterest/). Users were able to purchase products from Pinterest. [Instagram also announced Instagram Shop in 2018](https://www.cnbc.com/2018/09/17/instagram-launches-new-shopping-features.html) which allows users to browse and purchase products from businesses without leaving Instagram.

With the introduction of social commerce, businesses had now another platform to attract new customers. Businesses invested in social marketing strategies to ensure potential customers can discover their products through these platforms and, in turn, convert to purchasing customers.

![](/images/_9knLd28ij.gif)

[*Image Source*](https://techcrunch.com/2015/06/02/pinterest-unveils-buyable-pins-a-way-to-purchase-things-directly-from-pinterest/)

### Stripe and the Emergence of New Ecommerce Infrastructure

While ecommerce platforms evolved, a new type of infrastructure started to emerge to further improve the commerce experience. From analytics and backend-focused tools, to new solutions solving complicated issues related to areas such as payment and distribution.

The brothers Patrick and John Collison founded one of the most notable infrastructure solutions in this new commerce era in 2010. Through their side projects, they found it difficult to accept payment online and wanted to fix that. So, they developed a quick solution in [2 weeks](https://www.zippia.com/stripe-careers-39818/history/) and were able to process their first transaction. After making several iterations over the next few months, they launched Stripe under the name dev/payments.

![](/images/fXJNnaVyts.png)

[*Image Source*](https://vator.tv/news/2016-12-29-when-stripe-was-young-the-early-years)

As indicated by its initial name, Stripe was aimed towards developers at first. The founders then realized that Stripe solves problems the entire internet faced. [According to Patrick](https://www.fastcompany.com/1813087/inside-stripe-paypal-competitor-backed-paypal-founders-peter-thiel-elon-musk), existing solutions like PayPal and Google Checkout were “these confusing things,” and they wanted to solve what these existing solutions couldn’t.

Stripe reshaped the payment landscape, making it easy for anyone to start selling online, while providing a payment infrastructure that facilitated building custom setups. A lot of startups afterward took it upon themselves to cover other areas of the ecommerce infrastructure with similar developer-first approaches.

## 2020s and Ecommerce Modularization

The ecommerce landscape has evolved to include not only web as a sales channel, but also mobile apps, social apps, and more. This spawned the need for ecommerce solutions that provide [omnichannel](https://medusajs.com/blog/why-headless-commerce-is-the-perfect-solution-for-omnichannel-support/) support, frontend flexibility, and an extensive feature offering.

To accommodate those needs, the 2020s saw new and existing ecommerce solutions start to adopt [headless](https://medusajs.com/blog/headless-architecture/) and [composable](https://medusajs.com/blog/composable-commerce/) architectures.  As the demands for ecommerce heavily evolved, the previous methods used to create ecommerce applications, which were initially monolithic and tightly coupled, are now limiting. Developers now seek modular solutions that are less rigid and open to customizations. This would remove the restrictions on their businesses and the need for hacky workarounds.

The rise of point solutions that focus on specific domains within ecommerce has enabled this move towards modular solutions. Developers can combine these services and create a modern product stack that meets businesses’ exact requirements without compromising scalability.

As ecommerce, and the technology sector as a whole, is a rapidly growing landscape, new trends will continue to rise and fall. However, one thing remains consistent throughout the years: businesses will continue to strive to exceed their current potential. To ensure they can innovate and build unique experiences, ecommerce solutions must adopt a modular approach ensuring scalability and flexibility.


The History of Ecommerce: 1979 to 2023


<callout icon="exclamationCircleSolid" button-label="Go to Docs" button-url="http://docs.medusajs.com">
**Notice**
Medusa is under active development, so the content of this post may be outdated. Please check out our documentation instead.
</callout>


Ecommerce cart functionality is essential for the success of an online store, as it is a way for customers to interact with the store and make their purchases. A properly designed cart can make the shopping experience simple, intuitive, and enjoyable, while a poorly designed cart can frustrate customers and lead to abandoned purchases.


The ecommerce cart plays several important roles in the online shopping process such as allowing customers to manage the products in their carts, display all total information, and more.


This article outlines the crucial aspects to consider for a successful ecommerce cart that satisfies both user needs and technical requirements.


> **What is Medusa?** [Medusa](https://medusajs.com/) is an open source set of ecommerce building blocks that aims to provide a flexible developer experience. Developers and business have full freedom in how they shape their ecommerce application, including how they can implement a cart. Learn how to get started with Medusa in [the documentation](https://docs.medusajs.com/usage/create-medusa-app).


## Cart User Experience Considerations


Are you aware that the average shopping [cart abandonment rate is 69.82%](https://baymard.com/lists/cart-abandonment-rate)? The journey doesn't end there despite a customer clicking “add to cart ” on your [product](https://medusajs.com/blog/what-i-learned-from-studying-500-b2b-ecommerce-sites/) page. Several new challenges come into play once a customer places a product into their shopping cart.


Remember that getting potential customers to add an item to their cart is just the starting point. It's an opportunity to convert that into a sale. One key factor in achieving this is the [user experience](https://medusajs.com/blog/9-best-ecommerce-ux-practices-with-examples/) of your ecommerce platform.


### Allow Users to Add, Remove and View Items in Their Cart


Customers should feel in control, so provide them with the option to delete items from their cart easily. However, you can also include a confirmation pop-up to ensure the action was intentional.


Make it simple for customers to edit items in their cart as well. For example, provide options to adjust the quantity with "+" or "-" buttons, a drop-down menu, or a box for manual entry. As demonstrated in the example below from the [Medusa Next.js](https://medusajs.com/blog/nextjs-ecommerce-storefront-comes-packed-with-ready-integrations-to-paypal-meilisearch-stripe-and-more/) storefront:


![](/images/5rDdrNRzxv.png)


Ensure that any modifications made to the cart are reflected in the product image and information. The goal is to keep the customer on the cart page and make the buying process seamless. Avoid redirecting customers back to the product page for any changes. The buying journey should be a progressive one.


### Be Upfront About Costs


To avoid losing customers, make sure the prices on your cart pages are clear and easy to understand. Hidden fees or unexpected costs can make customers feel tricked and discourage them from completing their purchase. 


[According to a study by the Baymard Institute, 55% of customers cited](https://baymard.com/blog/ecommerce-checkout-usability-report-and-benchmark) extra costs as the main reason for leaving their cart. To prevent this, clearly display taxes and shipping costs on their own line, along with the subtotal and total cost of the cart. 


If these costs vary by location, consider adding a tax, shipping calculator, and conversion rate to your page, so customers can see the costs before they checkout. A perfect example is the Medusa storefront sample used below, which shows the subtotal, shipping, and tax fee with the total cost. 


![](/images/VWw4fVP4Td.png)


### Don’t Force Buyers to Create Accounts


Many customers abandon their shopping carts because creating an account on the website can take time and effort.[ In fact, 34% of people who took a survey by the Baymard Institute](https://www.drip.com/blog/cart-abandonment-statistics) cited this as a reason to abandon their shopping carts. To prevent this, offer a "guest checkout" option that allows customers to purchase without creating an account. This way, customers can easily complete a purchase, even if they only plan on buying something once and without any fuss.


### Offer Different Ways to Pay


Giving customers many options to pay will make it more likely for them to complete a purchase. If you don't offer a customer's preferred payment on your website, it may discourage them from finishing their purchase. Offering a limited number of payment options can limit customer choice and decrease the likelihood of a sale. You can start with the most popular payment methods, such as credit and debit cards, PayPal, and Google Pay, then you can expand from there.


![Source: Nike Checkout Section](/images/eX9nhVuAZN.png)


### Simplify the Checkout Process 


Consolidating everything on a single page can improve customer experience and increase sales by eliminating multiple clicks and guesswork for shipping costs or account creation. Customers can see all necessary information on a single page, including payment processing, shipping details, and order information.


![](/images/iCL7upvb_C.png)


### Make Buying on Mobile Easy


Many people shop online using their phones. You could lose sales if your checkout process is not easy to use on the phone. Make sure your checkout page is set up for mobile users so they can easily complete their purchases.


### Abandoned Cart Recovery


There are several ways to recover abandoned carts, including sending reminder emails, offering incentives, and displaying abandoned items on the customer's next visit to the website. These methods can remind customers of the items left in their cart and encourage them to complete their purchases.


Offering special discounts or promotions for completing the purchase can also be effective. Another strategy is to track customer behavior, such as which items are frequently abandoned, and address any issues that may be causing customers to abandon their carts. 


From a technical perspective, you could implement a cron job that checks for newly created carts, if a cart is older than a specific amount of time, it would send an email to remind the customer of their cart and encourage them to complete their purchase.


Overall, abandoned cart recovery is an important aspect of ecommerce and can lead to significant increases in sales and revenue.


## Cart Technical Considerations


Important things to consider when you create and manage an online store include keeping customer data secure, data storage, website performance, and real-time updates.


### Security


Ensuring the security of customer information is paramount in an ecommerce site. When choosing a shopping cart solution, you must look for certifications and compliance measures to protect your customers from identity and information theft. 


Investing in a shopping cart solution with robust security credentials is crucial to maintaining the trust of your customers. Keeping your customer's information secure and following laws protecting their data is another important part of it. For instance, businesses operating in the EU must comply with the General Data Protection Regulation (GDPR). In the US, the Health Insurance Portability and Accountability Act (HIPAA) are mandatory regulation. 


These regulations mandate strict requirements for handling and protecting sensitive customer information.


### Sessions, Cookies, and Local Storage


Storing items in a cart between visits is crucial for an ecommerce website. One way to accomplish this is by using sessions, cookies, and local storage. Both are used to store information about the customer's cart on their browser. 


Sessions are saved on the website's computer and only last as long as the customer’s tab is opened on the browser. Another session is created if the customer opens another tab for the same site. Once the customer closes the tab, the session is destroyed. Cookies are saved on the customer's computer and can last even if the customer closes the tab or browser. Local storage is a type of web storage that allows web applications to store and access data on the client side (i.e., in the user's web browser) with no expiration.


This lets customers easily pick up where they left off and complete their purchase. Utilizing one of these options ensures customers a smooth and convenient shopping experience.


An example of using local storage is storing cart ID in local storage. The CartID is retrieved from the server stored in the browser's local storage.


```javascript
// Generate a unique cart ID
var cartId = "<value>";

// Store the cart ID in local storage
localStorage.setItem("cartId", cartId);
```


This code retrieves the cart information by retrieving the cartID stored in the local storage and then sends the cartID to make a request to the server, which fetches the cart details.


```javascript
const cartId = localStorage.getItem("cartId")
if (cartId){
	fetch(`/cart?cartId=${cartId}`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    })
	.then((response) => response.json())
	.then(({ cart }) => {
		//display cart details
	})
}
```


This implementation above shows how cookies and local storage could be used together to manage a shopping cart. The cart ID is stored locally to allow the client to retrieve the cart information from the server.


### Real-Time Price Update


Updating the shopping cart and total price in real-time as the user makes changes is possible using JavaScript event listeners. For example, when a user clicks on the "add to cart" button, the JavaScript code will update the cart object and re-render the cart UI to reflect the change. 


Similarly, when a user changes the quantity of an item or removes an item from the cart, the JavaScript code will update the cart object and recalculate the total price. You can do this by assigning event listeners to the "add to cart", "remove from cart", and "quantity change" buttons.


Additionally, the total price displayed on the page should be updated to reflect the changes. This is just a basic example, you might need to follow extra steps to handle situations like trying to add an item that's unavailable yet or adding the same item more than once.


The site's performance must be considered, as recalculating the total price on every change may negatively affect the performance. Here is an example of how you might implement real-time updating of the cart and total price using JavaScript:


Note: This implementation focuses solely on client-side storage of the cart information. In a real-world scenario, communication with the server would be necessary to ensure the cart information is updated and accurate.


```bash
// Assign event listeners to the add to cart, remove from cart, and quantity change buttons
document.getElementById("add-to-cart-button").addEventListener("click", addToCart);
document.getElementById("remove-from-cart-button").addEventListener("click", removeFromCart);
document.getElementById("quantity-change-button").addEventListener("change", updateQuantity);

// Cart object to store the items in the cart
let cart = {};

// Function to add an item to the cart
function addToCart() {
    // Get item details from the page
    let item = {
        id: document.getElementById("item-id").value,
        name: document.getElementById("item-name").value,
        price: document.getElementById("item-price").value
    }
		// Call the calculate total price function
		calculateTotalPrice()

    // Add the item to the cart object
    cart[item.id] = item;

    // Re-render the cart UI to reflect the change
    renderCart();
}

// Function to remove an item from the cart
function removeFromCart() {
    // Get the id of the item to be removed
    let itemId = document.getElementById("item-id-to-remove").value;

    // Remove the item from the cart object
    delete cart[itemId];

    // Re-render the cart UI to reflect the change
    renderCart();

	// Call the calculate total price function
		calculateTotalPrice()

}

// Function to update the quantity of an item in the cart
function updateQuantity() {
    // Get the id of the item and the new quantity
    let itemId = document.getElementById("item-id-to-update").value;
    let newQuantity = document.getElementById("new-quantity").value;

    // Update the quantity in the cart object
    cart[itemId].quantity = newQuantity;

    // Re-calculate the total price
    let totalPrice = calculateTotalPrice();

    // Update the total price displayed on the page
    document.getElementById("total-price").innerHTML = totalPrice;
}

// Function to calculate the total price of the items in the cart
function calculateTotalPrice() {
    let totalPrice = 0;
    for (let itemId in cart) {
        totalPrice += cart[itemId].price * cart[itemId].quantity;
    }
    return totalPrice;
}

// Function to render the cart UI
function renderCart() {
    // Clear the existing cart UI
    document.getElementById("cart").innerHTML = "";

    // Iterate through the items in the cart and render them
    for (let itemId in cart) {
        let item = cart[itemId];
        let itemElement = document.createElement("div");
        itemElement.innerHTML = `<p>${item.name} - $${item.price} x ${item.quantity}</p>`;
        document.getElementById("cart").appendChild(itemElement);
    }
}
```


### Handling Out-of-Stock Items and Inventory Updates


When running an online store, it's essential to have a plan for handling things like items that are out of stock or inventory changes. A good way to handle items that are out of stock is to offer related or replacement items, for example, “Sorry, Nike Air Force 1 is out of stock, but we have the Nike Air Force 2 available.”


Another option is to show a message saying when the item will be back in stock and offer an option for customers to sign up for a mail notification to notify them when the item is available.


You can also let customers backorder items and ship them when they become available. Use inventory software to keep track of stock and update the website in real time. Also, let customers know when an item they're interested in is back in stock via email or a notification.


Limit the number of items a customer can purchase to the available stock and clearly communicate the item's status to customers so they can make informed decisions.


## Conclusion


In this article, we cover essential functionalities of an ecommerce cart from the user and technical standpoint, including responsiveness on mobile devices, access to various payment methods, offering guest accounts to new customers, handling out-of-stock items, real-time price updates, and saving the cart information in cookies.


Learn more about how to make a great online store with the Medusa quickstart guide [here](https://docs.medusajs.com/usage/create-medusa-app).


The documentation also provides two important guides related to carts:

- [How to implement a cart functionality](https://docs.medusajs.com/guides/carts-in-medusa)
- [How to implement checkout flow](https://docs.medusajs.com/advanced/storefront/how-to-implement-checkout-flow)

For any questions or support, you can reach the Medusa team through [Discord](https://discord.gg/medusajs).



How to Implement Ecommerce Cart Functionality

An ecommerce architecture refers to the overall technical design and infrastructure of an ecommerce online store, including the hardware and software components, such as servers, databases, and programming languages.

Systems architectures also include the flow of data between different components and how the website or application is built to handle traffic and perform functions such as processing payments and managing inventory.

Ecommerce architectures can vary greatly depending on the business's size, complexity, and specific requirements. Choosing a particular ecommerce architecture is a fundamental decision. It will impact several critical aspects of the business, like scalability, maintenance, upgradeability, cost security, and performance.

## Ecommerce Architecture Types

There are several common ecommerce architecture patterns, including monolithic architecture, microservices, two or three tiers architecture, [composable](https://medusajs.com/blog/composable-commerce/), [headless](https://medusajs.com/blog/headless-architecture/), serverless, or cloud-based architectures.

Architectures have different trade-offs, and the best one depends on the specific needs of the business and the resources available.

## Monolith Vs. Microservices Ecommerce Architecture

### Monolith Architecture

The [monolithic](https://medusajs.com/blog/composable-commerce/) architecture model is a unified system that includes all features in a large codebase. In this type of architecture, the ecommerce solution connects to a database. It contains components such as a user interface, data access layer, and business logic layer.

While monolithic architecture is a traditional method of software development, it has some benefits and drawbacks.

![](/images/0oF__MG7oR.png)

### Pros of a Monolithic Architecture

*   It's simple to implement and maintain as all the functionality is contained in one place.
*   There are fewer external components and less probability of things going wrong because everything is integrated.
*   Developing and testing new features is quicker because all the functionality is in one place.
*   Less expensive to set up and maintain than more complex architectures.

### Cons of a Monolithic Architecture

*   As the business and traffic grow, scaling can become challenging and may lead to bottlenecks.
*   Inflexible and demanding to change, making it hard to adapt to new business requirements or integrate with other systems.
*   Updating, testing, or replacing one system piece can be difficult and risky because all the functionality is combined.
*   A failure in one component can affect the entire system, which makes it hard to isolate and fix the problem.

### Microservice Architecture

A microservice architecture involves breaking down the ecommerce system into small and independent services that communicate with each other through APIs. The main advantage of this approach is that each microservice operates as a subsystem with its specific business logic. This architecture allows for greater scalability and flexibility.

![](/images/fveftgmdc0.png)

### Pros of a Microservice Architecture

*   Easier to scale individual services as needed without affecting the entire system.
*   More flexibility regarding technology choices and distribution of tasks among development teams.
*   Microservices can be developed, deployed, and scaled independently.
*   The failure of one service does not affect the entire system allowing for a more fault-tolerant system.
*   Better integration with other systems complementing a commerce website, such as CRM, CMS, or payment gateways. Businesses benefit from best-in-breed solutions without the need to reinvent the wheel.

### Cons of a Microservice Architecture

*   More complex to implement and maintain, especially for teams with less experience.
*   There is increased communication overhead, which can slow down the system and increase the risk of errors.
*   Development, deployment, and maintenance can be more expensive than a monolithic one. It requires more infrastructure and specialized skill sets.

## Two- Vs. Three-tier Ecommerce Architecture

Two-tier and three-tier architectures are different ways of organizing the components of an ecommerce system. The three-tier architecture has an extra layer between the client and server, allowing for more scalability and new features.

### Two-tier Architecture

A two-tier architecture is where the client (interface layer) communicates directly with the ecommerce platform's data layer. This architecture is straightforward but can become limiting as the business grows. It makes it challenging to add new functionality or scale the system.

![](/images/sXePhyVQKu.png)

### Pros of a Two-tier Architecture

*   Easy to understand and work with because all the functionality is contained in the client. It's quicker to develop, add and test new features.
*   Reduces network traffic and improves data processing efficiency by optimizing input-output and using buffering techniques.
*   The server uses transaction control to prevent concurrent modifications to the same records.
*   Less expensive to set up and maintain than more complex architectures.

### Cons of a Two-tier Architecture

*   Challenging to scale and may lead to bottlenecks as the business and traffic grow.
*   Inflexible and challenging to change, making it hard to adapt to new business requirements.
*   The business logic and data presentation may be the same for multiple client applications, increasing the need for resources.
*   It doesn't provide an additional layer for protection and validation, making it more vulnerable to attacks.

### Three-tier Architecture

A three-tier architecture contains an additional "middle tier" between the client and the server. This middle tier typically manages the client and server data flow. It can also handle authentication, security, and data validation functions.

![](/images/5K6X6ygKAF.png)

### Pros of a Three-tier Architecture

*   Each layer can be developed by a separate development team, which gives more flexibility regarding technology choices.t
*   Components can be reused across different platform parts, allowing for cost savings and faster development.
*   It provides an additional layer for security and validation, improving data integrity as the client lacks direct access to the database.

### Cons of a Three-tier Architecture

*   Different layers may only be able to handle an increase in traffic or data volume with significant modifications. It makes it difficult to scale
*   A three-tier architecture's development, deployment, and maintenance can be more expensive than a two-tier one.
*   Maintenance and upgrades can be more complex and time-consuming, as changes must be made to multiple layers and components.
*   More steps are involved in processing a request, which can lead to increased latency and slower response times for customers.

## Composable and Headless Ecommerce Architecture

### Headless Architecture

In a headless ecommerce architecture, the front-end presentation layer of the ecommerce platform is separated from the back-end functionality.

The front-end (head) displays the user interface and handles user interactions. On the other hand, the back-end (body) handles specific functionality such as inventory management, order processing, and payment processing.

![](/images/Z_EuBwy06T.png)

### Pros of a Headless Architecture

*   Greater flexibility in terms of the technologies used for the front-end and back-end.
*   Better integration with other systems, such as CMS, CRM, or payment gateways.
*   Better separation of concerns can improve performance, making it easier to optimize the front-end for a faster and better customer experience and the back end for better scalability and security.
*   Future-proofing for more straightforward adaptation to new technologies and emerging trends, such as Progressive Web Applications (PWAs) and voice assistants.

### Cons of a Headless Architecture

*   More complex to implement and maintain, especially for small businesses with a limited developer team.
*   Increased communication overhead can slow down the system and increase the risk of errors.
*   Development, deployment, and maintenance can be more expensive than traditional commerces.
*   Requires a different set of skills, expertise, and more robust integration between the front-end and back-end.

### Composable Architecture

A composable commerce architecture is an approach where the ecommerce platform comprises small and independent services. They can be combined and configured differently to meet specific business needs.

These services can be developed and deployed independently. Also, they can be composed to create a customized composable commerce solution that can be easily scaled and adapted to business requirements.

![](/images/slpWgdfDhf.png)

### Pros of a Composable Architecture

*   Different services can be swapped in and out as needed.
*   New services can be added to the platform without affecting the existing functionality.
*   Services can be scaled independently, depending on the usage.
*   More control over the ecommerce platform to optimize it for specific business needs.
*   Code and functionality can be reused across different services, resulting in cost savings and faster development.

### Cons of a Composable Architecture

*   More complex implementation and maintenance, especially for teams with less experience.
*   The system can slow down and increase the risk of errors because services communicate through APIs.
*   Higher operational costs because it requires more infrastructure and specialized skill sets.

## What Ecommerce Architecture to Choose

A well-designed architecture can improve the platform's performance, scalability, and security, making it easier to adapt to new business requirements. On the other hand, a poorly-designed architecture can limit the growth and success of the business.

### Consider your Current Architecture

When evaluating the current architecture of an ecommerce platform, it's essential to consider the following factors:

*   Scalability: Can the current architecture handle large quantities of users and transactions? Will it be able to drive future growth?
*   Flexibility: Can the current architecture adapt to new business requirements and changing technologies? Can ecommerce be easily integrated with other systems?
*   Performance: Is the current architecture optimized for fast load times and responsive user interactions?
*   Security: Can the current architecture protect sensitive customer data and transactions from potential security threats?
*   Reusability: Is the current architecture designed to allow code and functionality to be reused across different platform parts?
*   Cost-effective: Is the current architecture cost-effective for development, deployment, and maintenance?

Once you have assessed the current architecture against these factors, you should clearly understand whether it fits your business's needs. If the present architecture works, keep using it. If not, look for an alternative that better fits your business needs.

### Find the Architecture that Best Fits your Future Ecommerce Needs

Knowing your business's future requirements allows you to make an informed decision about the architecture and features of your ecommerce platform. This ensures your business's growth and success.

The ecommerce landscape constantly evolves, and new technologies and trends are always emerging. Ensure your platform is up-to-date with trends and tech to keep growing and succeeding.

For example, ecommerce businesses looking for a simpler and cheaper solution can use a monolithic or two-tier architecture. However, companies that need to scale and customize their business quickly may benefit from microservices, headless, or composable architectures.

Modern ecommerce systems could choose three-tier or composable architectures if they need security, performance, and integrations with other systems.

## Medusa’s Ecommerce Architecture

[Medusa](https://github.com/medusajs/medusa) provides a set of open source ecommerce building blocks for developers to build bespoke commerce setups. This way, businesses avoid platform lock-in and gridlocks and can instead start from a scaleable foundation.

Different services in Medusa are independent and can be combined differently. Businesses can add or remove features as needed and easily integrate them with other systems. This allows companies to improve the performance of their ecommerce store and adapt to new technologies and emerging trends.

Medusa allows developers to build and customize ecommerce functionality using [pre-built services and APIs](https://docs.medusajs.com/api/store/) rather than starting from scratch. This approach allows for faster development, improved scalability and flexibility, and better [integration with other systems](https://docs.medusajs.com/add-plugins/contentful/).

In addition, [Medusa's plugin system](https://docs.medusajs.com/advanced/backend/plugins/create) allows developers to add new functionality to the ecommerce platform without modifying the core codebase. This system will enable developers to create custom plugins that can be used to add new features or extend existing ones. It allows the platform to be customized to meet the specific needs of a business by completing requirements quickly and easily.

## Conclusion

Choosing the correct architecture for a business ecommerce can be overwhelming for developers. They must compare each architecture's advantages and disadvantages before selecting an option that could fit the business's necessities.

[Medusa is a good alternative](https://medusajs.com/blog/medusa-vs-magento-comparing-two-open-source-ecommerce-frameworks/) for businesses seeking a modular and open source ecommerce architecture. Its modular architecture allows different services to be combined and configured to meet the business's specific needs.

Using Medusa results in cost savings and faster development, particularly for companies with high levels of customization. It has improved integration with other systems and a supportive developer community for assistance with customization and maintenance.

If you’re interested in Medusa, you can get started by following [the quickstart guide](https://docs.medusajs.com/usage/create-medusa-app).

> Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via [Discord](https://discord.gg/F87eGuwkTp).



Ecommerce architecture refers to the technical design and infrastructure of an ecommerce websites. We break down the most common ecommerce architectures; Monolith vs. Microservices, Two- vs. three-tier, Composable & headless

Ecommerce Architecture: Design and Types

Top 5 Ecommerce Search Engines for Developers

Every ecommerce website owner wants to increase traffic and sales, and this is possible when users can easily search for and find products they’re looking for. On the flip side, if you don't have a good search engine on your ecommerce store, you'll miss out on sales and visitors because nobody likes to take ages trying to find something.

Using search engines in your ecommerce website has many advantages. Most search tools come with features like autocomplete, faceted search, search analytics, and support to help boost the user search experience.

This article will explain the benefits of using search engines in online stores and introduce you to the top 5 search engines that you can use.

> **What is Medusa?** [Medusa](https://medusajs.com/) is a Node.js-based, open source, [composable commerce](https://medusajs.com/blog/composable-commerce/) engine. It is built on abstract layers to allow developers to fully customize the engine and integrate third-party services and tools such as search engines without hacky workarounds.

## **Why Use Search Engines in Ecommerce Websites?**

To avoid losing a significant amount of revenue and customers, ecommerce websites must organize quality [ecommerce site searches](https://medusajs.com/blog/importance-of-optimizing-internal-search-in-ecommerce-websites/). Here are some advantages of integrating a search engine into your ecommerce website:

*   Increase Sales and Revenue: Customers can quickly find the products they are looking for using a search engine, leading to increased conversions and sales.
*   Analyze Users’ Search Data: You will be able to analyze what your users liked and purchased. The analysis allows you to track your users and determine how to serve them better.
*   Control Traffic on Your Ecommerce Website: Search engines can help control traffic on ecommerce websites by providing users with fast and relevant results for their search queries. Having a good search engine can reduce the number of backend queries, which could avoid a surge in website traffic during high-traffic periods like Black Friday.

## **5 Ecommerce Search Engines for Developers**

### **Meilisearch**

![](/images/OqRlliixph.png)

[Meilisearch](https://www.meilisearch.com/) is a free and open source search engine that can provides advanced search features such as faceted search, full-text search, and typo tolerance. It can handle large data and provide a quick search experience.

By incorporating [Meilisearch](https://medusajs.com/blog/nextjs-ecommerce-storefront-comes-packed-with-ready-integrations-to-paypal-meilisearch-stripe-and-more/) into an ecommerce website, users can find the information they need quickly, improving the overall user experience. MeiliSearch can also be used to analyze and visualize data, making it a valuable tool for businesses and organizations seeking to gain insights from their data.

Meilisearch is also known for its ease of integration and lightweight nature, making it simple to use and scale.

**Unique Features of Meilisearch**

*   Meilisearch is a lightweight and user-friendly search engine.
*   It is written in Rust and simple to incorporate into any project.
*   Meilisearch's ability to perform real-time indexing and searching enables fast search results even with large amounts of data.
*   It provides a simple and intuitive API, making it simple to customize and extend the search engine's functionality.
*   Meilisearch also has advanced features like ranking algorithms and typo tolerance that other search engines do not always have.

> Learn how to integrate MeiliSearch with Medusa by following [this documentation](https://docs.medusajs.com/add-plugins/meilisearch).

### **Algolia**

![](/images/VnuXZ-iwpw.png)

[Algolia](https://www.algolia.com/) is a search-as-a-service platform that can be integrated with a website to provide advanced functionality such as instant search, typo tolerance, and faceted search. Even with large data, Algolia's powerful search algorithms can return results quickly and accurately.

By incorporating Algolia into a website, users can find the information they need more quickly, improving the overall user experience.

Additionally, Algolia provides several analytics and monitoring tools to gain knowledge about how people use the search feature and make decisions based on data to make the search experience better. Algolia also provides a simple SaaS solution to set up and scale.

### Unique Features of Algolia

Algolia is a search engine for developers that provides quick and relevant search results for web and mobile applications. Some key features that distinguish Algolia from other search engines are as follows:

*   Algolia is designed for speed, with a distributed architecture that allows for quick search results even when dealing with large data.
*   Algolia allows developers to create custom ranking algorithms to control the relevance of search results based on their specific use cases. The "search as you type" feature of Algolia provides fast, accurate results as soon as the user starts typing.
*   Algolia's relevance tuning feature allows developers to fine-tune the relevance of search results by adjusting the weight of various attributes and facets.
*   Algolia comes equipped with multi-language support, making it easy to develop search experiences for a worldwide audience.
*   Algolia offers a hosted and managed service, so developers don't have to worry about managing infrastructure or scaling the service as their application grows.

> Learn how to integrate Algolia with Medusa by following [this documentation](https://docs.medusajs.com/add-plugins/algolia).

### **Typesense**

![](/images/m1E6Q3OAJK.png)

[Typesense](https://typesense.org/) is a search engine that offers advanced search capabilities like instant search, typo tolerance, and faceted search when integrated into a website. Typesense's search algorithms are designed to produce fast, accurate results, even when dealing with large amounts of data.

Typesense's search algorithms are designed to produce fast, accurate results even when dealing with large amounts of data.

Additionally, Typesense has a fast response time, so search results are received quickly. It can also handle different languages and similar words easily, making it great for businesses and organizations to get information from their data. It is also known for its ease of integration and lightweight nature, making it simple to use.

### Unique Features of Typesense

Typesense is a search engine that provides quick and relevant results for web and mobile applications. Among the key features that distinguish Typesense from other search engines are:

*   Typesense is engineered for quickness, featuring a distributed structure that allows for speedy search outcomes even with a substantial amount of information.
*   Typesense possesses advanced typo-tolerance capabilities, enabling users to receive relevant search results even when their query contains misspellings or typos.
*   Typesense allows developers to create custom ranking algorithms that control the relevance of search results based on their specific use case.
*   Typesense features integrated support for various languages, making it effortless to develop search experiences for a worldwide audience.
*   Typesense provides a simple and intuitive API, making it simple to customize and extend the search engine's functionality.
*   It is an open source search engine, that can be effortlessly customized and integrated into projects.

### **Sphinx**

![](/images/2yzNHM5YQn.png)

[Sphinx](http://sphinxsearch.com/)  is a search engine that can be integrated into a website to provide advanced search functionality such as full-text, Boolean, and faceted search. It is a powerful open-source search engine that can handle large amounts of data and quickly return results.

Furthermore, Sphinx allows you to customize the ranking algorithm and weighting system, which can help businesses and organizations improve the relevance of search results. Sphinx also supports multiple languages and can index and search across multiple data sources, making it a versatile tool for data search and analysis.

### Unique Features of Sphinx

Sphinx is a full-text search engine that was specifically designed to handle large amounts of text data. It is frequently used for indexing and searching databases, emails, and other structured data. Some key features that distinguish Sphinx from other search engines are as follows:

*   Sphinx can handle large amounts of data and scale horizontally by distributing the index across multiple servers.
*   Sphinx is intended to be fast and efficient, with a small memory footprint and support for real-time indexing.
*   Sphinx provides developers with the ability to create custom indexing and ranking algorithms, as well as fine-tune the relevance of search results by adjusting the weight of various attributes and facets.
*   Sphinx includes built-in support for multiple languages, making it simple to create search experiences for a global audience.
*   Sphinx is an open source search engine that gives developers the ability to smoothly incorporate and adapt it into their ecommerce website.
*   Sphinx can index and search data from a variety of sources, including MySQL, PostgreSQL, XML, CSV, and JSON.

### **Elasticsearch**

![](/images/CdE30ecqlU.png)

[Elasticsearch](https://www.elastic.co/) is a search engine that can quickly and easily index and search large amounts of data. It can be integrated with a website to provide faceted search, full-text search, and geospatial search functionality.

Elasticsearch can also be used to analyze and visualize data, making it a valuable tool for businesses and organizations seeking to gain insights from their data.

### Unique Features of  Elasticsearch

Elasticsearch is a distributed search engine based on the Lucene library that is designed to handle large amounts of data while providing quick and relevant search results. Elasticsearch differs from other search engines in several ways, including:

*   Elasticsearch can handle large amounts of data and scale horizontally by distributing the index across multiple servers.
*   Elasticsearch is designed for speed and efficiency, boasting real-time indexing and search capabilities.
*   Elasticsearch's flexibility enables developers to create custom indexing and ranking algorithms, as well as finetune the relevance of search results by adjusting the weight of various attributes and facets.
*   Elasticsearch comes equipped with multi-language support, enabling the easy creation of search experiences for a worldwide audience.
*   Elasticsearch includes a robust set of analytics and visualization tools that make it simple to build custom dashboards and gain insight into search data.
*   Elasticsearch is versatile in that it can handle a wide range of use cases, including full-text search, analytics, logging, and more.
*   Elasticsearch is an open source search engine.

## **Conclusion**

The importance of a search engine on your ecommerce website cannot be overstated because your users are extremely important. They should be able to find what they are looking for on your application quickly and easily, without having to search for hours.

This article introduced you to some fantastic search engines that you could integrate into your application. You can use any of them on your ecommerce website to provide your users with a consistent search experience.

[Medusa](https://medusajs.com/) is a good option for an ecommerce website because it offers an easy way to add search functionality using some of the options given in the article. With all of these in place, you can be confident of creating a fantastic application that your users will enjoy, driving sales, and optimizing your search.

Get started with Medusa by following the [quickstart guide](https://docs.medusajs.com/usage/create-medusa-app).

> Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via [Discord](https://discord.gg/F87eGuwkTp).



Discovery Days at Medusa: How I created Cross Post tool from Notion

I’m a technical writer at [Medusa](https://medusajs.com/). Part of my work includes managing the content on our blog and across platforms. Typically, we publish an article on our [blog](https://medusajs.com/blog/) (which is built with [Stackbit](https://www.stackbit.com/)), then cross-post that article across platforms such as Dev.to, Hashnode, and Medium.

This process has become tedious and time-consuming. We publish at least 2 articles per week, and each article can take more than 30 minutes to be published across our blog and the 3 mentioned platforms. This includes adding the content in the format that each platform supports, uploading images if there are any, setting meta attributes such as description and meta tags, and more.

So, I decided to build a cross posting tool that would automate this task. [cross-post-notion](https://github.com/shahednasser/cross-post-notion) now allows us to publish an article from Notion to a GitHub repository (which holds the content of our main blog), Dev.to, Hashnode, and Medium in less than a minute. I decided to build this tool as part of our Discovery Days at Medusa.

## What are Discovery Days?

Every Friday, the Medusa team members can dedicate half or their full day towards doing something different from their typical daily work. You can use this day to learn something new, read a book specific to your field, try out an interesting tool, or build a new tool.

As I realized this tool would heavily reduce the time I spend on publishing content to our blog, I dedicated the past 4 Discovery Days (Fridays) to building this tool.

## How it Works

You can use `cross-post-notion` either as an NPX command, as a global CLI tool, or just by cloning the [GitHub repository](https://github.com/shahednasser/cross-post-notion#notion).

Then, after adding the configurations necessary (more on this later), you can publish to all the different platforms using one command. You can also choose specific platforms to publish to.

### Publishing to GitHub

Publishing to GitHub can be useful for any blogging platform that uses Markdown files hosted in a GitHub repository. This includes Stackbit, GitHub Pages, 11ty, Hugo, Docusaurus, etc…

Articles are pushed to GitHub as Markdown files with front matter metadata. The front matter includes by default the `title` and `date` of the article. The values of these fields are extracted from your Notion document, and you can specify the properties to extract these fields from.

In addition, you can specify custom front matter fields to add and from which properties to extract them from Notion. You can also specify front matter fields with fixed values. This is helpful if you have front matter fields that you need to always add to your articles.

If an article has images, the images are pushed to the GitHub repository as well. You can specify the path to upload the images to and the prefix to use within the article.

### Publishing to Dev.to

You can publish articles to dev.to with this tool, either on your personal account, or in an organization. Similar to posting to GitHub, the values of dev.to fields such as the title, tags, or series can all be extracted from Notion properties.

One limitation to publishing to dev.to is that you can’t upload the images in the article using their APIs. So, you’ll still have to manually go in and upload any images in your article.

### Publishing to Hashnode

You can publish articles to Hashnode with this tool, either on your personal blog or in a specific publication. Similar to the other platforms, the values of Hashnode fields are extracted from Notion properties.

One limitation to publishing to Hashnode is that it’s not possible to publish an article as a draft with their APIs. It’s only possible to choose to hide it from Hashnode’s feed. So, the article will automatically be available to your followers.

### Publishing to Medium

You can publish articles to Medium with this tool, either on your personal account or in a specific publication. Similar to the other platforms, the values of Medium fields are extracted from Notion properties.

## Using this Tool

### Requirements

This tool requires an Internal Notion Integration created and installed in your Notion workspace. The integration must have access to the pages you want to publish as well. You can learn more about this in [Notion’s documentation](https://developers.notion.com/docs/create-a-notion-integration#step-1-create-an-integration).

### Install the Tool

There are three ways you can use this tool:

1\.  With NPX, which does not directly install the tool on your machine:

```
npx cross-post-notion
```

2\.  Install as a global CLI tool with NPM or Yarn:

```
# using NPM
npm install -g cross-post-notion

# using Yarn
yarn add cross-post-notion global
```

3\.  Clone the GitHub repository:

```
git clone https://github.com/shahednasser/cross-post-notion.git
cd cross-post-notion
npm install
npm start
```

### Set Environment Variables

You need to set the following environment variables before you can use the tool. The requirements of the environment variables depends on which platforms you want to publish to:

*   Notion:
    *   `NOTION_TOKEN`: (required for all platforms) Token on a Notion internal integration
*   GitHub:
    *   `GH_TOKEN`: (required) GitHub personal token
    *   `GH_OWNER`: (required) GitHub username
    *   `GH_REPO`: (required) GitHub Repository name
    *   `GH_BRANCH`: Branch name. Default is `master`.
*   Dev.to:
    *   `DEVTO_API_KEY`: (required) Your personal dev.to API key. Learn how to retrieve it [here](https://developers.forem.com/api/v0).
    *   `DEVTO_ORG_ID`: The ID of the organization to publish the article under. You can retrieve it either from the organization dashboard page, where the ID is the last part of the URL (`https://dev.to/dashboard/organization/ORG_ID`). Alternatively, you can use Dev.to's [List Organizations](https://developers.forem.com/api/v0#tag/organizations/operation/getOrgUsers) endpoint to find the ID.
*   Hashnode:
    *   `HASHNODE_TOKEN`: (required) Hashnode personal token
    *   `HASHNODE_PUB_ID`: The ID of the publication to publish the article under. You can retrieve it either from the publication's dashboard page, where the ID is the second part of the URL (`https://hashnode.com/PUB_ID/dashboard`).
*   Medium:
    *   `MEDIUM_TOKEN`: (required) Medium Integration Token. Can be retrieved from [here](https://medium.com/me/settings/security).
    *   `MEDIUM_PUB_NAME`: The name of the Medium publication. Must be the exact name as it is on Medium.

### Add Configurations

Configurations are used to customize how the article is published on the different platforms. They can be used to define what properties to extract data from in Notion, whether the article should be published or added as a draft, and more. You only need to set these configurations the first time you use the tool.

By default, configurations are loaded from the file `config/default.json` relative to the current directory you’re running the command from. Alternatively, you can pass the [path to the config file as an option](https://github.com/shahednasser/cross-post-notion#config).

The file can have the following configurations:

```
{
  "config": {
    "notion": {
      "options": {
        "skip_block_types": [
	        "toggle"
        ]
      }
    },
    "github": {
      "options": {
        "image_path": "public",
        "image_prefix": "/",
        "article_path": "content",
        "properties": {
          "title": "Title for Blog",
          "date": "Publishing Date",
          "slug": "Slug"
        },
        "add_default_frontmatter": true,
        "frontmatter_labels": {
          "title": "title",
          "date": "date"
        },
        "extra_frontmatter": {
          "excerpt": "this is description"
        },
        "extra_frontmatter_mapper": {
          "excerpt": "Description"
        }
      }
    },
    "devto": {
      "options": {
        "should_publish": false,
        "properties": {
          "title": "Title for Dev.to"
        }
      }
    },
    "hashnode": {
      "options": {
        "should_publish": true,
        "should_notify_followers": false,
        "properties": {
          "title": "Title for Hashnode"
        }
      }
    },
    "medium": {
      "options": {
        "should_publish": false,
        "should_notify_followers": false,
        "properties": {
          "title": "Title for Medium"
        }
      }
    }
  }
}
```

You can learn what each of these fields are and what more fields can be accepted in [the GitHub repository](https://github.com/shahednasser/cross-post-notion#available-configurations).

### Run Post Command

Grab the URL of a Notion document that includes an article you want to publish. It should be an internal URL which you can obtain from the Notion document by:

*   Click on Share at the top right.
*   Click on “Copy link” at the bottom of the pop-up.

Then, run the following command:

```
# using NPX
npx cross-post-notion post <url>

# using CLI tool
cross-post-notion post <url>

# using cloned repository
npm start post <url>
```

Where `<url>` is the URL to the Notion document.

If all environment variables are set correctly, you should see logged in your terminal that the article was published on each of the platforms.

You can also specify which platforms you want to publish the article on using the `-p` option:

```
npx cross-post-notion post <url> -p devto hashnode
```

This would publish the article only on [Dev.to](http://Dev.to) and Hashnode.

## Learn More about this Tool

You can learn more about this tool and its limitations by checking out the [GitHub repository](https://github.com/shahednasser/cross-post-notion). If you use it, let me know if it helps out! Although I’m mainly focused on using it for publishing articles at Medusa, feel free to open issues and contribute to further improve the tool.

> Be sure to check out [Medusa, a composable ecommerce platform, on GitHub](https://github.com/medusajs/medusa).


Vercel Ecommerce: Ecommerce store with Next.js + Medusa + Stripe


<callout icon="exclamationCircleSolid" button-label="Go to Docs" button-url="http://docs.medusajs.com">
**Notice**
Medusa is under active development, so the content of this post may be outdated. Please check out our documentation instead.
</callout>

When it comes to setting up an online store, finding the right hosting provider is essential. A reliable host can ensure that your website stays up and running, even during periods of high traffic. [Vercel](https://vercel.com/) is a hosting provider optimized for performance and scalability; it's a great choice for ecommerce storefronts.

Having a good host, however, is only half the battle; you also need a flexible ecommerce engine that can be customized to suit your needs, and this is where you need Medusa. Medusa is a composable ecommerce engine that offers many out-of-the-box features. It allows developers to choose any frontend stack and tailor the storefront as they wish.

In this tutorial, you will learn how to build a complete commerce site using Next.js,  Medusa, and  Stripe, and deploy the site using Vercel.

## What is Vercel?

[Vercel](https://vercel.com/docs/concepts/get-started) is a cloud platform that enables developers to easily build and deploy modern web projects built with frameworks like Next.js, Svelte, React.js, Nuxt.js, and more. With Vercel, you can host static sites and serverless functions. You can take advantage of the exciting features, such as automatic HTTPS, global CDN, Vercel CLI, and atomic deployments.

Vercel integrates with Git, i.e. it can connect to your Git repository and automatically deploy your code when changes are made to it. This is known as "continuous integration and deployment" (CI/CD).

Hence, you can easily deploy your projects without having to worry about managing infrastructure. Whether you're a beginner or an experienced developer, Vercel provides a seamless developer experience that allows you to focus on building great products.

### Why use Vercel?

*   Easy Deployment and Hosting: Vercel makes it simple to deploy and host web projects with its intuitive interface and one-click setup.
*   Integration with Popular Frameworks and Tools: Vercel supports a many popular frameworks and tools, including React, Angular, Vue, Next.js, and more, making it a versatile option for a variety of web projects.
*   Automatic HTTPS and Global CDN: Vercel automatically provisions and renews SSL certificates for your domain and distributes your project's files to a global CDN, which helps to improve the performance and security of your website.

## What is Next.js?

[Next.js](https://nextjs.org/docs/getting-started) is a popular open source JavaScript framework for building server-rendered and statically-generated web applications. It is based on React, a JavaScript library for building user interfaces. It is designed to make it easy for developers to create fast, scalable web applications that are optimized for performance.

Next.js provides features and tools for building and deploying web applications, including server-side rendering, automatic code splitting, incremental static regeneration, data fetching, and support for static and dynamic routes.

It is SEO-friendly and widely used by developers to build modern web applications. It is known for its simplicity and ease of use.

### Why use Next.js?

*   Server Rendering: Next.js is a framework for building server-rendered React applications. This means that the initial render of a Next.js application is done on the server, which can improve the performance and SEO of your website.
*   Automatic Code Splitting: Next.js automatically splits your code into small chunks, which helps to reduce the initial load time of your website and improve the user experience.
*   Hot Code Reloading: Next.js supports hot code reloading, which allows you to see changes in your code without having to manually refresh the page.

## What is Medusa?

[Medusa](https://github.com/medusajs/medusa) is an open source, [Node.js-based](https://medusajs.com/blog/nodejs-ecommerce-backend/), composable commerce engine. It has an amazing developer experience and endless customization options for ecommerce businesses looking to scale.

Medusa has three components: Medusa Server, Medusa Admin, and Medusa Storefront. The Medusa server can be integrated with any [frontend](https://medusajs.com/blog/which-frontend-framework-you-should-pick-for-your-ecommerce-storefront/) technology of your choice, thereby making it easy for developers to use different frontend technology while building their online stores.

![](/images/nOUThqqW8f.png)

Medusa has essential ecommerce features such as an admin dashboard, a multi-payment option, manual orders, [multi-currency support](https://medusajs.com/blog/multi-currency-ecommerce/), a shopping cart, products and image optimization, an SEO-friendly interface, and more.

## Why use Medusa?

*   Accessible Codebase: As an open source commerce engine, Medusa has all its codebase available on its official GitHub Repository, making it more accessible for developers.
*   Headless Architecture: Medusa is based on Node.js and separates the frontend from the backend. It also separates the admin panel from the backend. Making changes in one part, either backend, admin, or storefront doesn’t affect the other. This will help developers know where to focus when fixing a bug.
*   Strong Community Support: Medusa provides 24/7 community support through its Discord channel.

## What is Stripe?

[Stripe](https://stripe.com/payments) is a payment processing platform that provides a simple, secure way for businesses to accept payments online. It offers a range of tools and services for processing transactions, including support for credit and debit card payments and other forms of payment such as Apple Pay and Google Pay.

Stripe provides a comprehensive set of APIs and libraries that make it easy for developers to integrate its payment processing capabilities into their websites and applications.

## Why use Stripe?

*   Secure Payments: Stripe uses industry-standard security measures to ensure that all transactions are secure and compliant with regulations.
*   Scalability: Stripe can handle large numbers of transactions and can easily scale to meet the needs of growing businesses.
*   Robust Feature Set: Stripe offers a variety of features, including subscriptions, recurring payments, and fraud detection, which can help businesses streamline their payment process.

## Prerequisites

Before starting this tutorial, ensure you have the following ready:

*   [Node.js](https://nodejs.org/en/) (v14 or later)
*   [Stripe](https://dashboard.stripe.com/register) account (with API keys ready)
*   [Git](https://git-scm.com/download/win) installation
*   [Vercel](https://vercel.com/signup) account

## Creating a Medusa Project

A Medusa project is composed of the server, storefront, and admin. All these will be installed using a single command line.

In your terminal, run the following command:

```
npx create-medusa-app
```

While the above command is running, you’ll be asked to enter the name of the directory you want the project to be installed. You can either leave the default value `my-medusa-store` or enter a new name.

![](/images/soXuhnfut0.png)

Next, choose the Medusa server starter. The Medusa server is created from a starter template. By default, it is created from the `medusa-starter-default` template. So choose `medusa-starter-default` to enable you to follow up with this project.

![](/images/oUPfw773kf.png)

Doing this will install the server under the directory `my-medusa-store/backend`. It will also create an SQLite database inside that directory with demo data seeded into it.

After choosing the Medusa starter, the next prompt will ask you to choose the storefront starter. Choose Next.js Starter which is what you will use for this project storefront.

![](/images/1Zl4Lk1d0V.png)

Once you are successfully done with the above, you can follow the code block below to navigate around your store server, admin, and storefront:

```
## Medusa API
cd my-medusa-store/backend
medusa develop

## Medusa Store Admin
cd my-medusa-store/admin
npm start

## Medusa Storefront
cd my-medusa-store/storefront
npm run dev
```

> Note: Each folder (backend, admin, and storefront) has its own Git history.

## Install and Configure Stripe Medusa Plugin in Medusa Backend

The *Stripe Medusa plugin* will enable Stripe payment to work on this project and also create a channel for your project to communicate with Stripe APIs.

Before you start, navigate to your `backend` directory using the following command:

```
cd my-medusa-store/backend
```

In the root of your backend, run the following command to install the Stripe plugin:

```
npm install medusa-payment-stripe
```

Next, you need to add  STRIPE API KEY and STRIPE WEBHOOK SECRET to your `.env` file:

```
STRIPE_API_KEY=example_API_key_xxxxx
STRIPE_WEBHOOK_SECRET=example_WEBHOOK_key_xxxxx
```

In the above, replace `example_API_key_xxxxx` and `example_WEBHOOK_key_xxxxx`  with the keys gotten from your [Stripe dashboard](https://dashboard.stripe.com/test/apikeys).

> Note: Stripe webhook secret is not necessary to add in development. You can skip it if you wish.

Next, you need to add configurations for your Stripe plugin. In `medusa-config.js`, add the following at the end of the `plugins` array:

```
const plugins = [
  // ...
  {
    resolve: `medusa-payment-stripe`,
    options: {
      api_key: process.env.STRIPE_API_KEY,
      webhook_secret: process.env.STRIPE_WEBHOOK_SECRET,
    },
  },
]
```

### Test Medusa Server

If you’ve completed the above processes, start your store server with the command below:

```
medusa develop
```

You can navigate to `localhost:9000/store/products/` to see available products in your store.

![](/images/DWhQR57y_V.png)

The image you see above represents a sample response containing your store products. You should see something similar.

### Enable Stripe Payment Provider in a Region

Regions in Medusa are used to manage the markets where you will operate within. You can manage and add multiple countries in a region. You can also manage shipping options and payment providers.

Before you start, navigate to your `admin` directory and start your admin using the following command:

```
cd my-medusa-store/admin
npm start
```

Ensure your *backend server* is still running, then `localhost:7000` on your browser to access your admin page.

![](/images/ACbNh8sdhN.png)

If you completed the steps above successfully, then you should a page similar to the image above.

Medusa seeded your database with a demo admin that you can log in with. The email is `admin@medusa-test.com`, and the password is `supersecret`.

If you log in with the demo admin login details, you will have access to your admin dashboard.

The next step is to add Stripe Payment to your Regions, simply follow the steps below:

1.  Go to *Settings → Regions*.

    ![](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/472bf4c1-d91d-46d2-b726-1cadb1a247fe/v3.png?X-Amz-Algorithm=AWS4-HMAC-SHA256\&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD\&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20230213%2Fus-west-2%2Fs3%2Faws4_request\&X-Amz-Date=20230213T102339Z\&X-Amz-Expires=3600\&X-Amz-Signature=0d8ca32c0b730a2bb87c2e525005b838a3b515a32f19016e7db4c163156bad3d\&X-Amz-SignedHeaders=host\&x-id=GetObject)

2.  Click on the region you want to edit from the *Regions* section.

    ![](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/ddcfedf7-57e6-406a-9bc2-d1d2399352b6/v5.png?X-Amz-Algorithm=AWS4-HMAC-SHA256\&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD\&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20230213%2Fus-west-2%2Fs3%2Faws4_request\&X-Amz-Date=20230213T102340Z\&X-Amz-Expires=3600\&X-Amz-Signature=feeb6a09f782811c7bc9efdbb617c25f11bc3c66e4732e4fac58a50c79ed6492\&X-Amz-SignedHeaders=host\&x-id=GetObject)

3.  Click on the three-dot icon at the top right of the selected region and click on *Edit Region Details*.

    ![](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/5eec7f88-1d3f-48c4-bd65-c55e8bd6e833/v4.png?X-Amz-Algorithm=AWS4-HMAC-SHA256\&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD\&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20230213%2Fus-west-2%2Fs3%2Faws4_request\&X-Amz-Date=20230213T102341Z\&X-Amz-Expires=3600\&X-Amz-Signature=a2265ef84df028cd2da6e714ea28eb672202829d0bd0cebbfc569a6f64c2a4cd\&X-Amz-SignedHeaders=host\&x-id=GetObject)

4.  Select Stripe as the payment provider.

    ![](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/5c75a93f-47f3-444f-9331-e7a580fa01fa/v6.png?X-Amz-Algorithm=AWS4-HMAC-SHA256\&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD\&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20230213%2Fus-west-2%2Fs3%2Faws4_request\&X-Amz-Date=20230213T102341Z\&X-Amz-Expires=3600\&X-Amz-Signature=899d7546c9cc81a2ccac23a7e6a6f56d7ac410788bd5febde55919ea93cd9e25\&X-Amz-SignedHeaders=host\&x-id=GetObject)

Once done with step 4, you can click on the *Save and close* button to save.

Repeat these steps to add Stripe Payment to other regions.

## Test Next.js Storefront

Before testing, switch to the *storefront* directory and rename the template environment variable file to use environment variables in development:

```
cd my-medusa-store/storefront
mv .env.template .env.local
```

Then, add Stripe public key to your Next.js storefront.

In your `.env.local` file (or the file you’re using for your environment variables), add the following variable:

```
NEXT_PUBLIC_STRIPE_KEY=<YOUR_PUBLISHABLE_KEY>
```

Make sure to replace `<YOUR_PUBLISHABLE_KEY>` with your [Stripe Publishable Key](https://dashboard.stripe.com/test/apikeys).

Lastly, ensure your Medusa server is running, then run the command below:

```
npm run dev
```

After a few seconds of running the above command, navigate to `localhost:8000` on your browser to see your Next.js ecommerce storefront homepage.

Scroll down to select a product from the featured products on the homepage.

![](/images/9uuwp7xdGK.png)

Click on a product to view the single product page where you can add items to your cart.

![](/images/5ZpNTaxCNh.png)

If you click on *My Bag* at the top right of your store, you will view the cart review page of your store.

![](/images/F0xBT1PRo1.png)

Click on *GO TO CHECKOUT* to see your *Checkout* page, where you will be asked to input your delivery information.

![](/images/QVckknxsPy.png)

After a successful payment, you’ll see the *Order Receipt* Page.

![](/images/YEQinB8NDO.png)

## Deployment to Vercel

After testing your store, the next thing is to deploy your store backend, admin, and storefront using Vercel.

### Deploying Medusa Backend

Medusa has already provided different clear documentation on how to host Medusa Server in different hosting servers.

You check [Medusa Server Deployment Guide](https://docs.medusajs.com/deployments/server/) to deploy your backend to any server of your choice.

### Deploying Medusa Admin Panel

You can easily deploy your Medusa Admin on Netlify by following Medusa [Admin Deployment Guide](https://docs.medusajs.com/deployments/admin/deploying-on-netlify).

### Deploying Next.js Storefront

In deploying your Next.js Storefront, you will handle this using Vercel.

Deploying Next.js storefront in Vercel can be done using [Vercel CLI](https://vercel.com/guides/deploying-nextjs-with-vercel#vercel-cli) or [Vercel for Git](https://vercel.com/guides/deploying-nextjs-with-vercel#vercel-for-git). For this tutorial, you can deploy using Vercel for Git, using the steps below as a guide.

> Note: You should have the backend URL ready because it will be needed.

1\.  Push your storefront project to a GitHub repository.
2\.  On your Vercel dashboard, click on the *import* button to import a new project.

![](/images/jcmgY2Pgm_.png)

3\.  Enter the name of your project in the *Project Name* field.

![](/images/uG9ZZvVum8.png)

4\.  Add the environment variables: `NEXT_PUBLIC_MEDUSA_BACKEND_URL` and `NEXT_PUBLIC_STRIPE_KEY`.

![](/images/h7.png)

When configuring your environment variable, ensure you set the backend URL with your production server (for example:  `https://my-medusa-server.com`) and your live Stripe public key.

5\.  Click on *deploy* to start the deployment process.

![](/images/h5.png)

Once the deployment process is completed, your storefront is ready. You can visit the domain link to view your storefront.

> Note: Before testing, ensure you update your server’s `STORE_CORS` environment variable with the new Vercel URL to avoid CORS issues. You can check [CORS configurations](https://docs.medusajs.com/usage/configurations#storefront-cors) on Medusa documentation.

## Conclusion

In this tutorial, you learned how to build a Vercel ecommerce site using Next.js, Medusa,  and Stripe. You’ve gone through the steps of setting up Medusa Server, Medusa Admin, and Medusa Next.js Storefront.

You can also add various features to your store, like [Algolia](https://docs.medusajs.com/add-plugins/algolia) search engine service, [Mailchimp](https://docs.medusajs.com/add-plugins/mailchimp) email marketing service for newsletters, [Segment](https://docs.medusajs.com/add-plugins/segment) data platform for collecting analytics, and many more.

You can learn more about Medusa commerce engine from [Medusa’s Documentation](https://docs.medusajs.com/introduction).

> Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via [Discord](https://discord.gg/medusajs).



A headless ecommerce CMS (content management system) allows developers enough flexibility to create and manage content for their online stores without the need for a traditional, monolithic CMS.

In a headless CMS, the frontend and the backend are decoupled, meaning that the frontend (the user interface) and the backend (the content management and storage) are managed and developed independently.

This allows developers to use any technology they want for the frontend, such as React, Angular, or Vue.js, and to create a flexible and scalable ecommerce website.

This article explains the benefits of using headless CMS, lists some of the top headless CMS platforms, and explores combining headless CMS with ecommerce platforms.

> **What is Medusa?** Medusa is a composable commerce engine that facilitates for developers to build ecommerce systems as components. Medusa provides a plugin system that allows developers to integrate third-party CMS services like the ones mentioned in this article within their ecommerce ecosystem.

## Benefits of Headless CMS

A headless CMS is a type of CMS that separates the backend system that stores and manages the content from the frontend system that presents the content to the user.

> Suggested Read: [Headless Architecture Explained to a 5-Year-Old](https://medusajs.com/blog/headless-architecture/)

In this architecture, the CMS functions as a content repository that can deliver content through APIs (application programming interfaces) to any number of frontend systems, such as web or mobile applications, smart speakers, or IoT (Internet of Things) devices.

Some benefits of using a headless CMS include:

*   Flexibility: Because a headless CMS does not have a frontend user interface, it allows for greater flexibility in terms of how the content can be displayed. This means that the same content can be used on multiple platforms or devices, such as web applications, mobile apps, and digital signage.
*   Separation of Concerns: with a decoupled CMS, the content management and display functions are separated, allowing for more flexibility and ease of development.
*   Performance: the content is generally delivered to the client through an API, which is faster and more efficient than rendering the content directly on the server.
*   Scalability: the headless CMS system can be designed and optimized for specific tasks, such as content management, and can be scaled independently of the frontend display.



## 1. Strapi

![](/images/l5moy_RF_2.png)

[Strapi](https://strapi.io) is an open source, headless CMS designed to build and manage online stores. It is built on Node.js and offers a flexible and scalable way to create and manage content for Ecommerce websites.

With Strapi, developers can create custom content types and manage the data for their online stores using a powerful, user-friendly interface.

> Suggested Read: [Create an Ecommerce Storefront with Medusa, Strapi, and Remix](https://medusajs.com/blog/ecommerce-storefront-medusa-strapi-remix/)

Strapi also includes features such as a robust plugin system, built-in security and user management, and integration with popular ecommerce platforms such as Shopify and **Medusa**.

It is a popular choice among developers looking for a headless CMS for their ecommerce projects.

### Features

1.  Flexible Content Types: Strapi allows you to create and manage custom content types, including rich text, media, and other types of data.
2.  GraphQL and REST APIs: Strapi provides both GraphQL and REST APIs for accessing and manipulating content, allowing you to deliver content to any platform or device that can consume these APIs.
3.  User Management and Permissions: Strapi includes built-in user management and permissions, allowing you to control who can access and modify your content. This can be useful for building applications with multiple user roles or for implementing access control rules for specific content.

Check out [Strapi’s documentation](https://docs.strapi.io/developer-docs/latest/getting-started/introduction.html) to learn more about its features.

## 2. Contentful

![](/images/ASFppALMAr.png)

[Contentful](https://www.contentful.com/) is a headless CMS that can be used for ecommerce websites. It allows developers to create, manage, and distribute content for their online stores using a flexible and scalable content model.

With Contentful, developers can create and manage their content using an intuitive web-based interface, and access that content using a powerful API. This allows them to create rich and engaging user experiences for their eCommerce websites, without being limited by the constraints of a traditional, monolithic CMS.

> Suggested Read: [How to Connect Medusa and Contentful](https://medusajs.com/blog/medusa-contentful-headless/)

Contentful is a popular choice for headless ecommerce CMS because it is flexible, scalable, and easy to use. It also integrates seamlessly with a wide range of ecommerce platforms and tools, making it a versatile solution for building and managing online stores.

### Features

1.  Flexible Content Modeling: Contentful allows you to create custom content types and manage their fields and relationships, allowing you to structure your content in a way that fits your needs.
2.  Multi-language Support: Contentful provides built-in support for multiple languages, allowing you to manage and deliver content in multiple languages from a single platform.
3.  Rich Media Support: Contentful provides support for a wide range of rich media types, including images, videos, audio, and other types of assets. This can be useful for creating engaging and immersive content experiences.

Learn more about Contentful and its features in [its documentation](https://www.contentful.com/developers/docs/tutorials/general/get-started/).

## 3. Sanity

![](/images/jAFlWr-BDk.png)

[Sanity](https://www.sanity.io/) is a headless CMS that can be used to build and manage ecommerce websites. It is a flexible and scalable platform that allows developers to create custom content structures and manage their online stores without the constraints of a traditional, monolithic CMS.

With Sanity, developers can use any technology they want for the frontend, such as React, Angular, or Vue.js. They can easily integrate their ecommerce website with other tools and services, such as payment gateways and inventory management systems.

Sanity also provides real-time collaboration features, so multiple team members can work on the website at the same time.

### Features

1.  Custom Schema Builder: Sanity allows you to design and customize the structure of your content by creating custom content types and defining their fields and relationships. This enables you to organize and manage your content in a way that meets your specific requirements.
2.  Real-time collaboration: Sanity includes built-in collaboration tools, allowing multiple users to work on the same content in real time. This can be useful for teams working on content-driven projects.
3.  Flexible APIs: Sanity provides flexible APIs for accessing and manipulating content, allowing you to deliver content to any platform or device that can consume these APIs. This can be useful for building content-driven applications that need to support a wide range of use cases.

Learn more about Sanity and its features in its [documentation](https://www.sanity.io/docs/getting-started-with-sanity).

## 4. DatoCMS

![](/images/nkXS4zinc8.png)

[DatoCMS](https://www.datocms.com/) is a headless content management system (CMS) that allows developers to create and manage content for their websites and applications. It is a popular choice for ecommerce websites because it provides a flexible and scalable way to build and manage online stores.

With DatoCMS, developers can create and manage the content for their ecommerce websites without the need for a traditional, monolithic CMS.

DatoCMS also provides a number of features and tools that are useful for ecommerce websites. This includes support for multiple languages, customizable content models, and integrations with popular ecommerce platforms like Medusa.

### Features

1.  Customizable Content Modelling: DatoCMS allows you to create custom content types and manage their fields and relationships, allowing you to structure your content in a way that fits your needs.
2.  Multi-language Support: DatoCMS supports multiple languages, allowing you to manage and deliver content in multiple languages via a single platform.
3.  Collaboration and Permissions: DatoCMS includes collaboration tools and user permissions, allowing teams to work together on content and control who can access and modify content.

Check out [DatoCMS’s documentation](https://www.datocms.com/docs) to learn more.

## 5. Payload CMS

![](/images/pFfbUzOE00.png)

[Payload CMS](https://payloadcms.com/) is an open source headless CMS and application framework. It provides tools and features for managing and accessing content through APIs, such as a Mongo database, REST and GraphQL APIs, authentication, access control, file storage, and an admin UI.

Headless CMS systems like Payload offer benefits like flexibility, separation of concerns, performance, and scalability. You can use Payload to develop and manage web applications, mobile apps, and other types of content-based applications.

### Features

1.  Mongo Database: Payload CMS uses a Mongo database to store and manage content, allowing for flexible and scalable data management.
2.  REST and GraphQL APIs: Payload CMS provides both REST and GraphQL APIs for accessing and managing content. It enables you to deliver content to various platforms that are compatible with these APIs.
3.  User Management and Access Control: Payload CMS provides inbuilt user management and access control; with these, you can decide who has access to your platform. It is useful for building applications with multiple user roles or for implementing access control rules for specific content.

Check out [Payload’s documentation](https://payloadcms.com/docs/getting-started/what-is-payload) to learn more about it.

## Combining Headless CMS with Headless Commerce

Headless CMS and headless commerce are both approaches to managing and delivering content and ecommerce functionality, respectively, through APIs instead of traditional user interfaces.

Combining a headless CMS platform with a headless commerce platform like Medusa leads to many benefits including:

1.  Rich Content Management: Although Medusa provides basic CMS needs, using a dedicated headless CMS platform with Medusa provides more advanced CMS functionalities and capabilities such as localization and versioning.
2.  Different Interfaces for different teams: Teams that manage the content of the store can use the headless CMS’s dashboard, whereas ecommerce teams can focus on using the [Medusa admin](https://docs.medusajs.com/admin/quickstart).
3.  Better SEO: CMS platforms allow you to customize information that improves your ecommerce storefront’s SEO, including customizing the URL structure or a product’s meta data.

Medusa has two plugins that you can use to integrate headless platforms:

*   An official [Contentful Plugin](https://docs.medusajs.com/add-plugins/contentful/).
*   A community [Strapi Plugin](https://docs.medusajs.com/add-plugins/strapi/).

## Conclusion

A headless CMS is a content management system that allows you to manage and organize the content of your website without being tied to a specific frontend design. This allows for greater flexibility in the design and functionality of your website.

When combined with composable or headless ecommerce platforms like [Medusa](https://medusajs.com/), you’ll get many benefits related to flexibility, rich content management which improves your SEO, and more.

> Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via [Discord](https://discord.gg/F87eGuwkTp).



Explore the advantages of a headless CMS and discover the top 5 options for your ecommerce website.

Top 5 Headless CMS for Your Ecommerce Site

5 React-Based Tools for your Ecommerce Stack

Ecommerce has become more popular as businesses turn to online sales to increase their reach. JavaScript and React are among the most popular stacks for building ecommerce applications.

React is a JavaScript library for designing user interfaces. It enables developers to produce reusable, modular components that are simple to integrate into bigger applications. It's a wonderful option for creating ecommerce apps because it makes it easier to create dynamic and complicated user interfaces.

This article highlights 5 React-based tools for your ecommerce stack. The ease of use and adaptability of these technologies make them popular among developers. They can assist you in creating effective and sophisticated ecommerce websites and applications.

> **What is Medusa?** [Medusa](https://github.com/medusajs/medusa) is a composable commerce platform that provides essential ecommerce components as modular building blocks.

## **Benefits of Using React** **for Ecommerce**

Using [React](https://reactjs.org/) tools have a number of benefits.

*   Improved Performance and User Experience: React is a popular tool used to create user interfaces and websites. It speeds up updates to the real DOM by using a virtual Document Object Model, resulting in a better user experience. This is especially important for ecommerce websites, as a slow-loading page may discourage users from making a purchase.
*   Reusable Components: With React, you have access to reusable components and React developer tools, which can be used across different pages and features of the website or commerce app. This makes development with React and React projects more efficient and easier to maintain.
*   Strong Community Support: There are many different plugins and libraries available for use with React-based ecommerce projects. This offers a great variety of options for users, and developers can quickly add new functionality to their projects.
*   Easy Integration with Other Technologies: React is designed to be easily integrated with other technologies, making it a good choice for ecommerce projects that may require integration with other systems or platforms. You can integrate payment gateways, shipping programs, customer relationship management (CRM) programs, and others.
*   SEO-Friendly: React is also SEO-friendly, which is crucial for ecommerce websites whose traffic is largely derived from search engines. React's virtual DOM enables quicker rendering times, which can enhance the site's search engine indexing.

## **5 React-Based Tools for Your Ecommerce Stack**

### **Medusa React**

![](/images/Gqa-IcLBQ9.png)

[Medusa React](https://docs.medusajs.com/medusa-react/overview/) is a library that allows developers to build custom React storefronts and React-based frameworks that interact seamlessly with the Medusa backend. It provides a set of components, utilities, and hooks to facilitate this interaction and makes use of the react-query library for server-side state management.

Medusa React is used for [building ecommerce websites or applications](https://medusajs.com/blog/creating-react-native-ecommerce-app-with-medusa/). It uses the Medusa backend for tasks such as managing orders, processing payments, and tracking inventory.

### **Advantages of Using** **Medusa React** **for Ecommerce**

*   Custom Storefronts: By using Medusa React, you can build custom storefronts that are tailored to your specific needs and requirements. This is particularly useful if you have specific requirements or constraints that cannot be met by an off-the-shelf solution. [Next.js](https://nextjs.org/commerce) and [Gatsby](https://www.gatsbyjs.com/plugins/@gatsbystorefront/gatsby-theme-storefront-shopify/) are good examples of custom storefronts you can build with Medusa React
*   Hooks for Fetching Data and Performing Mutations: Medusa React exposes a set of hooks for fetching data (queries) and performing mutations on the server side. These hooks are built on top of react-query's `useQuery` and `useMutation` hooks and allow developers to easily access data from the Medusa backend and perform server-side effects.
*   Server-Side State Management: The library uses `react-query` as a solution for server-side state management, which can help you to manage complex data structures and relationships between different components in your storefront.
*   Utility Functions for Displaying Localized Money Amounts: Medusa React provides utility functions for converting and displaying money amounts in a localized format. This can be useful for ecommerce applications that need to display prices and other monetary values to users in different regions.
*   Robust and Well-Supported: Medusa React is a library that is well-maintained and supported by Medusa’s core team. This means that you can count on it to work as expected and receive updates and bug fixes over time. This gives you the confidence to use it in your projects.

### **Next.js**

![](/images/qIq6j0efde.png)

[Next.JS](http://nextjs.org/) is a popular framework for building [server-rendered](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props) React applications; it supports [static-site rendering](https://nextjs.org/docs/basic-features/data-fetching/get-static-props) and [client-site rendering](https://nextjs.org/docs/basic-features/data-fetching/client-side). It is designed to make it simple for developers to build apps or create react apps that are fast and can be rendered on both the server and the client.

The complexity of server rendering and code splitting is handled by Next.js, allowing developers to concentrate on creating their applications.

### **Advantages of Using Next.js for Ecommerce**

*   Improved Performance and User Experience: One of the main advantages of using Next.js for ecommerce is its ability to deliver a fast and smooth user experience using server-side rendering. Here, the initial render is done on the server rather than the client, leading to a shorter website load time.
*   SEO-Friendly: Next.js is both SEO-friendly and easy to use, making it perfect for creating server-rendered React applications. Additionally, its pre-rendering feature helps with SEO as the HTML for the page is generated on the server and sent to the client. This makes it easy for search engines to access and index the content.
*   Automatic Code Splitting: Next.js has automatic code splitting, which divides the JavaScript bundle into smaller pieces that may be loaded as demanded. This can improve the performance of the site, as the client does not need to download the entire JavaScript bundle upfront.
*   Serverless Deployment: Next.js makes application deployment to serverless platforms like Vercel, AWS Lambda, or Google Cloud Functions simple. This can be a more affordable option than maintaining their own servers, as they only pay for the resources they use.

### **Stripe Elements**

![](/images/efowlMwOp6.png)

[Stripe Elements](https://stripe.com/en-gb-us/payments/elements) is a set of pre-built UI components that make it easy to add secure and custom payment forms to a website or application. It is built on top of the Stripe API, which allows developers to process payments and manage customer information.

React and Stripe work great together, and Stripe Elements makes it easy to add payment processing to your website or application.

### **Advantages of Using Stripe Elements for Ecommerce**

*   Secure Payment Processing: Having the ability to accept payments securely is one of the key benefits of using Stripe Elements for ecommerce. Stripe is a well-known, trusted payment gateway with strong security measures in place to protect customer information.
*   Custom-Made Payment Forms: Using Stripe Elements, payment forms can be customized to match the branding and look of a website or application. It can make the payment process more convenient for customers, which in turn enhances their experience.
*   Strong Community Support: Since Stripe has an active developer community, Stripe Elements users have access to a variety of information and support. It comes with plugins and frameworks that can be quickly added to React-based ecommerce projects. It also has a robust ecosystem of tools and services.

### **Gatsby**

![](/images/7WOGAZGoVh.png)

[Gatsby](https://www.gatsbyjs.com/) is a popular open source framework built on react that helps developers build fast, modern websites and applications. Gatsby provides several rendering options.

It provides a [deferred static generation](https://www.gatsbyjs.com/docs/how-to/rendering-options/using-deferred-static-generation/), which builds a page the first time a user requests it. It also provides [server-side rendering](https://www.gatsbyjs.com/docs/how-to/rendering-options/using-server-side-rendering/) that generates pages on the fly with data fetched each time a user visits the page and static site generation that generates pages at build time.

By employing a static site generator approach, rather than relying on server-side rendering or client-side rendering, it builds a totally static HTML website at build time. Gatsby websites and apps are fast and efficient because they can be served from a Content Delivery Network without a server.

### **Advantages of Using Gatsby for Ecommerce**

*   Improved Performance and User Experience: Gatsby has the ability to deliver a fast and smooth user experience. Websites and applications can be served from a CDN thanks to Gatsby's static site generator technique, which enables speedy delivery to users wherever they may be.
*   Easy Integration with Ecommerce Platforms and APIs: With Gatsby, integrating with a variety of ecommerce platforms, tools and APIs is simple, including options like Medusa and Stripe. As a result, developers don't have to worry about creating their own backend or integrating with various payment methods.
*   SEO-Friendly: Gatsby websites and applications are SEO-friendly due to being built with static HTML and easily crawled by search engines. Gatsby automatically offers drop-in support for server rendering of metadata which is added to the static HTML pages, improving the site's ranking in search engines.
*   Scalability: Gatsby is a popular tool for ecommerce websites that handle a lot of traffic. It is static, meaning it doesn't need to be updated frequently, and it is cheap to operate. This makes it a great choice for growing companies.

### **Algolia React InstantSearch**

![](/images/AZBhgFeZ8h.png)

[Algolia React InstantSearch](https://www.algolia.com/) is a React library that allows you to quickly build a search interface for your ecommerce website. It is a component of the robust search engine, Algolia Search API. This library can assist you in creating quick, accurate, and user-friendly search experiences for your customers.

You can use React InstantSearch's pre-built components to create a search bar, search results, filters, shopping carts, product buttons, add-to-cart buttons, and other features. Algolia React InstantSearch can also be used with other search engines like MeiliSearch.

### **Advantages of Using Algolia React InstantSearch for Ecommerce**

Using Algolia React InstantSearch for your ecommerce stack has a number of benefits:

*   Fast Search Results: Algolia is known for its fast search results, which is crucial for ecommerce websites. Customers expect fast and relevant search results, and Algolia delivers on that front.
*   Custom-Made Search Experience: React InstantSearch allows you to customize the search experience to fit your brand and business needs. To provide your consumers with a special search experience, you can either design your own react components or choose from a variety of pre-built ones.
*   Integration with Other Algolia Products: React InstantSearch integrates with other Algolia products, such as Algolia Analytics, which allows you to track the performance of your search experience and make data-driven decisions.
*   Ease of Use: React InstantSearch is simple to use and doesn't need much setting up. You can quickly start using a search interface thanks to its simple integration into an existing application.

## Conclusion

React tools provide advantages for developing and scaling ecommerce websites. They are simple to use and may assist you in developing quick, secure, and user-friendly websites. These websites offer consumers a seamless online experience.

If you're looking to take your ecommerce business to the next level, then you'll want to check out these React ecommerce tools. These tools can help you create a top-notch website or optimize an existing one, which can lead to increased sales.

With a composable ecommerce platform like Medusa, you can expect more flexibility and scalability in terms of your user interface and underlying architecture, which can lead to better performance and growth opportunities for your ecommerce business in the long run.

Get started with Medusa by following [this quickstart guide](https://docs.medusajs.com/usage/create-medusa-app/).

> Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via [Discord](https://discord.gg/F87eGuwkTp).



The growth of the ecommerce industry has been on the rise over the last few years. What’s the catalyst for this growth? The answer is straightforward: value provision and problem-solving.

Ecommerce provides easy access to goods and services, which has helped companies tap into a large customer base who were lacking this service. It may sound simple, but without a functional business infrastructure, you'll quickly lose customers or potential customers and go out of business.

In this article, you will learn why it's important for your business to have a well-defined ecommerce infrastructure.

## What is Ecommerce?

Ecommerce involves buying and selling goods and services online. It can happen between businesses (B2B), between a business and a consumer (B2C), between consumers (C2C), or between a consumer and a business (C2B).

Some examples of ecommerce businesses are Amazon, eBay, Alibaba, and Walmart.

## What is an Infrastructure?

Infrastructures are systems needed by a business to operate smoothly. It is a key component of any business, as it ensures growth and sustainability.

This could be software such as operating systems, applications, and security tools, as well as hardware, such as servers, routers, etc.

It also includes the people, procedures, and guidelines that support the infrastructure.

## What are Ecommerce Infrastructures?

Ecommerce infrastructures are hardware and software components required to operate and maintain an online store.

They are the foundation upon which ecommerce businesses are built, empowering businesses to sell their products and services over the internet.

They include the hardware, software, and services needed to manage online transactions and process orders.

## Components of an Ecommerce Infrastructure

Below are some infrastructures all ecommerce businesses should have:

### Web Servers

A web server is a hardware or software that stores data and communicates it to users through HTTP (Hyper Text Transfer Protocol) request. It is in charge of hosting websites, handling visitor requests, and supplying web page content.

Web servers use scripting languages like PHP, ASP, and JavaScript to generate dynamic web pages.

A web server in ecommerce is a computer that stores and serves web pages to users over the internet. They allow customers to access product information, view prices, and purchase goods.

### Database Servers

A database server is a computer system that stores, manages, and retrieves data from a database. It is the backbone of an ecommerce system, as it hosts the databases used for online transactions and stores customer information.

It is also in charge of effectively managing the data's organization and security. Database servers also provide expansion, ensuring websites can handle large amounts of data.

### Payment Processing System

A payment processing system is a system used to process financial transactions in an ecommerce system. It lets merchants receive payments from customers, securely process the payments, and transfer the funds to the merchant’s bank account.

This system is also part of the ecommerce functionality responsible for confirming clients’ identities and providing a secure platform for consumers to make their purchases.

This handles payments from different sources, such as debit and credit cards, PayPal, Apple Pay, and Google Pay.

### Content Delivery Network (CDN)

A content delivery network (CDN) is a network of servers spread out across different locations. It provides online content to users based on their geographic location.

CDNs are used to improve website performance and deliver a better user experience. In ecommerce, CDNs are used to provide online content such as product photos, videos, and other information to customers faster.

### Security and Fraud Prevention

Protecting ecommerce websites from cyber-attacks and fraudulent activities is important. To protect customers, use fraud protection technologies like SEON, Signifyd, Kount, Cybersource, and more.

For the safety and security of customers and their data, ecommerce security and fraud prevention are crucial.

### Load Balancing

This is a process for distributing incoming traffic and requests across a group of servers. It helps to improve the performance of an ecommerce system. This gives no room for failure in the system and ensures the system can handle the increased demand from online shoppers.

It also helps to prevent any server from becoming overloaded with requests and also helps to improve customers' shopping experience.

### Backup System

This is a system that stores data, such as customer information, routinely. It helps restore the system to the last saved state in the event of a system failure.

This ensures that the business can quickly and easily recover from any potential data loss. Backup systems can also be used to transfer data from one system to another, allowing for greater flexibility.

### Customer Service

Customer service in ecommerce is providing support to customers before, during, and after a purchase. This helps customers find what they need, provides shipping and delivery info, and also resolves order issues. This is critical for any ecommerce business.

### Inventory Management

This is the practice of tracking and controlling the inventory of a business’ product. It includes maintaining stock levels, ordering new products, and tracking sales. It is important to keep accurate records of inventory to ensure customer satisfaction and product availability.

Inventory management helps protects against loss due to theft or damage and can help identify areas of opportunity to improve efficiency.

### Shopping Cart

This is more of an ecommerce feature than a component of an infrastructure. It allows customers to add products to their carts, views their orders, and check out. It is an essential part of any online shopping experience, as it enables customers to quickly and easily purchase products.

Item selection, item quantity adjustments, payment selection, and order submission are common features of cart functionality. This can easily be integrated with the help of ecommerce solutions like Medusa.

### Shipping and Fulfillment

In ecommerce, shipping and fulfillment refer to the process of receiving, processing, and shipping orders to customers. It also includes shipping tracking and order fulfillment.

Shipping and fulfillment are vital for any online business to be successful. This makes sure customers get their orders quickly and are happy with them.

Some examples of providers that offer this service, ShipBob, ShipStation, Fulfillment by Amazon (FBA), Deliverr, etc.

## Advantages of a Good Ecommerce Infrastructure

1.  Increased Sales: By providing customers with a better shopping experience, a good ecommerce infrastructure can help to increase sales. Customers will be more likely to complete purchases if they find the process to be smooth and easy.
2.  Lower Running Costs: A well-designed ecommerce infrastructure can help to reduce running costs. By improving the buying process, businesses can save time and money processing orders and satisfying client requirements.
3.  Improved Security: A good ecommerce infrastructure can help to ensure the security of customer data and transactions. By investing in strong security measures, businesses can protect their customers’ information and help to prevent fraud.
4.  Greater Flexibility: A good ecommerce infrastructure can assist organizations in scaling their operations as they grow. Businesses should ensure they are well-prepared for future expansion by investing in infrastructure that can manage greater traffic and revenue.

## Using Medusa as an Ecommerce Platform

[Medusa](https://github.com/medusajs/medusa) is an open source ecommerce platform. Its composable architecture is made of 3 main components: the headless server, the storefront, and the admin.

Traditional monolithic architecture can be limiting in terms of what can be added or integrated into the infrastructure.

Medusa’s architecture is a key advantage for an ecommerce infrastructure. Its abstract layers give businesses and developers the flexibility to decide what are the best components to use in their infrastructure.

Businesses can utilize the best-in-line tools and services in their infrastructure to build a scalable platform with essential ecommerce features.

## Conclusion

Ecommerce infrastructure encompasses a wide range of systems and technologies that work together to support online businesses. These include web services, database servers, payment processing systems, and more.

These technologies are essential for enabling businesses to operate smoothly and effectively in the digital world. By investing in robust ecommerce infrastructure, businesses can improve their operations, increase their efficiency, and better serve their customers.

> Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via [Discord](https://discord.gg/F87eGuwkTp).



Ecommerce Infrastructure: What is it

Importance of Optimizing Internal Search in Ecommerce Websites

While the value of external search optimization (SEO) is widely known, many ecommerce websites overlook the value of the hidden gem that is internal search engines. [Only 15% of businesses](https://neilpatel.com/blog/site-search-killing-your-conversion/) dedicate resources into perfecting the site search. This is worrying as [68% of customers](https://www.forrester.com/report/Googleize+Your+SiteSearch+Experience/-/E-RES124541) do not return to an ecommerce website that provided a bad search experience.

When building an internal search engine, businesses should provide a search experience that matches their products and audience. This requires configuring your search engine’s ranking rules, synonyms, faceted search, and more.

When we designed our Search APIs at [Medusa](https://github.com/medusajs/medusa), we abstracted the search functionalities to allow developers and businesses to either implement custom logic, or, more commonly, use search services like [MeiliSearch](https://docs.medusajs.com/add-plugins/meilisearch) or [Algolia](https://docs.medusajs.com/add-plugins/algolia). These services continuously optimize their search functionalities to ensure that your ecommerce website provides a good search experience.

This article explains some tips for configuring and optimizing your search engine to provide a better search experience for your customers.

> **What is Medusa?** [Medusa](https://medusajs.com/) provides bespoke, modular and open commerce infrastructure for developers. Medusa’s different components and APIs are built in abstract layers, making it easier for developers to customize the core functionalities for different business use cases.

## Some Search Statistics

If you’re unsure of the importance of internal search engines, here are some statistics that emphasize their effect on ecommerce sales:

*   [43% of customers](https://www.forrester.com/report/MustHave+eCommerce+Features/-/E-RES89561) on retail ecommerce websites go straight to the internal search engine.
*   Internal search engines are widely used by the most valuable customers; customers that use the internal search engine are [2.4 times more likely to make a purchase](https://resources.algolia.com/ecommerce/40-stats-on-e-commerce-search-and-kpis).
*   Customers that use the internal search engine [spend 2.6 more times than those who don’t search](https://resources.algolia.com/ecommerce/40-stats-on-e-commerce-search-and-kpis).
*   [39% of customers](https://www.thinkwithgoogle.com/marketing-resources/micro-moments/meet-needs-i-want-to-buy-moments/) are influenced to make purchase by relevant search results.

## Tips to Optimize Internal Search Engines

### Ranking Rules

Ranking rules are used to decide which search result shows first. A basic approach would show the results having the same exact words in the name of the product first. Although this is fine, but in a lot of cases you must take into account other attributes such as the category of the product or its stock amount.

You might also want to boost the ranking of some products over others due to a marketing strategy. For example, you might want to show products having a discount higher than those without a discount.

Defining your ranking rules can help customers find exactly what they need and influence them to make a purchase.

### **Typo Tolerance**

Customers often make typos while searching. If a search engine shows them results based on their exact query, they’ll typically land on no results pages, which leads them to making no purchase.

An internal search engine must be optimized to detect and resolve typos, providing the customer with the results they’re looking for. Most search engine services utilize machine learning to ensure typo tolerance and provide a better search experience.

### Search Analytics

Search analytics can be a minefield of valuable information about your customers. It can help you understand what are the most searched for items. Coupled with other analytics you have related to purchases, you can figure out which of these items result from search results and, in turn, boost their ranking.

Search analytics can also help you figure out which queries lead to no search results. This can be useful to understand what type of products your customers are looking for in your ecommerce website. You can also utilize this to define related results for these search queries.

### Synonyms

Often, multiple words have a similar meaning. For example, some customers might use “shirt” and “t-shirt” interchangeably. This can also be affected by different customer cultures or locations.

A good search engine should provide synonyms that would allow the customers to land on the same search results, despite which synonym they use. Obviously, it would be difficult to cater to every possible synonym. You can utilize here the search analytics mentioned earlier to figure out what synonyms are necessary to define.

### Parsing Search Queries

According to [Google’s 2022 Year in Review](https://www.thinkwithgoogle.com/consumer-insights/consumer-trends/trending-visual-stories/2022-year-in-search/), there’s a +75% year-on-year (YOY) increase in search queries related to saving money, such as “cheap electric cars”. Some customers might use other search queries, such as “shirts under $20”.

Although it might not be highly necessary to account for these search queries, parsing them and showing the customer exactly what they need can show customers that you understand them. Consequently, it can lead to a better search experience.

### Faceted Search

Faceted search enables users to narrow down their search queries by providing filters that allow them to be more specific.

For instance, by using this search feature, someone looking for a Batman shirt can filter out books and videos about the superhero and focus the search on the desired product.

Filters can be as basic as showing different available categories, and can extend to adding more advanced choices such as material, brand, colors, sizes, and more.

### A/B Testing

A/B testing is the process of comparing the outcome or analytics two different versions of a feature or interfaces. In the context of internal search engines, A/B testing can be used to figure out which configurations drive more sales.

For example, if you have two ranking rules, and you’re unsure which one would be better for your customers, you can use A/B testing to figure that out.

There are many ways to run A/B testing. Algolia provides [steps to run an A/B test for search relevance](https://resources.algolia.com/a-b-testing/5-ways-to-a-b-test-your-search-for-relevance). Search services may provide this functionality differently.

### Optimized No-Results Page

Despite all the configurations and optimizations you may put in place to improve your internal search engine, it’s still inevitable that the customer might land on a no-results page. Instead of trying to avoid the reality of a no-results page, you can embrace and utilize it for other opportunities.

A no-results page can be optimized to include the following:

*   Recommended results: You can show results for a collection of products that drive sales. For example, discounted products or best-selling products.
*   Suggested queries: You can show queries that are similar to the customer’s query, or queries you’re sure will provide many results.
*   Personalized suggestions: You can use analytics related to the customer to provide suggestions. For example, you can show results based on the customer’s previous search results. You can also show results that are popular in the customer’s region or location.

## Search Metrics to Measure

Search metrics and analytics can be key in optimizing your internal search engine. They can help you better understand your customer and decide on new configurations if necessary.

Some search metrics that you should measure are:

*   **Most Searched Products:** this metric can help you understand what your customers look for the most in your website. It can be an opportunity to find new products for your store.
*   **Searched Products Leading to Highest Conversions:** just because a product is searched for the most does not mean it’s the product that leads to conversion and revenue. Combining the Most Searched Products metric with the Conversion metric can be useful to decide on ranking rules.
*   **New Searches:** new searches wouldn’t rank high in the Most Searched Products metric, but they can provide useful insights to the new and upcoming trends in your industry.
*   **No Result Searches:** this metric shows which search queries lead to no-result pages. This can be used to define synonyms or search suggestions.

## Conclusion

Optimizing your internal search engine can be a powerful tool to improve your ecommerce sales. By carefully configuring your ranking rules, typo tolerance, synonyms, faceted search, and parsing search queries, you can provide a better search experience for your customers.

Additionally, by measuring search metrics such as Most Searched Products, Searched Products Leading to Highest Conversions, New Searches, and No Result Searches, you can better understand your customer’s needs and optimize your search engine accordingly.

By implementing these tips, you can be sure of providing an improved internal search engine experience for your customers.

Medusa is a composable commerce engine that allows you to integrate whichever search engine you find most suitable for you. If you’re interested in Medusa, check out the [quickstart guide](https://docs.medusajs.com/usage/create-medusa-app).


Improve your ecommerce website's internal engine and enhance customer experience by optimizing your search engine.

What I Learned From Studying 500 B2B Ecommerce Sites

I thought B2B ecommerce sites would be world champions of managing product categorizations due to their often large and complicated product assortments. I was entirely wrong.

Many shops seem to have neglected to put energy into product categorization altogether, which is quite alarming given that this is the first main navigation mechanism for many B2B sites aside from their search bars.

Yet, after studying the setup of more than 500 B2B ecommerce sites as part of our B2B launch at [Medusa](https://medusajs.com/b2b-commerce-platform/), I did recognize a pattern of best (and worst) practices when working with product categorization in B2B ecommerce.

Below is my recollection shared in 5 simple ways the best B2B companies approach product categorization:

*   **#1 - MECE sub-categories**: Product sub-categories should be Mutually Exclusive and Collectively Exhaustive.
*   **#2 - Rule of three:** Have at maximum three layers of product categories showcased on your site (especially in the dropdown navigation).
*   **#3 -** **Three seconds to comprehend**: Systemize and structure your categories in a way that takes less than 3 seconds to comprehend.
*   **#4 - KISS navigation:** When your catalog is large and diverse, keep the navigation simple and clean with to-the-point category names.
*   **#5 - Cross-categories with purpose:** Use cross-categories when you purposefully want to emphasize a trait across many categories

> ***What is Medusa?*** [***Medusa***](https://medusajs.com/) *provides bespoke, modular and open commerce infrastructure for developers. If you want to build nested product categories with Medusa, stay tuned for our next Product Releases.* [*Read more*](https://medusajs.com/blog/our-2023-roadmap/)*.* 

## What is a product category?

Let us quickly define a product category. By Product Category, I refer to **a group of similar products that share related characteristics.** The category label sums up the product underneath it.

For example, the category of **Car tires** could contain both winter and summer tires in different sizes. Tires could also be a sub-category of a larger category referring to **Cars** of a car manufacturer shop.

## The good, the bad, and the product-category-mesh

The way that most B2B pages choose to categorize products can best be described as a product-category-mesh.

Many shops, take the first step of bundling their products into categories (Hurrah!). But from that point on they just bundle it all together in one big mesh, leaving it to the customer to navigate their way through the assortment.

Sometimes I saw this leading to the creation of +1,000 categories with no clear linkages that made it easy for the customer to navigate unless using the search function.

In many instances, this random bundling led to category overlaps, making it unclear for users where and how to start.

Take the example below from a tool manufacturer and try to figure out for yourself whether the *electrical saw* was stashed under **Electrical**, **Power Tools**, **Hand Tools**, **Cutting** **Tools** or **Machinery**.

![](/images/YXTVuSdJ_Q.png)

If this is the worst practice, let us see how some companies managed to turn this for the better.

## 5 Rules for Best Product Categorization

### #1 - MECE sub-categories

The above example quickly becomes a problem for B2B shops that have large and complex product catalogs with several thousand products.

One effective way some ecommerce sites avoided the mesh was to bundle all categories into main, sub, and sub-sub-… categories.

These categories must be [**MECE**](https://blog.felix-seifert.com/structure-with-mece-principle/) (**M**utually **E**xclusive, **C**ollectively **E**xhaustive). Meaning that categories cannot overlap (mutually exclusive) while they still have to cover the full product assortment (collectively exhaustive). See example below.

![](/images/5qlu23pK71.png)

[**Indiamart**](https://my.indiamart.com/) applies this type of segmentation to its product assortment. Despite an assortment of several million products, they still manage to make it easily digestible by breaking it down into six distinguishable **business areas** (Building & Construction, Electronics & Electrical, Drugs & Pharma etc…).

Beneath that, they further segment each business area into high-level **product categories** (e.g. Solar & Renewable Energy Products, Office Automation Products & Devices) and then further down into individual **product categories** (e.g. Solar Panels and Water Pumps).

![](/images/l-_R144EEM.png)

### #2 - Rule of 3

When trying to make this type of product (sub-)categorization, the golden rule seems to be **3**. For the vast majority of shops that applied the sub-categorization, they had at maximum 3 category layers; one main category with up to two levels below.

See an example below from [Morgan Sports](https://www.morgansports.com.au/) (supplier of fitness equipment) which has 8 main categories with two layers underneath. For instance, **Functional Fitness > Strength Equipment > Dumbbell Sets & Dumbbell Racks**.

![](/images/G-J6BSLPZW.png)

The 3-layer-categorization rule does not always apply when moving deeper into the product grid, but rarely will you see more than 3 layers upfront in the dropdown navigation.

When you want customers to dig deeper into a category with thousands of products, it can be useful to start using more advanced product filtering, which can make it extremely easy to navigate a larger product assortment.

A good example of this can be seen below from [Blake Envelopes](https://www.blake-envelopes.com/), which breaks down its product categories in easy-to-navigate filtering whenever customers enter the product grid. Read more about their advanced product filtering processes, [here](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-blake/).

![](/images/yYjmXKiLIX.png)

### #3 - 3 seconds to comprehend

Another problem encountered with many of the categorizations was simply that the categorization was too complex to decode easily. This puts the B2B customer in a position, where the person has to spend a lot of time comprehending how to navigate the assortment in the first place.

Below is one example of a dropdown without any meaningful logic to it, which leaves the customer questioning which direction to move.

![](/images/09DC7Xm21F.png)

Ideally, a product categorization should be easy to comprehend within 3 seconds. This is all about systemizing the categorization in a meaningful way based on attributes like:

*   Product types
*   Application areas
*   Format and sizes
*   Customer types
*   etc...

A prime example of this in a B2B context comes again from [Blake Envelopes](https://www.blake-envelopes.com/). They break down their assortment into multiple categories at once (e.g. envelope size, color, type etc...) for the customer to easily find the system most meaningful to their own situation. They also combine it with a lot of visual elements to make the categorization very easy to decode even from a quick look at it.

![](/images/N0YsI2suQj.png)

### #4 - KISS navigation

Granted, Blake Envelopes benefits from its product simplicity (envelopes), and not all B2B brands share that luxury.

However, some stores managed to still make their product categories easy to navigate despite large and complex catalogs. The secret? The [**K**](https://www.freecodecamp.org/news/keep-it-simple-stupid-how-to-use-the-kiss-principle-in-design/)[eep ](https://www.freecodecamp.org/news/keep-it-simple-stupid-how-to-use-the-kiss-principle-in-design/)[**I**](https://www.freecodecamp.org/news/keep-it-simple-stupid-how-to-use-the-kiss-principle-in-design/)[t ](https://www.freecodecamp.org/news/keep-it-simple-stupid-how-to-use-the-kiss-principle-in-design/)[**S**](https://www.freecodecamp.org/news/keep-it-simple-stupid-how-to-use-the-kiss-principle-in-design/)[imple ](https://www.freecodecamp.org/news/keep-it-simple-stupid-how-to-use-the-kiss-principle-in-design/)[**S**](https://www.freecodecamp.org/news/keep-it-simple-stupid-how-to-use-the-kiss-principle-in-design/)[tupid (KISS) principle](https://www.freecodecamp.org/news/keep-it-simple-stupid-how-to-use-the-kiss-principle-in-design/) was applied throughout their assortment.

Their product catalogs most often were based on product types, with simple alphabetical orders to systemize sub-categories. No fancy titles, no overly visual designs or anything similar.

Below is an example from [Alibaba.com](http://Alibaba.com) showcasing a very lean and simple setup despite guarding several thousand products underneath each sub-category.

![](/images/X1rcDYTZ5W.png)

Notice, as well, that even the world's largest B2B commerce sites stick to only 3 layers of product categories in their category dropdowns (the same goes for other large B2B sites such as Amazon and Eworldtrade).

Does KISS mean you cannot spice up your categorization when having a large B2B product catalog? Absolutely not. Below are a few examples of how some B2B ships add creativity to the categorization via cross-categories.

### #5 - Cross-categories with purpose

Although the MECE principle applies to the overall categorization, there are a few examples of categories that can be used to collect products across different category types

The three most common types of categories are:

*   **Most popular:** Guided by total sales (in $) or number of items sold.
*   **Discounts:** Often just filtering all discounted products across the site. In some instances, only selected products are displayed here to bring special attention to products the shop wants to get rid of quickly.
*   **New arrivals:** This category was used not only in seasonal shops (e.g. fashion and beauty) but also in more traditional B2B product sites where B2B purchasers might be looking primarily to stay updated on new additions to the catalog.

Whether the above cross-categories make sense obviously depends on the business type and the type of B2B customers expected. In all regards, these methods are great to use when you have a specific target to optimize for. For example, you can use this method to bring attention to your newest collection, clearing inventory with discounts, or similar.

Aside from the above more traditional cross-categories, I also experienced a few more “exotic” cross-categories in a few stores. Namely:

*   **Delivery time:** An interesting cross-category was Delivery Time (found in [DHgate](https://www.dhgate.com/)). This one caters to the need for quick delivery, which is more associated with B2C-styled shops. In some instances, this category might prove useful when quick replenishment and/or assortment replacement is needed.
*   **Trending searches:** Some of the largest B2B shops had this category included (for example, [Snapdeal](https://www.snapdeal.com/) and [Made-in-China.com](http://Made-in-China.com)) to improve customer navigation. One of the more nuanced variations of it comes from [ec21](https://www.ec21.com/), which almost treats Top Searching Keywords as a subcategory of its own (see below).

![](/images/9uwL1ZfHoV.png)

Similar to the other cross-categories, these can be highly beneficial when you purposefully emphasize a trait across many categories, e.g. highlighting delivery time as a strength or hinting customers to top queries.

## Conclusion

Too many B2B companies today do not focus enough on their ecommerce product categorization, despite it being one of the primary ways of site navigation.

Below are 5 simple rules that I learned that made some B2B ecommerce sites stand out on product categorization:

*   **#1 - MECE sub-categories**: Product sub-categories should be Mutually Exclusive and Collectively Exhaustive.
*   **#2 - Rule of three:** Have at maximum three layers of product categories showcased on your site (especially in the dropdown navigation).
*   **#3 -** **Three seconds to comprehend**: Systemize and structure your categories in a way that takes less than 3 seconds to comprehend.
*   **#4 - KISS navigation:** When your catalog is large and diverse, keep the navigation simple with to-the-point category names and less distracting visuals.
*   **#5 - Cross-categories with purpose:** Use cross-categories when you purposefully want to emphasize a trait across many categories

For more articles on how to build a great B2B ecommerce experience, check out our articles on:

*   [**9 Best Ecommerce UX Practices From the World's Best Ecommerce Site**](https://medusajs.com/blog/9-best-ecommerce-ux-practices-with-examples/)
*   [**5 B2B Ecommerce Sites to Learn UX Design**](https://medusajs.com/blog/5-b2b-ecommerce-sites-to-learn-ux-design/)
*   [**Best open source ecommerce platforms for B2B: A feature-by-feature review**](https://medusajs.com/blog/top-5-open-source-ecommerce-platforms/)
*   [**Medusa B2B: How to set Up B2B Store**](https://medusajs.com/blog/medusa-b2b-part-1/)



Product Categorization: B2B Best Practices

Inspired by Git: How we Designed our Order-Editing Feature

[Medusa’s](https://github.com/medusajs/medusa) Order API supports order editing capabilities that equip merchants and developers with the tooling necessary to reduce manual work and offer a great customer experience.

Designing this seemingly simple functionality proved to be a complex task that was solved with inspiration from the world's most-used developer tools.

This article covers how we adopted principles from the Git version control system and GitHub in our Order Editing API design. You can read the product announcement [here](https://medusajs.com/blog/order-edits-announcement/).

## Understanding Order Editing

Before going over the design behind this feature, we need to understand its constraints. Let’s dive into what it means to edit an order in Medusa.

When an order is placed, it is in its base state from a customer and store administrator point of view. Generally, the next steps for orders from here are fulfillment, shipping, and payment capturing.

Sometimes a change in the order might be required first. Several scenarios could lead to this; the customer changed their mind about their purchase, the inventory management system was out of sync with the physical stock, or the merchant wants to add a complimentary item due to long processing time.

A naive solution would allow store administrators to modify order items directly. However, this could have serious consequences. Order history is lost or becomes misleading, potential unresolved payment discrepancies arise, and stale order data remain in integrated services, such as analytics providers.

Aside from ensuring data consistency in your underlying dependencies, you also want to offer a good customer experience. Instead of changing things directly, you want to give customers full control and confidence by allowing them to confirm a change before it is completed. Supporting these cases spawns the need to introduce an intermediate pending step for the edits you make to an order.

It should be clear that editing an order is not as straightforward as updating the quantity of a line item. There are many use cases and dependencies to consider to ensure data is consistent across all systems in your stack and that customers get the best experience.

## Building an API with git-like flow of events

As we started to plan the feature, it became apparent that we were building a subset of the functionality from a version control system with a pull request-like mechanism for editing an order.

The goal was to allow users to change the original state of their order with an approval-staged flow without losing its history. A Git-like system with the management capabilities offered by GitHub.

We were excited to realize that a developer-centric pattern from our daily work could directly apply to our API design.

We can see the following resemblance between the order-editing flow and a git-like system:

*   Order placed → Main branch
*   Store administrator initiates an order edit → Branches out from main
*   Store administrator makes changes to order edit → Pushes commits to branch
*   Store administrator submits an order edit → Opens a pull request to main
*   Customer confirms an order edit → Reviewer approves the pull request

We even extended the capabilities of the API with additional functionality as a result of using the Git + GitHub analogy:

*   Store administrator force completes an order edit → Core maintainer force merges a pull request
*   Customer requests an additional item → Reviewer requests changes to the pull request

Our feature had a functional requirement of having an intermediate step between initializing the edit and committing the changes. In this state, you can create multiple edits to the order without applying them. This is similar to pushing commits to a branch while a feature is in work-in-progress, except we only allow one commit for each order edit. More on that later.

### Design

Now let’s turn to implementation specifics to see how the analogy took shape in our data layer.

There are two database models worth highlighting: `OrderEdit` and `OrderItemChange`:

```ts
// order-edit.ts

OrderEdit
- id
- order
- changes
- internal_note
- items

// order-item-change.ts

OrderItemChange
- id
- original_line_item
- line_item
- type (add, remove, update)
```

Only properties relevant to the Git analogy are included above. If you wish to explore the models more in-depth, you can find them [here](https://docs.medusajs.com/references/entities/classes/OrderEdit).

The `OrderEdit` model holds the modifications you want to make to your order. It references the original order, stores an internal note, and contains a list of edits. When an `OrderEdit` is created, all items from the Order are copied to the `OrderEdit`.

The edits are represented as one or more `OrderItemChange` records. There are three types of changes: Add, Remove and Update. The purpose of each should be clear. When an edit is created, we store a copy of the original item to ensure full visibility of the history when these changes are eventually applied.

You might have already drawn the parallels to Git. The above data modeling is comparable to how branches, staged changes, and commits work. The `OrderEdit` is your branch diverging from the main one, and the `OrderItemChange` records are your staged changes ready to be pushed.

Together, they constitute the commit with a message and hold the information capable of showing a diff of the changes.

### Limitations to the analogy

Not all aspects of a traditional version control system apply to our feature. Whereas Git is excellent at facilitating seamless collaboration among an indefinite number of users, our feature is limited to one active order edit at a time. Only one branch aside from the main one.

This is to guard businesses against unwanted situations arising from multiple ongoing edits and outbound payment links. An example would be that customers accidentally pay for the wrong order edit. We built the logic to eliminate potential merge conflicts.

And finally, we don’t offer a way for merchants to roll back the changes when first committed. The changes made to an Order are irreversible. No `git revert`.

## Demo

Enough talking. Let’s see it in action.

<video width="700" height="504" controls preload="none" style="margin: 0 auto; object-fit: cover;" poster="/images/order-editing-poster.png">
<source src="/videos/order-editing.mp4" type="video/mp4" />
</video>

## Conclusion

Designing our Order Editing API was especially exciting, as it allowed us to apply existing concepts from our daily work to solve a problem for our users. The API we built provides a great developer experience by using familiar concepts while abstracting away the complexity for our merchants in the admin system.

For concrete API examples of the full order editing flow, see our how-to documentations on:

*   [Edit an order as an administrator](https://docs.medusajs.com/references/entities/classes/OrderEdit)
*   [Implement order-editing on the storefront](https://docs.medusajs.com/advanced/storefront/handle-order-edits)


How we built Order Editing

Order Edits and Payment Collections are now available

[Medusa](https://github.com/medusajs/medusa) is happy to announce Order Editing and Payment Collections as the latest additions to the Order API, strengthening one of the most critical parts of any commerce application. This is an essential step in our mission to deliver commerce building blocks that developers can use to create bespoke digital commerce experiences without reinventing core commerce functionality.

The Order Editing and Payment Collection features solve the problems faced when businesses need to change already placed orders. Systems that rely on order data, like fulfillment and accounting systems, will have to be updated, and payment discrepancies may arise. These updates and discrepancies often require error-prone, manual work.

Medusa’s new capabilities offer a simple and worry-free approach to creating order edits while giving your customers the best experience.

## How Order Editing Works

The Order Edit flow consists of three simple steps:

1.  Select the changes you wish to make.
2.  Ask the customer to confirm your changes or, as an admin, force a confirmation.
3.  See the order edit merged into the order and continue managing your order as usual.

<video width="700" height="504" controls preload="none" style="margin: 0 auto; object-fit: cover;" poster="/images/order-editing-poster.png">
<source src="/videos/order-editing.mp4" type="video/mp4" />
</video>

Editing orders in Medusa allows you to update, add and remove line items on already placed orders with a few easy steps.

Helpful timeline events ensure that you and your team have visibility to understand the order’s history and assist customers with questions about their orders.

To learn more about how we designed Medusa’s order editing capabilities, check out [this article that dives deeper into the solution](/blog/git-inspired-order-editing-feature/).

### Give your customers confidence and peace of mind

The confirmation step is essential to the order editing flow and ensures that your customer is always in the loop about changes to their order. You can configure notifications that automatically inform customers that they must accept changes to their orders.

They can confirm their changes with simple steps and pay for potential shipping and total differences.

<video width="700" height="504" controls preload="none" style="margin: 0 auto; object-fit: cover;" poster="/images/payment-collection-poster.png">
<source src="/videos/payment-collection.mp4" type="video/mp4" />
</video>

Customers can accept order edits to stay in the loop about changes to their order and pay for potential differences.

For businesses, Medusa’s extensible API also provides a new opportunity to upsell customers and highlight products.

## New possibilities with great APIs

Everything we build at Medusa is deliberately designed to give a robust starting point while remaining open for customizations and extensions that can make Medusa truly your own. This is also the case for Order Editing and Payment Collections, where plugins and projects can now listen to a comprehensive set of new events that can act as triggers for automations and integrations.

Accounting and fulfillment plugins, for example, will be able to listen for changes to orders and update systems to ensure consistency throughout your stack. This eliminates manual work while giving your customers a fast and smooth experience.

```
// src/subscribers/my-subscriber.ts

eventBus.subscribe(OrderEditService.REQUESTED, async ({ id }) => {
  const analyticsData = await getTrackingData(id)
  analyticsProvider.track("Order Edit Requested", analyticsData)
})
```

Finally, our Payment Collection API will soon expand to support broader use cases like re-authorizing expired payment authorizations and creating new payment experiences for your customers, like installments or deposit payments.

## Try it out now

We are excited to see what unique new experiences and plugins will be built with the new Order Editing and Payment Collection capabilities.

Try it out now by upgrading to the latest version of Medusa:

```
yarn add @medusajs/medusa@latest
```

Or start a new project:

```
yarn create medusa-app
```

If you’re interested in learning more about this feature, check out [this article](/blog/git-inspired-order-editing-feature/) which goes over how Git and GitHub inspired the design of the Order Editing capabilities.

You can also learn more about order editing in our documentation:

*   [How to implement order editing functionalities for administrators](https://docs.medusajs.com/advanced/admin/order-edit)
*   [How to implement order editing functionalities in a storefront](https://docs.medusajs.com/advanced/storefront/handle-order-edits)
*   OrderEdit [Admin](https://docs.medusajs.com/api/admin/#tag/OrderEdit) and [Store](https://docs.medusajs.com/api/store/#tag/OrderEdit) API reference



Use ChatGPT to Automate Product Description Writing


<callout icon="exclamationCircleSolid" button-label="Go to Docs" button-url="http://docs.medusajs.com">
**Notice**
Medusa is under active development, so the content of this post may be outdated. Please check out our documentation instead.
</callout>

In today's fast-paced ecommerce world, it's more important than ever to have compelling product descriptions that clearly and accurately convey the value of your offerings. However, crafting effective descriptions can be time-consuming, especially if you have a large catalog of products. This is where [ChatGPT](https://openai.com/blog/chatgpt/) comes in.

With ChatGPT, you can easily automate the writing of your product descriptions, saving you time and effort while still delivering top-notch content to your customers. What if I told you that the previous paragraph was written by ChatGPT? Did you see how ChatGPT generated human-like text that is indistinguishable?

In this tutorial, you’ll learn how to use ChatGPT to automate writing your product descriptions in [Medusa](https://github.com/medusajs/medusa). Medusa is a [composable ecommerce](https://medusajs.com/blog/composable-commerce/) platform that can be integrated with any third-party services, including ChatGPT.

You can find the code for the tutorial in [this repository](https://github.com/ashutoshkrris/How-to-Use-ChatGPT-to-Automate-Writing-your-Product-Description).

Here’s a demo of the end result.

![](/images/medusa-chatgpt-2462f90e.gif)

## What is Medusa?

[Medusa](https://github.com/medusajs/medusa) is an open source [composable](https://medusajs.com/blog/composable-commerce/) commerce engine for developers who want to take ownership of their ecommerce stack. The platform is highly extensible and easy to customize which has made it the #1 JavaScript Ecommerce Platform on Github in record time with 16K+ stars.

Medusa is composed of three components: the headless backend, the admin dashboard, and the [storefront](https://medusajs.com/blog/next-js-storefront-food-ecommerce-restaurant-medusa-paystack/). You can set up an entire ecommerce store within minutes by running just a couple of commands.

Since Medusa is highly extensible, it allows developers to build custom features or integrate third-party services such as ChatGPT into Medusa very easily. You can learn more about the official and community plugins [here](https://docs.medusajs.com/advanced/backend/plugins/overview/).

## What is ChatGPT?

[OpenAI](https://openai.com/) has developed a revolutionary long-form question-answering AI called ChatGPT; it is capable of answering complex questions conversationally. This technology is groundbreaking because it has been trained to understand the intended meaning behind human questions.

ChatGPT (Generative Pre-trained Transformer) is a powerful AI tool that leverages the capabilities of OpenAI's GPT-3.5 family of large language models. It has been fine-tuned using a combination of supervised and reinforcement learning techniques to deliver optimal performance.

### Different Models Offered by GPT-3

The [GPT-3 language models](https://beta.openai.com/docs/models/gpt-3) have the ability to understand and generate natural language. Four main language models are available, each with varying levels of power and capabilities to suit different tasks.

*   `text-davinci-003`: It is the most advanced and capable language model in the GPT-3 family. It is capable of completing any task that the other models can perform, often with higher quality, longer output, and better ability to follow instructions. Additionally, it has the ability to insert completions within the text
*   `text-curie-001`: It is highly capable, but faster and more cost-effective than Davinci.
*   `text-babbage-001`: It can complete straightforward tasks efficiently and at a lower cost compared to other models.
*   `text-ada-001`: It is capable of performing simple tasks quickly and at a low cost. It is typically the fastest model in the GPT-3 family.

Out of the above four, you’ll use the `text-davinci-003` for text completion in this tutorial as it yields the best results.

## Getting Your OpenAI API Key

OpenAI provides different APIs to interact with its AI models. It provides you free credit worth $18 to experiment for the first three months.

Follow the steps below to get your free OpenAI API key:

1.  Go to [OpenAI API](https://openai.com/api/) and sign up for a free account. Follow the instructions, and you’ll be redirected to the API Dashboard.

2.  Click on your profile picture to view the menu bar, and then click on *View API Keys* to go to the *API Keys* page.

    ![](/images/Screenshot_2023-01-02_141710.png)

3.  Click on *Create new secret key* to create a new API Key.

    ![](/images/Screenshot_2023-01-02_141730.png)

4.  Copy the API Key and store it safely to use later in the tutorial.

    ![](/images/Screenshot_2023-01-02_141752.png)

## Prerequisites

Before you get started with the tutorial, you should have installed:

*   [Node.js(V14 or later)](https://docs.medusajs.com/tutorial/set-up-your-development-environment#nodejs)
*   [Git](https://docs.medusajs.com/tutorial/set-up-your-development-environment/#git)
*   [Medusa CLI](https://docs.medusajs.com/tutorial/set-up-your-development-environment#medusa-cli)
*   [Redis](https://docs.medusajs.com/tutorial/set-up-your-development-environment/#redis)

## Setting up Your Medusa Development Environment

In this section, you’ll create a Medusa server where you’ll integrate ChatGPT in the next step.

### Setting up Your Medusa Server

Create a new Medusa store called `my-medusa-store` and seed the test data using the following command:

```
medusa new my-medusa-store --seed
```

Start your Medusa server using the following command:

```
cd my-medusa-store
medusa develop
```

The above two steps take a couple of minutes to set up and run your server on port 9000. You can test your server by going to `http://localhost:9000/store/products` on your browser or by running the following command:

```
curl localhost:9000/store/products
```

If you get a list of products, your server is successfully set up.

## Create a Subscriber to Handle Empty Descriptions

In this section, you’ll create a subscriber in your Medusa server that will listen to the `product.created` event. The subscriber then calls a function to handle the description field of the product. If the description field is empty, another function will be called to interact with ChatGPT’s `text-davinci-003` language model.

While you can directly interact with the models using their APIs, OpenAI also provides you with several [official](https://beta.openai.com/docs/libraries/libraries) and [community libraries](https://beta.openai.com/docs/libraries/community-libraries) for different languages.

Install the official OpenAI library in your Medusa server:

```
npm install openai
```

Add the `OPENAI_API_KEY` in the `.env` file in your Medusa server:

```
OPENAI_API_KEY=your-api-key-here
```

> Note: Replace the value of `your-api-key-here` with a valid API key that you obtained from OpenAI earlier in the tutorial.

Since you’re going to create a subscriber in your Medusa server, make sure you enable Redis in the `medusa-config.js`:

```
module.exports = {
  projectConfig: {
    redis_url: REDIS_URL, // Enable Redis Here
		//...
  },
  plugins,
};
```

Create a `description.js` file inside `src/subscribers` directory in the Medusa server and add the following content:

```
import { Configuration, OpenAIApi } from "openai";

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY, // Replace with your API key
});

class DescriptionSubscriber {
  constructor({ productService, eventBusService }) {
    this.productService_ = productService;
    eventBusService.subscribe("product.created", this.handleDescription);
  }
  handleDescription = async (data) => {
    let productDescription = "";

    const product = await this.productService_.retrieve(data.id);
    if (product.description == null) {
      try {
        const productName = product.title;
        const productFeatures = [product.subtitle, product.material];
        const prompt = `Write a product description for ${productName}, which has the following features: ${productFeatures.join(
          ", "
        )}.`;

        productDescription = await this.prepareDescription(prompt);
      } catch (error) {
        const errorMessage = error.response.data.error.message;
        console.error("Error: " + errorMessage);
        return;
      }

			product.description = productDescription;
      await this.productService_.update(product.id, product);
    }
  };

  prepareDescription = async (
    prompt,
    model = "text-davinci-003",
    temperature = 0.7,
    maxTokens = 256,
    topP = 1,
    frequencyPenalty = 0,
    presencePenalty = 0
  ) => {
    const openai = new OpenAIApi(configuration);

    const response = await openai.createCompletion({
      model,
      prompt,
      temperature,
      max_tokens: maxTokens,
      top_p: topP,
      frequency_penalty: frequencyPenalty,
      presence_penalty: presencePenalty,
    });

    return response.data.choices[0].text.trim();
  };
}

export default DescriptionSubscriber;
```

In the above code, you import the `Configuration` class from the `openai` module and then create a new `Configuration` object using the `Configuration` class. The `Configuration` object is initialized with an API key for the OpenAI API.

You also define a subscriber called `DescriptionSubscriber` which includes a constructor and two methods: `handleDescription` and `prepareDescription`.

The `constructor` method subscribes to an event called `product.created` using the `eventBusService` and specifies that the `handleDescription` method should be called whenever this event is emitted.

The `handleDescription` method is an async function that is called with a `data` argument. As mentioned [in the documentation](https://docs.medusajs.com/advanced/backend/subscribers/events-list#product-events), the event data payload, i.e., the `data` argument contains just the `id` of the created product. This method retrieves a product from the `productService` using the `id` property of the `data` object.

If the `description` of the product is `null`, the method generates a description using the `prepareDescription` method and updates the product with the new description.

`prepareDescription` is an async function that is used to generate product descriptions using OpenAI's [Text Completion API](https://beta.openai.com/docs/guides/completion/text-completion). The function takes several parameters as inputs:

*   `prompt`: a string that specifies the text prompt that the API should use as a starting point for generating text. In this case, the text that asks for a description of a product by its properties such as name, material, etc.

*   `model`: (optional, default: `"text-davinci-003"`) a string that specifies the ID of the model that should be used to generate text.

*   `temperature`: (optional, default: `0.7`) a float that specifies the sampling temperature to use when generating text.

*   `maxTokens`: (optional, default: `256`) an integer that specifies the maximum number of [tokens](https://beta.openai.com/docs/introduction/tokens) (i.e., words or word pieces) that should be generated.

*   `topP`: (optional, default: `1`) a float that specifies the "top-p" value to use when generating text. Higher values will produce more conservative and deterministic output, while lower values will allow for more randomness and diversity in the output.

*   `frequencyPenalty`: (optional, default: `0`) a float that specifies the frequency penalty to use when generating text. Higher values will produce more diverse output, while lower values will allow the model to reuse more common tokens.

*   `presencePenalty`: (optional, default: `0`) a float that specifies the presence penalty to use when generating text.

The function creates an instance of the `OpenAIApi` class, which is used to communicate with the OpenAI API, and then calls the `createCompletion` method on this instance to generate text.

## Testing the Flow

Once you’ve made the required changes in your Medusa server, you’ll need to build your project using the command:

```
npm run build
```

Next, you can restart your server using the command:

```
medusa develop
```

### Setting up Your Medusa Admin

You can test the flow both from the Medusa Admin and the [Admin APIs](https://docs.medusajs.com/api/admin/). In this case, you’ll test using the Medusa Admin.

Medusa Admin is an intuitively designed admin dashboard for your ecommerce Medusa server. Medusa Admin is built with Vite 3 and React. It allows merchants to manage their data such as products, orders, discounts, regions, and more.

Follow the steps to set up your Medusa Admin and create products:

Clone the Medusa Admin GitHub repository and change your path to the cloned directory:

```
git clone https://github.com/medusajs/admin my-medusa-admin
cd my-medusa-admin
```

Install the dependencies using the following command:

```
npm install
```

Once all the dependencies are installed, run the Admin server using the following command:

```
npm run start
```

The Medusa Admin runs on port 7000, so go to `http://localhost:7000` in your browser to open your Admin Panel.

![](/images/Screenshot_2023-01-02_153211.png)

Since you’ve already seeded the data in your Medusa server, you can use the email `admin@medusa-test.com` and password `supersecret` to log in.

### Creating Products in Medusa Admin

Click on the `Products` tab on the left side and then click on the `New Product` button.

![](/images/Screenshot_2023-01-05_102325-173349ed.png)

Since the admin is configured to fetch the products right after the product is created, which is before the subscriber runs, you’ll need to refresh the page to see the changes. You can customize the admin to refetch the product after it’s created to resolve this.

![](/images/Screenshot_2023-01-05_102712.png)

Once you publish a product without a description, your product will initially be created with an empty description. The `product.created` event is then emitted, and the `DescriptionSubscriber` is triggered.

Since the description is empty, the subscriber uses the `prepareDescription` function to generate a description and updates the description of the product.

![](/images/Screenshot_2023-01-05_102525.png)

## Conclusion

In this tutorial, you learned how you can use ChatGPT to automate writing your product description. You can add more product features such as its price, variants, and more to generate a more unique description.

This integration was made easy due to Medusa’s composable architecture. You can learn more about Medusa through its [documentation](https://docs.medusajs.com/). Here are some documents that you can start with:

*   Set up a [Next.js](https://medusajs.com/nextjs-commerce/) storefront.
*   Integrate [Stripe](https://docs.medusajs.com/add-plugins/stripe) as a payment provider.
*   Create a [custom endpoint](https://docs.medusajs.com/advanced/backend/endpoints/add).

> Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via [Discord](https://discord.gg/F87eGuwkTp).



Deploy a Medusa Server on AWS with Microtica


<callout icon="exclamationCircleSolid" button-label="Go to Docs" button-url="http://docs.medusajs.com">
**Notice**
Medusa is under active development, so the content of this post may be outdated. Please check out our documentation instead.
</callout>

[Medusa](https://github.com/medusajs/medusa) is an open source composable commerce platform built for developers. Its architecture is flexible enabling users to build bespoke commerce solutions.

Medusa is composed of three components:

1.  A headless backend engine that holds all the logic and data of the store and exposes APIs to communicate with the admin and storefront,
2.  An admin dashboard that allows store operators to manage their orders and products, and
3.  A storefront, which is ultimately an ecommerce website where customers can preview products and make orders.

## What is Microtica?

[Microtica](https://www.microtica.com/) is a developer self-service platform that enables you to self-host open source solutions on AWS (Amazon Web Services) without being a cloud expert.

The platform provides production-ready templates for development frameworks and solutions, so you can get started fast and be free from the friction of dealing with the underlying cloud complexities.

Using the templates, you can deliver on your own AWS account and deploy applications/services on Amazon EKS (Elastic Kubernetes Service).

## Why Should You Deploy Medusa Server on AWS?

Here are some of the reasons why it would be a good idea to deploy a Medusa.js Server on AWS with Microtica’s template:

*   Out-of-the-box serverless infrastructure with Fargate
*   Infrastructure and data ownership on your AWS account
*   Auto-scaling based on application load
*   Automated git-push deployments and rollbacks
*   Production-ready solution
*   Resource monitoring and performance insights in-app

## Prerequisites

To follow through with this tutorial, here’s a list of things you should have/do.

*   Have a Git account; any provider from GitHub, BitBucket, GitLab, and CodeCommit is supported.
*   [Create a Microtica account](https://app.microtica.com/auth/signup?utm_source=devto\&utm_medium=blog\&utm_campaign=deploy+medusa+on+aws) by signing up with your email or your Git account.
*   Have an AWS account to be able to deploy a React app to your AWS account. You can [sign up for an AWS account here.](https://aws.amazon.com/)

## Deploy a New Medusa Server

After creating a Microtica account, click the *Deploy with Microtica* button to land on the *Templates* page, where you can see a list of all production-ready templates.

![](/images//THXCHbFZq6.jpg)

This template creates the following infrastructure resources that will be provisioned on your AWS account:

*   VPC, subnets and networking
*   Container infrastructure based on Fargate
*   Application load balancer
*   Persistent storage
*   S3 bucket
*   Postgres database
*   Redis (in production mode)

The steps to deploying a new Medusa server are outlined below.

### Create a Git Repository

Connect your preferred Git account. Microtica will create a repository on your Git account with a default repo name `medusa-server`.

![](/images//nTZPm9Fyis.png)

### Configure Template

Here, you can customize the template for your needs by providing environment variables. Enter an application name and the admin credentials that will be used to create an initial admin user with which you can later sign in to your Medusa Admin.

Select whether you want a production Medusa Server environment or a development one. In production mode, this template will provision managed RDS PostgreSQL and Redis instances. In development mode, the template will use local SQLite and a fake Redis instance.

![](/images//ujvPPLbsyo.png)

Environment variables can be updated, added, or configured after deployment as well.

### Connect an AWS account

In the last step, you can select the environment in which you want to deploy the template. An existing default environment called `development` will be preselected here or you can create a new environment.

Connect your AWS account when prompted. This process takes only a few seconds, so afterwards, only choose the region you want to deploy in.

![](/images//rHQmxc0rBJ.png)

### Deploy the Medusa Server Template to AWS

Finally, a deployment summary of what will be provisioned on your AWS account is presented.

![](/images//vwUF_K9zRz.png)

Clicking the *Deploy* button will trigger a deployment of the template and start creating the infrastructure for a Medusa Server.

It will take about 10 mins for the solution to be deployed on the cloud; you can follow the build pipeline in real time by clicking the *View Logs* button.

![](/images//TcfKjLjkLe.png)

Once the build process is complete, a new deployment with the infrastructure resources is triggered. You can follow the logs of the deployment process by clicking the *View deployment* button, and then selecting the deployment from the list.

![](/images//thr0qC6h4m.png)

### Preview the Environment

After the deployment is finished, navigate to *Resources* → [*AppName*](https://dev.tomedusa%20in%20our%20case/) → *Overview*, and under *Resource Outputs* you should see the AccessUrl.

This is the server URL that you can use to access API endpoints. Try getting the list of products using the endpoint `/store/products`.

![](/images//Y284EZGh1U.png)

The image below shows how your environment should look after deploying both templates.

![](/images//jNxhPN9Afv.png)

## Cleanup

To remove all the resources created on your AWS account, navigate to your environment → *Environment Settings* → *Infrastructure*, and you’ll see the *Undeploy* section.

This will clean up the resources created in AWS, but you will still have the configuration in Microtica in case you want to deploy it in the cloud again.

## Deploy an Existing Medusa Server

If you already have an existing Medusa server repository that you want to migrate to AWS, there are several changes you need to make to your source code. You can follow [the documentation](https://docs.microtica.com/medusa-server?utm_source=devto\&utm_medium=blog\&utm_campaign=deploy+medusa+on+aws) to configure and import your Medusa server repo code.

> Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via [Discord](https://discord.gg/F87eGuwkTp).



Learn how to deploy Medusa on AWS with Microtica

A Step-by-Step Tutorial on How to Deploy a Medusa Server on AWS


<callout icon="exclamationCircleSolid" button-label="Go to Docs" button-url="http://docs.medusajs.com">
**Notice**
Medusa is under active development, so the content of this post may be outdated. Please check out our documentation instead.
</callout>

[Medusa](https://github.com/medusajs/medusa) offers bespoke commerce infrastructure and is the most popular open source commerce platform on GitHub. The solution allows developers to build scalable and custom ecommerce applications through a composable stack that allows you to easily integrate with your favorite tools for payments to search, CMS and more.

You can easily manage your products, add discounts and gift cards as offers, support multiple currencies and regions, and much more. These are possible due to Medusa’s headless architecture that decouples its backend server, storefront, and admin dashboard.

In this article, you will learn what headless commerce architecture is and the benefits of headless commerce solutions. Additionally, you will learn about Medusa, the #1 Node.js ecommerce backend, and its underlying architecture in detail.

## **Medusa, the Most Popular Node.js Ecommerce Backend**

Medusa is a composable commerce platform that utilizes Node.js’s superpowers on the server to provide a great developer experience and advanced ecommerce features. It is highly customizable and easy to maintain.

Medusa offers standard ecommerce features including payments, cart functionality, user management, discounts, gifts, and more, much like other ecommerce platforms. An ecommerce business can use Medusa to build an ecommerce stores of different types and purposes.

Released in 2021, Medusa has gained about 15K stars in a little more than a year, making it the most popular ecommerce engine on GitHub. Currently, Medusa has +16K stars, passing other popular open source platforms like Magento and PrestaShop.

Here are some reasons why Medusa has become the most popular Node.js ecommerce backend:

1.  Medusa has an abstraction-based architecture built for easy customization and maintainability. It enables you to set up your store according to your specific business needs.
2.  Medusa is entirely open source, in contrast to other ecommerce platforms that use proprietary backends. Thus, you can extend its functionalities with custom features and third-party services.
3.  Since the frontend and backend are decoupled, developers can choose any frontend framework to build the storefront.
4.  Medusa supports a wide variety of third-party integrations out of the box. You can easily integrate search engine services like [Algolia](https://docs.medusajs.com/add-plugins/algolia/) and [Meilisearch](https://docs.medusajs.com/add-plugins/meilisearch/), payment services such as [Stripe](https://docs.medusajs.com/add-plugins/stripe/) and [PayPal](https://docs.medusajs.com/add-plugins/paypal/), notification solutions such as [SendGrid](https://docs.medusajs.com/add-plugins/sendgrid/) and [Twilio](https://docs.medusajs.com/add-plugins/twilio-sms/), and more. You can find the list of integrations supported by Medusa [here](https://www.notion.so/1a0ada9903874e0185d0b8ce0591b359).
5.  Medusa has great community support with over 4000+ developers on its Discord channel always ready to help and support others. Developers can also help Medusa grow by taking part in [GitHub discussions](https://github.com/medusajs/medusa/discussions) with other ecommerce builders, open source developers, and the Medusa core team.
6.  With the lack of available Node.js ecommerce backends and the need for it, and with the popularity of Node.js, this made many businesses and developers interested in Medusa, as it is built on top of Node.js.

### **Why is Node.js Popular?**

There are a few reasons behind the high popularity of Node.js frameworks among web developers:

1.  JavaScript is Everywhere: One of the main factors of its popularity is that Node.js is a backend JavaScript runtime environment. JavaScript is widely used today for building web apps and can be used on both the client and server sides when building a Node.js application.
2.  Lightweight: Node.js has a basic event-driven architecture. In other words, every action and call made on it is made up of a sequence of asynchronous callbacks. As a result, Node.js operates on a single thread, while other web technologies create a new thread for each client request.
3.  Lightning Fast: Node.js is powered by Chrome’s V8 engine. Since V8 compiles JavaScript into native machine code, it can compile and execute JavaScript at a lightning-fast speed.
4.  Real-time functionality: Node.js is an ideal choice for building real-time applications, such as chat applications and real-time notifications. For ecommerce, this can be very beneficial, as real-time functionality can improve the user experience, such as getting notifications about order status updates.
5.  Mobile-Friendly, Cross-Platform: Cross-platform ecommerce app development has increased over the past few years. Node.js allows you to build flexible apps that can run on any platform.

Other reasons for the Node.js popularity include its high performance and scalability. The support for microservices architecture makes Node.js ecommerce backends one of the best choices for ecommerce development.

## **Medusa's Architecture**

As discussed, Medusa has a composable architecture, meaning the frontend and backend are loosely coupled. Medusa is composed of three components: the headless backend, the admin dashboard, and the storefront.

You can choose to use the complete Medusa platform or just the parts that you require for your store. Also, the decoupling of the backend from the frontend allows a backend developer to focus on the Medusa server, and the frontend developer to focus on the storefront or admin.

![Medusa Architecture](https://res.cloudinary.com/dza7lstvk/image/upload/v1667999772/Medusa%20Docs/Diagrams/ZHvM2bu_td4rnx.png)

Medusa Architecture

The following sections explain how Medusa provides most of the ecommerce store functionalities out of the box. You just need to configure these functionalities as per your use case.

### **Medusa Server**

The Medusa server is a core component of Medusa. It is a Node.js ecommerce backend. It contains all the store's logic and data. The other two components use the REST APIs exposed by the backend server to retrieve, create, and modify data.

The Medusa server comes with most of the functionalities related to an ecommerce workflow. These functionalities include product, cart, and order management, shipping and payment providers, user management, and more.

In addition to that, you can configure your store including your store’s region, tax rules, discounts, gift cards, and more.

Setting up a Medusa headless backend server is just a matter of a single command. You have the freedom to select any storefront because Medusa comes with a full commerce engine and APIs to manage your entire store.

Since Medusa is highly extensible, it allows developers to build custom features or integrate third-party services into Medusa using Plugins. You can find both official and community plugins to assist you with your common needs. Learn more about these plugins [here](https://docs.medusajs.com/advanced/backend/plugins/overview/).

You can easily extend and customize the functionalities of your Medusa server. You can add endpoints, business logic, and database entities to handle customizations. In addition, you can create subscribers in your Medusa server that listens to events to perform an action.

### **Medusa Admin**

Medusa Admin is quite an essential component of an ecommerce store. Merchants use this dashboard to view, create, and modify data such as orders and products.

Medusa includes an admin dashboard to provide functionalities to manage your store including order management, product management, user management, and more. You can manage your orders across regions and channels using one single dashboard.

If you're migrating your store from other platforms, the admin dashboard provides you with functionalities to easily import and export large datasets on products, orders, and customers. The dashboard also provides you with customer-group functionality that allows you to create tailored pricing lists, discounts, and gift cards.

The Medusa Admin Dashboard looks like this:

![](/images/Screenshot\_2022-12-05\_153210.png)

However, if you are not satisfied with the existing admin dashboard, you can utilize the [Admin REST APIs](https://docs.medusajs.com/api/admin) to extend it beyond.

### **Storefront**

Storefront is the frontend or the main presentation layer of your ecommerce store. It is the storefront where your customers can view and purchase your products. These storefronts may be progressive web applications or mobile apps.

Medusa provides two storefront starters: one using [Next.js](https://docs.medusajs.com/starters/nextjs-medusa-starter) and the other using [Gatsby](https://docs.medusajs.com/starters/gatsby-medusa-starter).

![](/images/koJl8uR_n3gvii-0d8094c5.gif)

The Next.js storefront includes the following features:

*   Product listing and detail pages with a clear design.
*   Customer authentication and profile functionalities, allowing customers to view their orders, edit their information, and more.
*   Full checkout flow supporting shipping details and methods, and ready integration with payment gateways such as Stripe and PayPal.
*   Search capabilities that is ready to integrate with best-in-breed solutions like Algolia and MeiliSearch.

You are also free to create your own storefront using the [Storefront REST APIs](https://docs.medusajs.com/api/store/).

## How to Get Started with Medusa

You can get started with Medusa by following the [Medusa’s Quickstart guide](https://docs.medusajs.com/quickstart/quick-start/).

After that, you can follow these guides to kick-start your development with Medusa:

*   [Create custom API routes](https://docs.medusajs.com/advanced/backend/endpoints/add)
*   [Create a service](https://docs.medusajs.com/advanced/backend/services/create-service) that bundles a set of methods related to an entity.
*   [Create a subscriber](https://docs.medusajs.com/advanced/backend/subscribers/create-subscriber) that listens to events to perform an action asynchronously.
*   [Deploy your Medusa server to Railway.](https://medusajs.com/blog/deplot-medusa-server-railway/)
*   [Integrate Chatwoot live widget with the Next.js storefront.](https://medusajs.com/blog/chatwoot-ecommerce/)
*   [Integrate Discord for automatic order notifications.](https://medusajs.com/blog/chatwoot-ecommerce/)

## **Conclusion**

Using a Node.js ecommerce backend provides both businesses and developers many benefits. Those include high scalability, a good performance, and utilizing full-stack JavaScript development.

When considering a Node.js ecommerce backend, Medusa is the ideal choice. Built on top of Node.js, Medusa provides many essential ecommerce and development features. Businesses that use Medusa can benefit from both advantages that Node.js and Medusa provide.

> Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via [Discord](https://discord.gg/F87eGuwkTp).



 The #1 Node.js Ecommerce Backend: Medusa

Create a React Ecommerce Store with Medusa

Implementing 5 features in Nike’s Ecommerce Store with Medusa


<callout icon="exclamationCircleSolid" button-label="Go to Docs" button-url="http://docs.medusajs.com">
**Notice**
Medusa is under active development, so the content of this post may be outdated. Please check out our documentation instead.
</callout>

Nike is the world’s [largest supplier and manufacturer of athletic shoes](https://www.statista.com/topics/1243/nike/#editorsPicks). Part of what makes Nike successful is its ecommerce website. Its net sales has [crossed 12 billion USD in 2022](https://www.statista.com/forecasts/1218320/nike-revenue-development-ecommercedb). This makes up approximately 65% of Nike’s [global direct-to-customer revenue in 2022 (18.73 billion USD)](https://www.statista.com/statistics/294512/nike-s-dtc-revenue-worldwide/).

Nike’s ecommerce website is rich with features that encourage customers to make a purchase. It shows a great understanding of what customers want, and how to convert first-time visitors to loyal customers.

Nike realized early-on that they needed to implement an [omnichannel experience](https://medium.com/nikeengineering/accelerate-transforming-nike-digital-apis-with-graphql-a541aebe4d5e) to provide their customers with the best user experience. This led them to build their own headless commerce platforms utilizing [microservices and cloud technologies](https://medium.com/nikeengineering/nikes-cloud-journey-at-aws-re-invent-aa2e6eaefa55).

In this article, you’ll learn how to implement 5 core features Nike offers its customers using Medusa. These are:

1.  Digital Gift Cards
2.  Free shipping for members
3.  Search suggestions and autocomplete
4.  Member-only products
5.  Birthday deals

## What is Medusa?

Using an open source ecommerce platform gives you many of the benefits of customization that a custom platform like Nike’s has. [Medusa](https://github.com/medusajs/medusa) is built for developers that wants to build bespoke commerce experiences with a composable commerce platforms in Node.js.

Medusa’s architecture allows businesses and developers to build unique and on-brand experiences. Features such as omnichannel support, scalability, and customizability are at Medusa’s core.

Medusa also provides advanced ecommerce features related to automated RMA flows, sales channels, product and order management, and much more.

Medusa’s integrations system gives businesses more flexibility. You can integrate any third-party service into Medusa for rich CMS functionalities, payment gateways, customer support, and more. You can also create custom integrations specific to your brand.

## Feature 1: Digital Gift Cards

![](/images/Screenshot\_2023-01-02\_at\_11.12.33\_AM.png)

Nike allows customers to customize and purchase gift cards. They can be sent as a gift to an email or can be shipped as an actual card to a shipping address.

Medusa allows creating gift cards with custom images, unlimited amounts, description, tags, and more.

![](/images/Screenshot\_2023-01-02\_at\_12.31.59\_PM.png)

Merchants can also specify for a specific denomination or amount the price for different currencies.

![](/images/Screenshot\_2023-01-02\_at\_12.32.27\_PM.png)

Customers that purchase this gift card will have it delivered to their email and can use it during checkout.

You can also customize the experience by allowing customers to deliver the gift card to another person’s email. Gift cards in Medusa (and all entities) have a `metadata` attribute. This attribute can be used to store custom data.

You can utilize it to store a custom recipient email or shipping address, which would allow customers to send the gift card to their family or friends.

```
metadata: {
	recipient_email: 'example@gmail.com'
}
```

## Feature 2: Free Shipping for Members

![](/images/Screenshot\_2023-01-02\_at\_11.49.01\_AM.png)

When taking a look at the features Nike provides, you’ll notice that their main focus is converting visitors and one-time customers to registered customers. This builds customer loyalty and increases the possibility of the customer making future purchases.

One way Nike encourages visitors to register and become members is offering free shipping for every order a member places. This makes registering worth the extra steps a customer have to make before placing an order, as they’ll be saving up on current and future orders.

In Medusa, this feature can be implemented with a combination of available features: [Customer Groups](https://docs.medusajs.com/advanced/backend/customer-groups/), [Discounts](https://docs.medusajs.com/advanced/backend/discounts/), and [Subscribers](https://docs.medusajs.com/advanced/backend/subscribers/overview).

### Customer Groups

Customer groups can be used to group together customers that share a similar set of attributes. Then, you can apply a different set of prices, discounts, and rules for customers belonging to that group.

In this use case, you can use customer groups to create the “Members” customer group. You’ll see later how to add customers to that group automatically on registration.

![](/images/Screenshot\_2023-01-02\_at\_12.31.09\_PM.png)

### Discounts

Discounts can be used to create discount codes that customers can use to save on their order. Discounts can be in the form of fixed discount amount, percentage discount amount, or free shipping.

Discounts can also have conditions. For example, you can specify which products this discount can be used on or which customer groups.

To implement the Free Shipping for Members feature, you can create a discount that gives customers belonging to the customer group “Members” free shipping on their orders.

![](/images/Screenshot\_2023-01-02\_at\_12.35.43\_PM.png)

### Subscribers

The last step required is to automatically:

1.  Add customers to the Members customer group on registration.
2.  Add the free shipping discount to customers of the Members customer group.

In Medusa, important actions trigger an event. Developers can listen or subscribe to events and perform an automated task when an action occurs. They do that using subscribers.

Starting with adding customers to the Members customer group, you need to create a subscriber `src/subscribers/members.ts` on your Medusa server that subscribes to the `customer.created` event and adds the customer to the “Members” customer group:

```
import { CustomerGroupService, CustomerService, EventBusService } from "@medusajs/medusa"

type InjectedProperties = {
  eventBusService: EventBusService
  customerService: CustomerService
  customerGroupService: CustomerGroupService
}

class MembersSubscriber {
  customerService: CustomerService
  customerGroupService: CustomerGroupService

  constructor (container: InjectedProperties) {
    this.customerService = container.customerService
    this.customerGroupService = container.customerGroupService

    container.eventBusService.subscribe('customer.created', this.handleRegistration)
  }

  handleRegistration = async (data) => {
    //get Members customer group
    const membersGroup = await this.customerGroupService.list({
      name: 'Members'
    }, { take: 1 })

    if (!membersGroup.length) {
      //Members group doesn't exist
      return
    }

    //add customer to customer group
    await this.customerGroupService.addCustomers(membersGroup[0].id, data.id)
  }
}

export default MembersSubscriber
```

Next, you need to create a subscriber that automatically adds the free shipping discount to members. The subscriber should subscribe to the events `cart.created` and `cart.customer_updated`. The first event is triggered when a new cart is created, and the second one is triggered whenever the customer associated with the cart is changed.

```
import { CartService, EventBusService } from "@medusajs/medusa"

type InjectedDependencies = {
  eventBusService: EventBusService
  cartService: CartService
}

class MemberDiscountSubscriber {
  cartService: CartService
  discountCode: string

  constructor (container: InjectedDependencies) {
    this.cartService = container.cartService
    this.discountCode = 'MEMBERSFREESHIP'

    container.eventBusService.subscribe('cart.created', this.handleDiscount)
    container.eventBusService.subscribe('cart.customer_updated', this.handleDiscount)
  }

  handleDiscount = async (data) => {
    const cartId = typeof data === 'string' ? data : data.id

    this.cartService.update(cartId, {
      discounts: [
        {
          code: this.discountCode
        }
      ]
    })
  }
}

export default MemberDiscountSubscriber
```

Notice that in the code above, the discount code is hardcoded. This behavior can be changed to instead include it as an option or retrieve it in other ways using the `DiscountService`.

## Feature 3: Search Suggestions and Auto Complete

![](/images/Screenshot\_2023-01-02\_at\_1.39.50\_PM.png)

An essential and often overlooked feature that ecommerce websites must perfect is the search functionalities. Customers generally visit an ecommerce website either exactly knowing what they want, or with an idea of what they want.

Nike does a great job at providing results for both types of customers. The moment the customer starts entering a search query, they can see top query suggestions and the best products that match the query.

If the customer knows what they’re looking for, they’ll find the product in the immediate results. If not, they can use the help of the top suggestions.

In Medusa, advanced search functionalities can be implemented by integrating the server to third-party services like [Algolia](https://docs.medusajs.com/add-plugins/algolia) or [MeiliSearch](https://docs.medusajs.com/add-plugins/meilisearch). This removes the need to implement these features from scratch, and allows utilizing best-in-brand services in your store.

![](/images/gQVWvH2\_h1ljig.png)

Both Algolia and MeiliSearch provide advanced features such as instantaneous search results, typo tolerance, search suggestions, autocomplete and more. You can integrate one of them by installing the service’s plugin on the Medusa server. Then, you can customize the UI on the storefront as you see fit for your customers.

## Feature 4: Member-only Products

![](/images/Screenshot\_2023-01-02\_at\_2.01.32\_PM.png)

Similar to the free shipping feature, Nike also provides products that are only available for members or registered customers. This further encourages visitors to register and check out exclusive products.

In Medusa, this can be implemented with a combination of features: Customer Groups, Sales Channels, and Subscribers.

### Customer Groups

As explained in an earlier section, members can be represented by a Customer Group called “Members”. You would then need to implement automatically assigning the Members customer groups to registered customers, as explained earlier.

### Sales Channels

Sales channels allow customizing how and what products you sell for different channels in your store. Channels can be different platforms, such as website or mobile. It can also be different types of customers, such as B2B customers or members.

To implement the Member-only products feature, you need to create a sales channel for Members. Then, you can make only specific products available in that sales channel and not available in the default channel.

![](/images/Screenshot\_2023-01-02\_at\_2.09.12\_PM.png)

### Subscribers

The last step is to create two subscribers that handle the following:

1.  Add customers to the Members customer group on registration.
2.  Assign the Members sales channel to members’ carts.

The first one’s implementation was explained earlier, and you can find the code block in a previous section.

As for the second, you need to create a subscriber that subscribes to the `cart.created` and the `cart.customer_updated` events. If the customer associated with the cart belongs to the Members customer group, the Members sales channel is associated with the cart. Otherwise, the default channel is associated with the cart.

```
import { CartService, EventBusService, SalesChannel, SalesChannelService } from "@medusajs/medusa"

type InjectedDependencies = {
  eventBusService: EventBusService
  cartService: CartService
  salesChannelService: SalesChannelService
}

class MemberDiscountSubscriber {
  cartService: CartService
  salesChannelService: SalesChannelService

  constructor (container: InjectedDependencies) {
    this.cartService = container.cartService
    this.salesChannelService = container.salesChannelService

    container.eventBusService.subscribe('cart.created', this.handleCreate)
    container.eventBusService.subscribe('cart.customer_updated', this.handleCreate)
  }

  handleCreate = async (data) => {
    const cartId = typeof data === 'string' ? data : data.id

    //retrieve default sales channel
    const defaultChannel = await this.salesChannelService.retrieveByName('Default Sales Channel') as SalesChannel

    //retrieve sales channel
    const membersChannel = await this.salesChannelService.retrieveByName('Members') as SalesChannel

    if (!membersChannel) {
      //sales channel does not exist
      return
    }

    //retrieve cart
    const cart = await this.cartService.retrieve(cartId, {
      relations: ['customer', 'customer.groups']
    })

    const isMember = cart.customer?.groups.some((group) => group.name === 'Members')
    
    await this.cartService.update(cartId, {
      sales_channel_id: isMember ? membersChannel.id : defaultChannel.id
    })
  }
}

export default MemberDiscountSubscriber
```

## Feature 5: Birthday Deals

![](/images/Screenshot\_2023-01-02\_at\_3.21.29\_PM.png)

Another member benefit that Nike offers is birthday deals. If a member registers before their birthday, they’ll receive a discount on their birthday. Nike emails them with details about the discount.

This can be implemented in Medusa using a combination of features: Customer Groups, and Scheduled Jobs. The usage of customer groups is as explained in earlier sections.

### Scheduled Jobs

Medusa allows developers to schedule a task to run at a specific time using scheduled jobs. In this context, a scheduled job can be used to run every day at midnight. Then, it checks which customers’ birthday is set to today. For those customers, an email is sent with the deal details.

You can make use of the `metadata` field to store custom fields such as `birthday`. You’ll need to save it when the customer registers or allow the customer to set their birthday in their profile.

```
const checkBirthdaysJob = async (container, options) => {
  const jobSchedulerService = container.resolve("jobSchedulerService");
  jobSchedulerService.create("check-birthdays", {}, "0 0 * * *", async () => {
    //job to execute
    const customerService = container.resolve("customerService");
    const customers = await this.customerService.list({
      metadata: {
        birthday: Date.now().toString()
      }
    })

		customers.forEach((customer) => {
			//create discount/gift card
			//and send email
		})
  })
}

export default checkBirthdaysJob;
```

The deal can be implemented either using Discounts or Custom Gift Cards. For the first option, you create a discount with a random code and send it to the customer. For the second option, you create a custom gift card with an amount, and send the gift card’s code to the customer.

To send the email to the customer, you’ll need to integrate a third-party plugin such as [SendGrid](https://docs.medusajs.com/add-plugins/sendgrid).

## Do More with Medusa

The features explored in this article aim to provide a better user experience for customers. This is what sets big brands like Nike apart and keep their customers loyal.

Although Nike has developed its own headless commerce platform from scratch, using a platform like Medusa can provide a similar amount of features, extensibility, and scalability.

Check out the [documentation](https://docs.medusajs.com/quickstart/quick-start) for more details on what Medusa is and how to get started.

> Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via [Discord](https://discord.gg/F87eGuwkTp).



Unlock the full potential of your ecommerce store with Medusa using Nike's 5 powerful performant features.

Transform Your Ecommerce with Medusa Implementing 5 Powerful Nike Features

## +172,000 article reads

## +100 articles

## +150 community writers

These are some of the amazing results we achieved here at [Medusa](https://github.com/medusajs/medusa) when we invested more resources and focus into our content in 2022.

In this article, we want to highlight 10 of the best and most-read articles we put out in 2022. If you want to stay up to date on our newest content and product releases, then [sign up to our newsletter](https://ky5eo2x1u81.typeform.com/newsletter).

If you want to become part of our community writer program, then you can read more [here](https://www.notion.so/Write-for-us-74a2bf43b4ce43eeba200382f599321a).

## Why content is important at Medusa

As one of the most used platforms in the OS ecom space, we want to take an active part in educating developers not only about Medusa, but the space in general and the tools available.

We tailor our content towards solving community problems, researching new trends and ideas in the open source and ecommerce realm, and share company-related insights. This allows us to stay connected with the developer community, especially with the help of our community writers.

If you want to know more about Medusa itself, then you can check out our [documentation](https://docs.medusajs.com/) for details on its features and how to get started.

## 10 Best Medusa Articles in 2022

### Announcement: Medusa's $8M USD Seed Round

![https://medusajs.com/images/seedround.png](https://medusajs.com/images/seedround.png)

[Read here](https://medusajs.com/blog/announcement-8m-usd-seed-round-to-build-the-leaading-ecom-platform-for-devs).

In July of 2022, we announced our $8M USD Seed round led by LocalGlobe and Dawn Capital. The story was also covered by [TechCrunch](https://techcrunch.com/2022/07/15/medusa-shopify-open-source-e-commerce-javascript-developers/) and [BusinessWire](https://www.businesswire.com/news/home/20220715005035/en/Medusa-Raises-8m-to-Build-the-Leading-E-Commerce-Platform-for-Developers).

With the seed round, we will continue building amazing features in Medusa, building integrations and plugins for third-party tools, and providing the best developer experience.

### 9 Best Ecommerce UX Practices From the World's Best Ecommerce Site

![https://medusajs.com/images/ux-practices.jpg](https://medusajs.com/images/ux-practices.jpg)

[Read here](https://medusajs.com/blog/9-best-ecommerce-ux-practices-with-examples).

McMaster-Carr has been crowned the title “best e-commerce site” by HackerNews users. As we are building Medusa with the aim to be the best ecommerce platform, this grew our curiosity which lead us to do a research around this website with the help of a community writer.

We then came up with 9 best user experience (UX) practices we picked up from McMaster-Carr in the hopes of it being helpful for businesses and ecommerce developers everywhere.

### Creating a React Native Ecommerce app with Medusa

![https://medusajs.com/images/react-native-ps.jpg](https://medusajs.com/images/react-native-ps.jpg)

[Read here](https://medusajs.com/blog/creating-react-native-ecommerce-app-with-medusa).

Mobile apps have become an essential requirements for all types of businesses, specifically ecommerce businesses. Medusa’s composable architecture makes it possible to integrate the headless server to any frontend framework or platform.

This tutorial written by one of our community writers help readers interested in developing an ecommerce app for their Medusa server get started using React Native. It has become one of our top viewed articles of all time.

### Headless Architecture Explained to a 5-Year-Old

![https://medusajs.com/images/Myjb_gcYY.webp](https://medusajs.com/images/Myjb_gcYY.webp)

[Read here](https://medusajs.com/blog/headless-architecture).

In the past couple of years, headless has become a buzz-word used by different types of companies and solutions, including Medusa. You’ve probably heard of headless ecommerce or headless CMS, but what does it really mean?

This article takes the challenge of simplifying the meaning of headless that a 5 year old can understand it.

### Medusa vs. Magento: Comparing two open source ecommerce frameworks

![https://medusajs.com/images/article-cover1.png](https://medusajs.com/images/article-cover1.png)

[Read here](https://medusajs.com/blog/medusa-vs-magento-comparing-two-open-source-ecommerce-frameworks).

Both Medusa and Magento are open source platforms with a long list of impressive ecommerce and development features. This article compares both platforms, listing what each has to offer in different domains including multi-currency and region support, payment and shipping providers, installation and deployment, and more.

### Top 5 open source ecommerce platforms for B2B: A feature-by-feature review

![https://medusajs.com/images/feature-by-feature%20(2).jpg](https://medusajs.com/images/feature-by-feature%20$2$.jpg)

[Read here](https://medusajs.com/blog/top-5-open-source-ecommerce-platforms).

This article was also part of our December B2B launch. We conducted a research along with a community writer to put together a list of features that a B2B platform must have based on general B2B use cases.

We then chose 5 top ecommerce platforms (including Medusa) and checked whether these features exist in those platforms. This will help any business or developer unsure about which platform to choose for their B2B business make a choice.

### Case study: How Tekla improved conversion by 70% at record speed using Medusa

![https://medusajs.com/images/tekla-conversion-rate-2.jpg](https://medusajs.com/images/tekla-conversion-rate-2.jpg)

[Read here](https://medusajs.com/blog/tekla).

Tekla is textile brand operating in more than 50 countries around the world. After migrating from WooCommerce to Medusa, their conversion rate increased by 70% and they significantly reduced their customer service response hours, among other achievements.

This article explores Tekla’s challenge with their previous solution, and how they utilized Medusa to bring their vision to life.

### What is Composable Commerce?

![https://medusajs.com/images/What_is_Composable_Commerce\_.jpg](https://medusajs.com/images/What_is_Composable_Commerce\_.jpg)

[Read here](https://medusajs.com/blog/composable-commerce).

The comparison between Monolithic and Composable architectures have been the talk of the developer community in recent years. This is especially for ecommerce platforms, as we see more adoption of the composable architecture by new and existing tools.

This article dives into the differences between the two architectures, and why we at Medusa believe composable commerce is the future.

### Medusa Hackathon Winner Announcement

![](/images/hackathon-banner-large-purple-live.jpeg)

[Read here](https://medusajs.com/blog/hackathon-winners/).

In October of 2022, we hosted a Medusa Hackathon with cool prizes. We got +200 project submissions which exceeded our expectations.

This article highlights the winners and runner up list. Check it out to see what cool projects were built with Medusa!

### Case Study: How Palmes built a Global on-brand Store in <6 Weeks with Medusa

![https://medusajs.com/images/palmes.jpg](https://medusajs.com/images/palmes.jpg)

[Read here](https://medusajs.com/blog/palmes/).

Palmes is a meanswear brand with roots in tennis culture for wearing on and off court that sells tennis wear and accessories. By creating their ecommerce store with Medusa, they utilized advanced ecommerce features such as selling in over 40 countries and building a fully-tailored user experience in their storefront in less than 6 weeks.

This article explores Palmes story of how they used Medusa to create their ecommerce platform with a unique storefront.

## Close contestants

Other popular articles that we believe are worth highlighting:

*   [How to Create a Comic Book Online Store with Medusa, Gatsby, PayPal, and MeiliSearch](https://medusajs.com/blog/how-to-create-comic-book-online-store-with-medusa-gatsby-paypal-meilisearch)
*   [Create an Ecommerce Storefront with Medusa, Strapi, and Remix](https://medusajs.com/blog/ecommerce-storefront-medusa-strapi-remix)
*   [Build A Video Game Store with Medusa, Next.js, Stripe, and Algolia](https://medusajs.com/blog/build-a-video-game-store-with-medusa-next-js-stripe-algolia)
*   [Explained in 5 Levels of Difficulty: Ecommerce by Medusa](https://medusajs.com/blog/explained-5-levels-of-difficulty-ecommerce-by-medusa)
*   [How to Create a Wishlist in Medusa](https://medusajs.com/blog/how-to-create-a-wishlist-with-medusa)
*   [Why Headless Commerce is the Perfect Solution for Omnichannel Support](https://medusajs.com/blog/why-headless-commerce-is-the-perfect-solution-for-omnichannel-support)
*   [How to Add Product Reviews to Your Medusa Server and Next.js Storefront](https://medusajs.com/blog/how-to-add-product-reviews-to-your-medusa-server-and-next-js-storefront)
*   [Medusa B2B Part 1: Set Up B2B Store](https://medusajs.com/blog/medusa-b2b-part-1)
*   [Magento Source Plugin: Import your Magento Data into Medusa](https://medusajs.com/blog/magento-to-medusa)
*   [How to Create An Ecommerce App with Medusa and Ionic](https://medusajs.com/blog/how-to-create-an-ecommerce-app-with-medusa-and-ionic)
*   [How to Create a One-Page Swag Store In 15 Minutes Using Medusa.Express](https://medusajs.com/blog/how-to-create-a-one-page-swag-store-in-15-minutes-using-medusa-express)

## More Top Content in 2023

Our focus on providing top content does not end here. We will put more focus on putting out more events, campaigns, launches, and other general articles.

For a full view of our articles, you can visit our blog at [medusajs.com/blog](http://medusajs.com/blog).


How we improved our documentation

Top 5 B2B ecommerce sites: Learn worldclass UX design tricks

I am a UX specialist experienced in both developing and texting great UX experiences.

For this article series, I’ve spent time digging into some of the best ecommerce sites for B2B and zoomed in on what makes them stand out on their UX.

Read below to learn more about the top B2B ecommerce sites we chose and what to expect from this series.

## Medusa’s UX and B2B Focus

[Medusa](https://medusajs.com/) provides bespoke commerce infrastructure through its composable commerce platform. Its extendible and open setup makes it well-suited to support cases that require setup flexibility and is easy to customize.

Medusa’s headless architecture makes it possible to build bespoke storefronts that can be optimized to provide a great UX, leading to customer conversion. This is needed in a B2B setting, where most stores are not set up well to cater to the particular needs of a B2B customer.

If you’d like to know more about our product and how we serve B2B users, feel free to visit our [B2B page](https://medusajs.com/b2b-commerce-platform/).

## Top 5 B2B Ecommerce sites

### 1- McMaster-Carr

![](/images/mcmaster-carr-sidebar-navigation-15790696.gif)

[McMaster-Carr](https://www.mcmaster.com/) was previously crowned by HackerNews as the best ecommerce website. This motivated us to write all the UX tips that this ecommerce website offers, and start this series as a whole.

Some of its important features are smart site search and filters, simplified content and design, and seamless checkout experience.

Read more in [part 1](https://medusajs.com/blog/9-best-ecommerce-ux-practices-with-examples) of this series.

### 2- Grainger

![](/images/ezgif.com-gif-maker%20$6$.gif)

[Grainger](https://www.grainger.com/) is an industrial supplier that offers a large selection of private-label and brand-name products from some of the world’s top manufacturers.

Some of its features that provide a great UX include well-organized categories, a supercharged shopping experience, and a powerful search experience.

Read more in [part 2](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-grainger/) of this series.

### 3- Amy Myers MD

![](/images/Screen_Recording\_2022-12-03\_at\_06.10.20\_PM-88d5936c.gif)

[Amy Myers MD](https://store.amymyersmd.com/) store provides high-quality natural supplements, free of binders, additives,
fillers, artificial ingredients, and chemicals.

Some of its features that provide a great UX include an optimized search experience, seamless cart and checkout flows, and effective product-listing pages.

Read more in [part 3](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-amy-myers-md/) of this series.

### 4- Blake

![](/images/ezgif.com-gif-maker%20$2$%20$1$.gif)

[Blake](https://www.blake-envelopes.com/) is a market leader in the world of paper, envelope, and postal packaging solutions.

Some of its features that provide a great UX include clean and clear menus, informative product pages, and next-level filters.

Read more in [part 4](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-blake/) of this series.

### 5- Massey Ferguson

![](/images/ezgif.com-gif-maker%20$3$%20$1$.gif)

[Massey Ferguson](https://www.masseyferguson.com/) is a world-famous brand supplying a huge range of tractors and agricultural machinery. It provides a limited number of products, but each product is complex and has a lot of details.

Some of its features that provide a great UX include intuitive and smooth navigation, summarized products section on the homepage, and highlighted promotions.

Read more in [part 5](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-massey-ferguson/) of this series.

## Build your B2B Store with Medusa

With Medusa, the open-source B2B platform, build your ecommerce store to include all these features and more. Use Sales Channels, Customer Groups, Price Lists, and other features to build your B2B ecommerce store.

Learn more [here](https://medusajs.com/b2b-commerce-platform), and follow this tutorial to [start building your B2B store](https://medusajs.com/blog/medusa-b2b-part-1).

## Want More B2B Content?

These are just a few of the essential B2B ecommerce practices that you need to know. By following these practices and tricks, you can ensure that your business is catapulting your brand to the top.

This way, you’ll be providing a good experience for your customers, and increasing sales and profits.

There's more to sift through and learn, we advise reading each store article.

Furthermore, be sure to check out some of Medusa’s articles on the B2B ecommerce:

*   [B2B Perspective report](https://medusajs.com/pdf/B2B-OS-Perspective.pdf)
*   [2-series tutorial](https://medusajs.com/blog/medusa-b2b-part-1) on how to create a B2B ecommerce platform with Medusa
*   [Comparison between top 5 B2B ecommerce platforms](https://medusajs.com/blog/top-5-open-source-ecommerce-platforms)
*   [9 UX tips from the best B2B ecommerce website](https://medusajs.com/blog/9-best-ecommerce-ux-practices-with-examples) (as crowned by HackerNews)


Are you looking to improve your B2B ecommerce UX? Check out the top 5 B2B ecommerce sites and learn from the best in the industry.

5 B2B Ecommerce Sites to Learn UX Design

Top 5 B2B Ecommerce sites: Massey Ferguson (5/5)

I am a UX specialist experienced in both developing and texting great UX experiences.

For this article series, I’ve spent time digging into some of the best ecommerce sites for B2B and zoomed in on what makes them stand out on their UX.

I will go through and dissect the best B2B websites I’ve found one by one. Hopefully, this gives you some inspiration to take into your ecommerce site.

## Series overview

1.  [The world’s best B2B ecommerce UX: McMaster-Carr (1/5)](https://medusajs.com/blog/9-best-ecommerce-ux-practices-with-examples/)
2.  [Top 5 B2B Ecommerce sites: Grainger (2/5)](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-grainger/)
3.  [Top 5 B2B Ecommerce sites: Amy Myers MD (3/5)](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-amy-myers-md/)
4.  [Top 5 B2B Ecommerce sites: Blake (4/5)](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-blake/)

## Medusa’s UX and B2B Focus

[Medusa](https://medusajs.com/) provides bespoke commerce infrastructure through its composable commerce platform. Its extendible and open setup makes it well-suited to support cases that require setup flexibility and is easy to customize.

Medusa’s headless architecture makes it possible to build bespoke storefronts that can be optimized to provide a great UX, leading to customer conversion. This is needed in a B2B setting, where most stores are not set up well to cater to the particular needs of a B2B customer.

If you’d like to know more about our product and how we serve B2B users, feel free to visit our [B2B page](https://medusajs.com/b2b-commerce-platform/).

# Massey Ferguson

[Massey Ferguson](https://www.masseyferguson.com/) is a world-famous brand supplying a huge range of tractors and agricultural machinery. It provides a limited number of products, but each product is complex and has a lot of details.

Also, each product comes with a manual that allows customers to figure out whether the product fits their needs or not.

This article explores some of Massey Ferguson’s powerful UX, such as:

*   Intuitive and Smooth Navigation: provide the navigation that helps your customers find what they need.
*   Summarized Product Section on The Homepage: the homepage is typically the first page your customers will see. Utilize it to show your customers what your store offers.
*   Highlighted Promotions: motivate your customers to purchase by emphasizing the promotions you offer.

## 1- Intuitive and Smooth Navigation

Your website navigation menu is the key to success in your ecommerce website. The easier and more engaging your navigation experience is, the easier it will be for customers to find what they need.

Some good navigation tips that Massey Ferguson applies:

*   In the products dropdown menu, customers can see the main two categories at the top of the menu and can select one of them based on what exactly they looking for.

![](/images/Screen_Shot\_2022-11-29\_at\_10.27.52\_PM.png)

*   When a customer hovers over one of the subcategories, the product names under these subcategories are shown next to the main category. This gives the customer a glimpse of the available products before diving into a category and helps narrow their options.

![](/images/Screen_Shot\_2022-11-30\_at\_10.49.05\_AM.png)

*   Similarly, when the customer hovers over a product’s name, the product’s image and details are shown in the menu. Customers can easily navigate between available products before deciding on which one fits their needs.

![](/images/Screen_Shot\_2022-11-29\_at\_10.06.56\_PM.png)

## 2- Summarized Product Section on The Homepage

As the homepage is most likely the first page a customer will see of your website, you can utilize it to show a selection of your store’s products.

For B2B ecommerce websites, the homepage should show the customer what this store specializes in and the overall available products and options.

Massey Ferguson utilizes the homepage to showcase their available products by doing the following:

*   Customers can see the main categories on the home page as filters. They can choose between the available categories to get a quick overview of the available products under that category.

![](/images/ezgif.com-gif-maker%20$3$.gif)

*   Quick view to view more information for all products in the grid, or per product instead of viewing the product page. Other information can serve as a significant motivator for different types of customers, so Include information extras that will nudge customers to purchase.

*   The products’ main details can be easily viewed right from the homepage by toggling the Quick View option. Customers can easily find what they’re looking for without leaving the home page.

![](/images/ezgif.com-gif-maker%20$4$.gif)

*   Product details are shown as short details with clear icons. Customers can easily scan the details of the products in seconds.

## 3- Highlighted Promotions

B2B customers come to your store with specific products in mind, but promotions are always appealing. It’s important to properly highlight your promotions, as it catches the customer’s eye immediately.

Massey Ferguson does a good job of highlighting its promotions:

*   Promotions are shown in the hero section, which is the first section of the website that the customer sees.

![](/images/Screen_Shot\_2022-12-01\_at\_11.32.28\_AM.png)

*   On the Offers page, promotions are shown with an expiry date. This urges customers to quickly purchase before the promotion ends.

![](/images/Screen_Shot\_2022-12-01\_at\_12.02.40\_PM.png)

*   The offer details are noticeable, and the time of the offer is spotlighted on the product card, to ensure that all customers are aware of the promotions details and it’s impossible to miss. Also, it’s easy to check more details by clicking the “Find out more” button which opens the details on the same page and that doesn't distract the customer by navigate between pages.
*   For each promotion, its details and expiry date are shown in the offers list. Customers can check if there are any promotions for the products they want to purchase directly from the list.

![](/images/Screen_Shot\_2022-12-01\_at\_12.06.50\_PM.png)

## Build your B2B Store with Medusa

With Medusa, the open-source B2B platform, build your ecommerce store to include all these features and more. Use Sales Channels, Customer Groups, Price Lists, and other features to build your B2B ecommerce store.

Learn more [here](https://medusajs.com/b2b-commerce-platform), and follow this tutorial to [start building your B2B store](https://medusajs.com/blog/medusa-b2b-part-1).

## Want More UX Tips?

1.  [The world’s best B2B ecommerce UX: McMaster-Carr (1/5)](https://medusajs.com/blog/9-best-ecommerce-ux-practices-with-examples/)
2.  [Top 5 B2B Ecommerce sites: Grainger (2/5)](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-grainger/)
3.  [Top 5 B2B Ecommerce sites: Amy Myers MD (3/5)](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-amy-myers-md/)
4.  [Top 5 B2B Ecommerce sites: Blake (4/5)](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-blake/)



Are you looking to improve your B2B ecommerce UX? Check out the top 5 B2B ecommerce sites, including Massey Ferguson, and learn from the best in the industry.

I am a UX specialist experienced in both developing and texting great UX experiences.

For this article series, I’ve spent time digging into some of the best ecommerce sites for B2B and zoomed in on what makes them stand out on their UX.

I will go through and dissect the best B2B websites I’ve found one by one. Hopefully, this gives you some inspiration to take into your ecommerce site.

## Series overview

1.  [The world’s best B2B ecommerce UX: McMaster-Carr (1/5)](https://medusajs.com/blog/9-best-ecommerce-ux-practices-with-examples/)
2.  [Top 5 B2B Ecommerce sites: Grainger (2/5)](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-grainger/)
3.  [Top 5 B2B Ecommerce sites: Amy Myers MD (3/5)](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-amy-myers-md)
4.  [Top 5 B2B Ecommerce sites: Massey Ferguson (5/5)](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-massey-ferguson)

## Medusa’s UX and B2B Focus

[Medusa](https://medusajs.com/) provides bespoke commerce infrastructure through its composable commerce platform. Its extendible and open setup makes it well-suited to support cases that require setup flexibility and is easy to customize.

Medusa’s headless architecture makes it possible to build bespoke storefronts that can be optimized to provide a great UX, leading to customer conversion. This is needed in a B2B setting, where most stores are not set up well to cater to the particular needs of a B2B customer.

If you’d like to know more about our product and how we serve B2B users, feel free to visit our [B2B page](https://medusajs.com/b2b-commerce-platform/).

## Blake

[Blake](https://www.blake-envelopes.com/) is a market leader in the world of paper, envelope, and postal packaging solutions. Blake's B2B ecommerce has a well-designed homepage, an accessible menu, and direct access to brands, colors, and product specifications.

Blake’s product pages include detailed descriptions and different options to order. Overall, it focuses on attracting customers by providing them with seamless features.

This article explores some of Blake’s powerful UX, such as:

*   Clean and Clear Menus: design the layout of your menus to make it easy for customers to find the categories they’re looking for.
*   Informative product pages: provide your B2B customers with all the information they need, encouraging them to purchase.
*   Next-level filters: allow your customers to filter beyond the filters. Allow them to navigate their way through your products list to find what they need.

## 1- Clean and Clear Menus

B2B customers often know the exact specifications of the product they want and just want to find it as quickly as possible on your site.

Your B2B ecommerce website should make it easy for customers to scan available products and categories to find what they need efficiently.

Some examples of how Blake does this:

*   The typography and spacing used between different elements, products, and categories, make it easier for the customer to scan available products or categories to find what they need.

![](/images/Screen_Shot\_2022-12-04\_at\_11.02.43\_AM.png)

*   The available options in the menu are grouped into related sets. For each group, concise and descriptive labels are used.

*   Customers have the choice to navigate available products using sizes, types, colors, or brands.

*   Different designs for different mega menus, depending on the top category, the menu shows up in different styles and different types of links to promote customers for what matters in this category.

*   Mega menus are designed differently based on what products are available in the top category of that menu. Customers browsing these menus get a glance of important items in that category.

![](/images/ezgif.com-gif-maker%20$2$.gif)

## 2- Informative Product Pages

The product page should be simple and not stuffed with too much information. This allows the customer to properly focus on the product and its properties.

Some ways that Blake does this:

*   Product images are of high quality and can be zoomed in, which gives the customer a closer and more realistic look at the product. For products like those that Blake provides, this is essential as customers can almost get the textual feeling of the products.
*   Provide a brief and informed description next to the image and below provide detailed product information in the table. the descriptions are a key area here so clear, well-written product descriptions that help customers to choose the product is the right fit.
*   Products have a brief description at the top of the page, but more details are shown in a table below it. Customers can use the description to learn the general details of the product, then, if they’re interested, browse the more detailed table.

![](/images/Screen_Shot\_2022-12-04\_at\_2.20.08\_PM.png)

![](/images/Screen_Shot\_2022-12-04\_at\_2.20.01\_PM.png)

*   Breadcrumbs are available at the top of the product page. It helps the customer understand where they are on the website, as well as what category they’re browsing.

![](/images/Screen_Shot\_2022-12-04\_at\_2.14.25\_PM.png)

*   Customers have different purchasing options, either by the pack or by units. This gives B2B customers freedom while ordering and allows them to easily order large quantities.

![](/images/Screen_Recording\_2022-12-04\_at\_02.26.03\_PM-c3f23c9b.gif)

*   If customers register, they can request a sample or get help from Blake’s sales team when ordering large quantities. This encourages customers to register.

![](/images/Screen_Shot\_2022-12-04\_at\_2.35.44\_PM.png)

## 3- Next-Level Filters

Product filters are one of the essential elements impacting your customers’ user experience. Optimizing your product filters increase customer engagement.

Some practices that Blake applies in their product filters:

*   Next to filters, the number of products under that filter is shown. This gives the customer an idea of the results they’ll get before applying the filter.

![](/images/Screenshot%202022-12-21%20at%202.59.04%20PM.png)

*   Customers can see all available categories in the filter. When a filter is applied, not only the products are updated, but the filters as well based on the remaining products. This makes the customer’s browsing experience seamless.

![](/images/Screen_Shot\_2022-12-04\_at\_9.41.11\_PM.png)

*   The selected filters are shown at the top of the filter list and can be easily cleared. Customers can navigate between different sets of filters by just clearing applied filters, then applying new ones.

![](/images/Screen_Shot\_2022-12-04\_at\_9.50.12\_PM.png)

*   The short filter list saves customers time and makes filtering less frustrating for them.

## Build your B2B Store with Medusa

With Medusa, the open-source B2B platform, build your ecommerce store to include all these features and more. Use Sales Channels, Customer Groups, Price Lists, and other features to build your B2B ecommerce store.

Learn more [here](https://medusajs.com/b2b-commerce-platform), and follow this tutorial to [start building your B2B store](https://medusajs.com/blog/medusa-b2b-part-1).

## Want More UX Tips?

This series covers other top B2B websites that provide good UX. Check other parts out to get more tips:

1.  [The world’s best B2B ecommerce UX: McMaster-Carr (1/5)](https://medusajs.com/blog/9-best-ecommerce-ux-practices-with-examples/)
2.  [Top 5 B2B Ecommerce sites: Grainger (2/5)](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-grainger/)
3.  [Top 5 B2B Ecommerce sites: Amy Myers MD (3/5)](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-amy-myers-md)
4.  [Top 5 B2B Ecommerce sites: Massey Ferguson (5/5)](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-massey-ferguson)



Are you looking to improve your B2B ecommerce UX? Check out the top 5 B2B ecommerce sites, including Blake, and learn from the best in the industry.

Top 5 B2B Ecommerce sites: Blake (4/5)

Top 5 B2B Ecommerce sites: Amy Myers MD (3/5)

I am a UX specialist experienced in both developing and texting great UX experiences.

For this article series, I’ve spent time digging into some of the best ecommerce sites for B2B and zoomed in on what makes them stand out on their UX.

I will go through and dissect the best B2B websites I’ve found one by one. Hopefully, this gives you some inspiration to take into your ecommerce site.

## Series overview

1.  [The world’s best B2B ecommerce UX: McMaster-Carr (1/5)](https://medusajs.com/blog/9-best-ecommerce-ux-practices-with-examples)
2.  [Top 5 B2B Ecommerce sites: Grainger (2/5)](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-grainger/)
3.  [Top 5 B2B Ecommerce sites: Blake (4/5)](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-blake)
4.  [Top 5 B2B Ecommerce sites: Massey Ferguson (5/5)](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-massey-ferguson)

## Medusa’s UX and B2B Focus

[Medusa](https://medusajs.com/) provides bespoke commerce infrastructure through its composable commerce platform. Its extendible and open setup makes it well-suited to support cases that require setup flexibility and is easy to customize.

Medusa’s headless architecture makes it possible to build bespoke storefronts that can be optimized to provide a great UX, leading to customer conversion. This is needed in a B2B setting, where most stores are not set up well to cater to the particular needs of a B2B customer.

If you’d like to know more about our product and how we serve B2B users, feel free to visit our [B2B page](https://medusajs.com/b2b-commerce-platform/).

## Amy Myers MD

[Amy Myers MD](https://store.amymyersmd.com/) store provides high-quality natural supplements, free of binders, additives,
fillers, artificial ingredients, and chemicals.

Its B2B ecommerce website is carefully designed. It offers more than enough quality information on its products via descriptions and images. It efficiently provides customers with all the details they need.

This article explores some of Amy Myers MD’s powerful UX, such as:

*   Great on-site search experience: utilize your search bar to provide your customers with the results they’re looking for.
*   Seamless cart and checkout flow: provide your customer with the necessary features to encourage them further toward purchase.
*   Effective product-listing page: showcase your products in the best light, with enough information to build up the customer’s curiosity.

## 1- Optimized Search Experiences

In B2B, website search is crucial. B2B customers often already know what they want to purchase and need the ability to quickly and easily find what they are looking for. A good search UX would allow the customer to do just that.

Some of the features that they implemented to provide a good search experience:

*   On the website, customers can choose to search from different domains of the website such as the store, help center, and more.

![](/images/Screen_Shot\_2022-11-21\_at\_4.16.29\_PM.png)

*   Once the customer starts writing the query, they can see the result in a drop-down menu. The results show a photo and the price along with the title. This helps the customers to make an informed decision.

![](/images/ezgif.com-gif-maker%20$1$-914c672a.gif)

*   On the search results page, if the product name includes words from the search query, these words are highlighted. This allows the customer to focus on products that are potentially more accurate for their query.

![](/images/Screen_Shot\_2022-11-21\_at\_4.23.55\_PM.png)

*   There is a search bar in the middle of the home page. This search bar shows trending searches on the website. That increases the customer’s curiosity to know more about products and might encourage them to purchase.

![](/images/Screen_Shot\_2022-11-30\_at\_4.44.34\_PM.png)

*   The search bar is sticky at the top of the page so customers can search no matter where they are down the page.

## 2- Seamless Cart and Checkout Flow

The shopping cart and checkout pages are major deciding factors in making customers satisfied and reducing abandonment. It can also increase customer loyalty as they’ll feel more comfortable purchasing from your store again.

Some of the good UX that Amy Myers MD implements:

*   Customers can check out as guests. This makes the purchasing process faster and easier. The less steps a customer has to take to place an order, the higher the chance they’ll go through until the end of the process.

![](/images/Screen_Shot\_2022-11-30\_at\_2.52.05\_PM.png)

*   Customers can switch between one-time purchases and subscription purchases of products directly from the cart.

![](/images/Screen_Recording\_2022-12-06\_at\_12.34.33\_PM.gif)

*   Customers can see how many points they can earn after they purchase the order if they have an account. This can encourage customers to register and purchase more in the future.

![](/images/Screen_Shot\_2022-12-06\_at\_12.48.12\_PM.png)

*   Customers can start their checkout experience directly from the navigation bar, as a checkout button is available next to the cart. The checkout button is also designed in a way that catches the customer’s eye.

![](/images/Screen_Shot\_2022-11-30\_at\_3.04.12\_PM.png)

*   On the checkout page, customers can see some recommended products under the shopping list. The products have a rating score to encourage customers to purchase them.

![](/images/Screen_Shot\_2022-11-30\_at\_4.06.21\_PM.png)

## 3- Effective Product Listing Pages

The product listing display has a significant impact on the way your customers interact with the products. It can boost your B2B ecommerce website’s UX.

Some of the good practices that this website applies:

*   The grid view and the spaces between cards are easy on the eyes. It allows customers to browse and compare products.

![](/images/Screen_Shot\_2022-12-03\_at\_7.38.24\_PM-5001fd88.png)

*   When a customer hovers over a product image, they can see a review left by other customers that have purchased the product. This encourages the customer to see the product’s details and learn more about it.

![](/images/Screen_Recording\_2022-12-03\_at\_06.10.20\_PM.gif)

*   Products on sale are labeled with a tag on the product card. Customers can also see the prices before and after the sale, and how much they’ll save.

![](/images/Screen_Shot\_2022-12-03\_at\_6.04.30\_PM.png)

## Build your B2B Store with Medusa

With Medusa, the open-source B2B platform, build your ecommerce store to include all these features and more. Use Sales Channels, Customer Groups, Price Lists, and other features to build your B2B ecommerce store.

Learn more [here](https://medusajs.com/b2b-commerce-platform), and follow this tutorial to [start building your B2B store](https://medusajs.com/blog/medusa-b2b-part-1).

## Want More UX Tips?

This series covers other top B2B websites that provide good UX. Check other parts out to get more tips:

1.  [The world’s best B2B ecommerce UX: McMaster-Carr (1/5)](https://medusajs.com/blog/9-best-ecommerce-ux-practices-with-examples)
2.  [Top 5 B2B Ecommerce sites: Grainger (2/5)](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-grainger/)
3.  [Top 5 B2B Ecommerce sites: Blake (4/5)](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-blake)
4.  [Top 5 B2B Ecommerce sites: Massey Ferguson (5/5)](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-massey-ferguson)



Top 5 B2B Ecommerce sites: Grainger (2/5)

I am a UX specialist experienced in both developing and texting great UX experiences.

For this article series, I’ve spent time digging into some of the best ecommerce sites for B2B and zoomed in on what makes them stand out on their UX.

I will go through and dissect the best pages I’ve found one by one. Hopefully, this gives you some inspiration to take into your ecommerce site.

## Series overview

1.  [The world’s best B2B ecommerce UX: McMaster-Carr (1/5)](https://medusajs.com/blog/9-best-ecommerce-ux-practices-with-examples/)

2.  [Top 5 B2B Ecommerce sites: Amy Myers MD (3/5)](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-amy-myers-md)

3.  [Top 5 B2B Ecommerce sites: Blake (4/5)](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-blake)

4.  [Top 5 B2B Ecommerce sites: Massey Ferguson (5/5)](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-massey-ferguson)

## Medusa’s UX and B2B Focus

[Medusa](https://medusajs.com/) provides bespoke commerce infrastructure through its composable commerce platform. Its extendible and open setup makes it well-suited to support cases that require setup flexibility and is easy to customize.

Medusa’s headless architecture makes it possible to build bespoke storefronts that can be optimized to provide a great UX, leading to customer conversion. This is needed in a B2B setting, where most stores are not set up well to cater to the particular needs of a B2B customer.

If you’d like to know more about our product and how we serve B2B users, feel free to visit our [B2B page](https://medusajs.com/b2b-commerce-platform/).

# Grainger

[Grainger](https://www.grainger.com/) is an industrial supplier that offers a large selection of private-label and brand-name products from some of the world’s top manufacturers.

With Grainger, customers can place bulk orders quickly and seamlessly. The main focus is on all-inclusive categorization. Customers can easily filter categories to narrow down their options.

This article explores some of Grainger’s powerful UX, such as:

*   Well-organized categories: assist your customers in finding exactly what they need from the first scan.
*   B2B-focused Shopping Experience: understand your customers and implement the necessary features that convert visitors to customers.
*   Powerful search experience: provide the customer with different options that lead to the results they’re looking for.

## 1- Well-Organized Categories

Good categorization helps customers find what they need quickly. When a customer is looking for a specific product, they’ll try to find the category that this product could fit into.

Ensuring that your B2B ecommerce website’s categories are clearly outlined and showcase enough information about their underlying products will help your customers find what they require easily.

Grainger does a good job at this by doing the following:

*   On the homepage, popular categories are shown in a grid layout. Each category has a name and a large icon that gives an idea of what products are available in the category. This makes it easier for customers to scan and find the category they’re looking for.

![](/images/Screen_Shot\_2022-11-29\_at\_10.36.14\_PM.png)

*   All available categories can also be browsed on a dedicated Product Categories page. Customers can use this page in case they don’t find what they require among the categories on the homepage.

![](/images/Screen_Shot\_2022-11-29\_at\_10.36.36\_PM.png)

*   Every category level has a detailed description. This helps the customer understand more about what the category is and what they can find in it.

![](/images/Screen_Recording\_2022-11-30\_at\_12.47.41\_PM.gif)

*   Categories can also be browsed directly from the mega menu in the navigation bar. They are sorted in alphabetical order, making it easy to scan and find something specific.

![](/images/Screen_Shot\_2022-11-30\_at\_1.24.32\_PM.png)

## 2- B2B-focused Shopping Experience

B2B ecommerce websites should streamline the shopping and checkout experience to ensure their visitors are converted to customers, and one-time customers to returning customers.

This can be done by carefully planning and designing the shopping experience based on your customers. Provide the features that would increase the possibility of your customer placing an order.

Grainger offers some good features that show an understanding of their B2B customers, including:

*   The Add To Cart button in the Recently Viewed Products section on the homepage, is noticeable and attention-grabbing to the primary action you want the customer to take.
*   Recently viewed products are shown on the homepage. Each of these products has an Add to Cart button. This can help customers look back to what they were interested in, and consider it for purchase.

![](/images/ezgif.com-gif-maker.gif)

*   Bulk order is a superpower for B2B ecommerce websites. Customers can enter the SKU of the product and its quantity, and it’ll be directly added to the cart. Grainger provides this feature directly in the navigation bar. This facilitates the shopping experience of returning customers and encourages them to make more purchases.

![](/images/ezgif.com-gif-maker%20$1$.gif)

*   Customers can quickly access a summary of a product’s details from the product's listing page. They can also directly add the product to the cart from that same page.

![](/images/Screen_Shot\_2022-12-01\_at\_1.25.18\_PM.png)

## 3- Powerful Search Experience

As B2B websites generally offer a large set of products with different details and attributes, it’s important to provide a search experience that allows the customer to find the products they’re looking for.

Making your search experience powerful is more than just showing the correct results for a search query. It’s providing options to narrow down the results, suggestions for better results, and more.

Grainger provides their customers with the following features to enhance their search experience:

*   The search bar placeholder informs the customer what keywords or attributes they can search products by, such as model or part number. This clarifies to the customer what they can look for with the search bar.

![](/images/Screen_Shot\_2022-12-03\_at\_3.54.20\_PM.png)

*   As the customer enters their query, they see real-time keyword suggestions, recommended products, and search results for products, product categories, and brands. Each of these helps the customer narrow down the available results to what they need.

![](/images/Screen_Shot\_2022-12-03\_at\_3.06.23\_PM.png)

*   Customers can quickly add the items from the search result to the cart. They can input the quantity and click the Add to Cart button. This is especially helpful for customers that already know what specific item they want.

![](/images/Screen_Recording\_2022-12-03\_at\_03.53.29\_PM.gif)

*   Save customer search history, which personalizes the search experience and makes the customer reach quickly to products that usually purchase.
*   The customer’s search history is saved and shown when the customer clicks the search bar. If the customer has previously conducted a search and wants to look through the results again, this helps them find the results again easily.

## Build your B2B Store with Medusa

With Medusa, the open-source B2B platform, build your ecommerce store to include all these features and more. Use Sales Channels, Customer Groups, Price Lists, and other features to build your B2B ecommerce store.

Learn more [here](https://medusajs.com/b2b-commerce-platform), and follow this tutorial to [start building your B2B store](https://medusajs.com/blog/medusa-b2b-part-1).

## Want More UX Tips?

This series covers other top B2B websites that provide good UX. Check other parts out to get more tips:

1.  [The world’s best B2B ecommerce UX: McMaster-Carr (1/5)](https://medusajs.com/blog/9-best-ecommerce-ux-practices-with-examples/)

2.  [Top 5 B2B Ecommerce sites: Amy Myers MD (3/5)](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-amy-myers-md)

3.  [Top 5 B2B Ecommerce sites: Blake (4/5)](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-blake)

4.  [Top 5 B2B Ecommerce sites: Massey Ferguson (5/5)](https://medusajs.com/blog/top-5-b2b-ecommerce-sites-massey-ferguson)



Are you looking to improve your B2B ecommerce UX? Check out the top 5 B2B ecommerce sites, including Grainger, and learn from the best in the industry.

9 Best eCommerce UX Practices With Examples

Ecommerce websites require great user experience (UX) to achieve the reason for which they’re created—drive sales and conversion.

In B2B this is often a neglected topic, which is why we wanted to shed more light on the best practices in the area.

This article uses an example case from a B2B site that recently made the top of HackerNews as *the best e-commerce site*, [mcmaster.com](https://www.mcmaster.com/) by McMaster-Carr.

![](/images/image-04d43a05.png)



In this article, you’ll get a breakdown of what McMaster-Carr does particularly well in its UX practices.

### Medusa’s B2B Focus

Recently, we launched [a new B2B starter](https://medusajs.com/blog/medusa-b2b-part-1) to our headless open source commerce platform, Medusa. In this regard, we are particularly interested to showcase how a headless setup allows developers to build fine-tuned storefronts using the case of McMaster-Carr.

If you’d like to know more about our product and how we serve B2B users, feel free to visit [medusajs.com/b2b-commerce-platform](https://medusajs.com/b2b-commerce-platform/)

## What is McMaster-Carr?

McMaster-Carr is a business-to-business (B2B) industrial supply company founded in 1901. Their website has been around since the early days of the internet and continues to be a popular place for businesses and hobbyists to buy hardware and accessories.

In fact, a post titled “[Mcmaster.com](http://Mcmaster.com) is the best e-commerce site I've ever used” recently trended on [Hacker News](https://news.ycombinator.com/item?id=32976978). What seemed like an innocuous statement ended up receiving over 490 comments as people discussed the merits of the B2B ecommerce businesses alongside personal anecdotes from using it.

## Why the McMaster-Carr Website Has the Best Ecommerce UX

The McMaster-Carr website is indeed an excellent one and stands out; here’s how they’ve helped create the best UX for their customers:

### 1. Seamless Customer Journey

Today’s online shopping experiences are rife with distractions: pop-up ads with coupon codes, hero sections advertising new deals and steals, and product carousels with upselling and cross-selling recommendations.

McMaster-Carr shoppers don’t encounter distractions; you can see proof of this on the homepage which jumps right into the action:

![](/images/mcmaster-carr-distracton-free-home-page.png)

In addition, the designers have done a great job in minimizing the number of landing pages shoppers have to visit before buying something.

As a result, they’ve reduced the number of clicks their shoppers have to make from the point of entry to conversion. This reduced workload makes the website feel easier to use. It also means they get their shopping done more quickly.

### 2. Uncluttered UI

McMaster-Carr currently has over 700,000 products in its store. That amount of inventory alone would be enough to overwhelm some shoppers. That’s why it’s crucial that the design and layout of the store be as uncluttered and straightforward as possible.

Many of the best ecommerce UX these days have well-laid-out architectures. The main difference between those stores and McMaster’s is the level of detail put into the user interface (UI).

You won’t find eye-catching gradients, fun animations, or anything like that here. The visual design of the McMaster-Carr website more closely resembles a detailed yet raw-looking wireframe than it does a fully fleshed-out and branded store.

Considering this is an industrial supply store, the lowkey UI design makes a lot of sense. Hardware doesn’t need to be pretty in order to be effective. This frill-less design keeps visual distractions at bay so shoppers can focus on the products and their specifications.

![](/images/mcmaster-carr-user-interface-design.png)

For example, colors are kept to a minimum. In addition, the images are all presented in greyscale. This basic color palette and presentation of images make it easy for shoppers to focus on product details instead of getting caught up in flashy design choices on the site.

### 3. Sticky Left-Side Navigation

The placement and design of the navigation matter a good deal. On most ecommerce websites, you’ll find the navigation inside of the header, with each top-level product category spread out across the width of it. Shoppers can then hover over each category to explore sub-categories of products.

McMaster-Carr’s designers have handled this much differently. The navigation is a sticky sidebar that sits alongside the left rail of the website. It can also be accessed by clicking the “BROWSE CATALOG” hamburger menu button in the top-left corner.

This design is beneficial. There’s been no compromise in terms of which product categories get top billing. All of them are present. Not only that, the categories fit without forcing shoppers to scroll.

![](/images/mcmaster-carr-sidebar-navigation.gif)

### 4. Effective Header Design

While navigation is a primary component of the online shopping UX, it often takes up so much room that other important elements are sidelined. Thanks to sticky sidebar navigation, McMaster-Carr’s header design isn’t weighed down by product category links.

Instead, what shoppers find is a light, airy website header design where it’s easy to find all the important tools they need.

![](/images/mcmaster-carr-header-design.png)

The different header components are sized and styled based on importance. For example, the search bar is about a third of the width of the header. Its prominent size ensures that shoppers can quickly find and use it when they have something specific they are shopping for.

### 5. Smart Site Search

The importance of the search bar cannot be understated in ecommerce. Without it, the online shopping experience would be more time-consuming and stressful than it often already is.

That said, stores the size and complexity of McMaster-Carr need to equip shoppers with advanced search functionality — one that can fix any spelling errors and predict what they’re searching for.

![](/images/mcmaster-carr-site-search.gif)

Without a smart search feature, shoppers would likely run into a ton of stumbling blocks. Not only does this search bar fix entry errors, but it provides alternative matching results. This maximizes the chances that shoppers will find exactly what they’re looking for the first time they search for it.

What’s more, results don’t just get updated in the search’s dropdown bar. They get updated on the page, providing shoppers with even more results and product sub-categories to consider.

### 6. Helpful Search Filters

The search bar and navigation are the entry point into the McMaster-Carr shopping experience. They alone won’t get shoppers where they need to go, which is why the filters sidebar is needed.

Regardless of which tool shoppers use to get there, the left-aligned filters sidebar will help them whittle down their product search results page. This is yet another way in which the designers have streamlined the shopping experience.

![](/images/mcmaster-carr-product-filters.gif)

Scroll through the filters and you’ll notice these don’t look like your typical ecommerce controls.

For example, you won’t find sliders, which can be unwieldy depending on how large of a dataset you’re trying to pick a number from. What’s more, when scrollable lists of data are presented, a mini search bar is always present at the top as a shortcut to scrolling.

These filters enhance an already streamlined ecommerce UX. With descriptive matching visuals, companion search bars, and easy-to-find clickable links, these filters make shopping on McMaster-Carr a breeze.

### 7. Simplified Content

One of the problems with modern ecommerce design is the idea that a product page needs to be long. Product images dominate above the fold. Product descriptions and specifications sit just below the fold. Then there are sections for related product recommendations, product comparison tables, FAQs, customer reviews, and so on.

The longer the page becomes, the longer the decision-making process is going to take. And the longer those decisions take, the more chances there are for distractions and doubts to keep shoppers from converting.

McMaster-Carr’s product page design is a beautiful lesson in simplicity.

![](/images/mcmaster-carr-simple-product-page-design.png)

Shoppers see:

*   The product type

*   Accompanying product photo

*   Short description

*   Table breaking down the specifications for each size

If shoppers want more details on the product type, they can expand the information provided under the accordion dropdowns at the top. If they want more information on the product specification, they can click the “Product Detail” button beneath to see more or to download the CAD file in their preferred format.

![](/images/mcmaster-carr-product-detail-page.png)

With the way these pages are designed, there’s no need for users to scroll or to worry that they’re missing important details. It’s all clearly laid out in an easy-to-follow format.

### 8. Custom Cart Page Design

The purpose of the cart page is to give shoppers the chance to review their items, make modifications, and add relevant notes before they check out. McMaster-Carr calls this page “ORDER” and it includes important features like:

*   Field to enter the purchase order number

*   Option to add reference info on each line

*   Ability to convert to table view

![](/images/mcmaster-carr-cart-page-design.png)

The one drawback about the way this cart page is designed — and how checkout is handled, in general — is that customers never get to see their true total costs. They can see the merchandise total on the right. However, shipping fees and taxes get added on post-purchase because of the way McMaster-Carr handles product fulfilment.

### 9. Seamless Checkout Experience

Many shoppers have come to expect the shopping cart page and ecommerce checkout flow to be two separate parts. It’s not necessarily done this way because it’s in the shoppers’ best interests. Instead, it’s usually because the ecommerce software generates the shopping cart while the payment gateway plugin creates the checkout flow.

McMaster-Carr’s website makes no distinction between the two. Instead, there is a seamless transition from the cart to checkout.

Shoppers log into their accounts on the right side of the “ORDERS” page. The checkout form then takes the place of the login form.

![](/images/mcmaster-carr-checkout-form.gif)

Shoppers won't encounter a checkout page that looks foreign compared to the rest of the site. Nor will they have to deal with multi-step checkout flows. There’s a single form built right into the “ORDER” page where they:

*   Choose the delivery method.

*   Enter delivery address details.

*   Provide payment information.

The form responds to every choice they make as well as to everything they input into the fields (if anything at all). This ensures that, when they’re ready to click the sticky “PLACE ORDER” button at the top, no errors occur.

## Conclusion

Want to get more inspiration on UX best practices? Sign-up for our newsletter on [medusajs.com](http://medusajs.com) as we will share no less than 5 more ecommerce deep dives on best practice UX for B2B.

For more B2B specific readings, check out Medusa’s recent tutorials and perspectives:

*   Our tutorial on how you set up Medusa to support B2B: [Part 1](https://medusajs.com/blog/medusa-b2b-part-1) & [Part 2](https://medusajs.com/blog/medusa-b2b-part-2).

*   Our [Perspective on Open Source B2B Ecommerce](https://medusajs.com/blog/open-source-b2b-ecommerce-industry-perspective/).

*   Our [Comparison of the Top 5 Open Source B2B Ecommerce Platforms](https://medusajs.com/blog/top-5-open-source-ecommerce-platforms/).



Discover the 9 best ecommerce UX practices from the world's top B2B ecommerce sites that made the top of HackerNews as the best ecommerce site.

9 Best Ecommerce UX Practices From the World's Best Ecommerce Site

Open Source B2B Ecommerce an industry perspective

At Medusa, we recently published our Perspective on Open Source B2B ecommerce as part of the launch of our [new B2B starter template](https://medusajs.com/blog/medusa-b2b-part-1).

I believe that more focus should be put on open source solutions in the context of B2B ecommerce. The field presents a major opportunity for open source platforms as B2B commerce cases often require a lot more customization and flexibility than proprietary platforms can handle.

In this short article, I will present a summary of our thesis on why B2B businesses should consider open source platforms to power their ecommerce setup. We will also share a comparison of existing platforms open source platforms in the end.

You can download the [full PDF version of this Perspective on our B2B site](https://medusajs.com/b2b-commerce-platform).

## Ecommerce is becoming a key revenue channel in B2B sales

![](/images/2-01339ee5.png)

It has long been a myth that B2B businesses don’t offer ecommerce. That’s wrong. A recent [McKinsey study](https://www.mckinsey.com/capabilities/growth-marketing-and-sales/our-insights/busting-the-five-biggest-b2b-e-commerce-myths) shows that 65% of B2B companies across industry sectors now offer ecommerce. In fact, ecommerce is becoming one of the main revenue channels for B2B.

## Open source ecommerce platforms best serve the customization needs of B2B businesses

![](/images/4\_$1$.png)

Businesses and their development teams benefit from open source platforms due to their flexibility. B2B commerce is complex as you need to handle aspects like customer groups, differentiated pricing, multiple integrations, and so on.

The flexibility of open source platforms makes them well-suited to handle these complexities as they can be better customized to individual business needs.

## Open source and custom build ecommerce platforms are the preferred options among the top 250k ecommerce sites

![](/images/3-5c391878.png)

We used [builtwith.com](http://builtwith.com) to categorize the checkout flows of the top 250k ecommerce sites online measured by traffic. **56% of the largest ecommerce sites online use an open source or custom build ecommerce platform.**

This is a strong testimony to the fact that as the complexity of businesses increases - as in the case of B2B - the greater the need is for flexibility and open architectures.

## For open source platforms to be relevant, they need to support B2B-specific ecommerce features

![](/images/5\_$1$.png)

To understand what open source ecommerce platforms best support B2B, we categorized the 10 most important features to support a modern B2B business.

This includes core features such as **Customer groups** to set up individual B2B customer rules, **Price lists** to differentiate pricing across customers, and **Sales channels** to separate B2B and B2C experiences.

These are some of the core features that B2B clients have requested from us in the past.

## Overview of critical B2B features supported by existing open source platforms

![](/images/6\_$6$-dc2b0521.png)

At last, we looked at the most well-recognized open source platforms for B2B and compared them across the feature sets - [read the in-depth comparison here](https://medusajs.com/blog/top-5-open-source-ecommerce-platforms/).

Obviously, we built Medusa with this specific feature set in mind giving us an unfair advantage. However, it was still striking to see how many of the traditional B2B OS platforms failed to support elements we would consider core B2B functionality.

The research across competing platforms was undertaken by an independent researcher to ensure we got unbiased inputs.

## Want more?

Discover more about B2B and open source ecommerce:

*   Download our full Perspective presented above on our [B2B-page.](https://medusajs.com/b2b-commerce-platform)
*   Check out our tutorial on how you set up Medusa to support B2B: [Part 1](https://medusajs.com/blog/medusa-b2b-part-1) & [Part 2](https://medusajs.com/blog/medusa-b2b-part-2).
*   Reach out in our [Discord](https://discord.com/invite/medusajs) for a chat on the topic



Open Source B2B Ecommerce: An Industry Perspective

Top 5 open source ecommerce platforms for B2B: A feature-by-feature review

Get an overview of the available B2B features in the top 5 open source ecommerce platforms in this feature-by-feature review.

Best 5 Open Source Ecommerce Platforms for B2B

Medusa B2B Part 1: Set Up B2B Store

Medusa B2B Part 2: Set Up B2B Storefront


<callout icon="exclamationCircleSolid" button-label="Go to Docs" button-url="http://docs.medusajs.com">
**Notice**
Medusa is under active development, so the content of this post may be outdated. Please check out our documentation instead.
</callout>

[Medusa](https://github.com/medusajs/medusa) is an open source headless ecommerce platform that allows developers to create their own customizable and extendable online store. With Medusa, developers can have a fun time building distinctive e-commerce sites.

Medusa is composed of three components: the headless backend, the admin dashboard, and the storefront.

In this tutorial, you’ll set up the Medusa backend server with Docker by running only a few commands. You’ll then install the admin and storefront and link them to the Medusa server.

## What is Docker?

Docker is an open source containerization tool that allows you to build, test, deploy, and manage applications quickly using lightweight virtualized environments called containers.

These *Docker containers* have everything that the application needs to run, including libraries, system tools, code, and runtime. Docker containers are based on *Docker images*.

A Docker image is a template file that acts as a set of instructions to run containers. The easiest way to build a Docker image is by using a plain-text file called *Dockerfile* that contains all the specifications for creating the image.

A simple Dockerfile looks like the following:

```
FROM alpine
CMD ["echo", "Hello Medusa!"]
```

## Prerequisites

Before continuing in this article, you need to install a few tools and software:

1.  Node.js: You need Node.js and NPM to install [@medusajs/medusa-cli](https://www.npmjs.com/package/@medusajs/medusa-cli). If you haven’t installed Node.js yet, install it from [here](https://nodejs.org/en/download/).
2.  Git: Git is a version control system. Medusa uses it behind the scenes while creating a project. You can install it from [here](https://git-scm.com/downloads).
3.  Docker: You need Docker to set up your server. You can download and install Docker on your system from [here](https://www.docker.com/).

## Setting up Your Development Server with Docker

Once you have installed the tools from the prerequisites section, you are good to follow along to set up your development server with Docker.

Install the Medusa CLI using the following command:

```
npm install -g @medusajs/medusa-cl
```

Now that you have installed the Medusa CLI, create a new Medusa project using the following command:

```
medusa new my-medusa-store
```

Once the project is created, go to the newly-created project directory named `my-medusa-store`. This directory will have the following files and folders:

![](/images/Screenshot\_2022-10-22\_001730.png)

Now, you can find some familiar files like `Dockerfile` and `docker-compose.yml` as seen above. The explanation of these files is beyond the scope of this article. For the time being, you should just understand that the Dockerfile is used to build the image for the Medusa server.

In addition to this, the compose file also includes two images, Postgres and Redis, which are essential for running the server.

Now that you have a Docker Compose file, you can run a container. Before running any Docker container, make sure your Docker Desktop is running successfully.

As already discussed, you need to create the image yourself; use the following command to build the image and run containers using that image:

```
docker compose up --build
```

The command will take some time to build the image and run the required containers. If you see the following output at the end, then your local Medusa server is up and running on port `9000`.

![](/images/Screenshot\_2022-10-22\_003255.png)

If you get any error saying `./develop.sh: no such file or directory`, then replace the last line in the Dockerfile with the following:

```
ENTRYPOINT ["sh", "develop.sh"]
```

Once done, run the previous command again to start your containers.

Your server database is empty of data as of now.

You can optionally seed your server with demo data. Since the server is running inside a Docker container, you will need to execute the seed command inside that container.

Run the following command in a different terminal to seed your database with demo data:

```
docker exec medusa-server-default medusa seed -f ./data/seed.json
```

## Test Your Medusa Server

Once you have the server up and running, you are ready to test your Medusa server. You can go to <http://localhost:9000/store/products> on your browser to check whether you have set up your server correctly. If you haven’t seeded the database in the previous step, you will see the below output:

![](/images/Screenshot\_2022-11-03\_151144.png)

However, if you seeded the database, you will see JSON data with an array of products and other details.

![](/images/Screenshot\_2022-11-03\_151734.png)

Congratulations, you just set up your first Medusa server with Docker!

## Set up your Next.js Storefront

In this section, you’ll to set up your Next.js Storefront to provide your customers with a great experience browsing your ecommerce store.

First, clone the Next.js Starter Medusa repository from GitHub using the command:

```
npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa my-medusa-storefront
```

Next, navigate into the cloned repository folder and get your environment variables ready using the command:

```
cd my-medusa-storefront/
mv .env.template .env.local 
```

Now you are ready to start up your project using the command:

```
npm start
```

### Test Storefront

Once the frontend server starts up, you can visit `http://localhost:8000/store` on your browser to see your products. Your storefront will look similar to the below:

![](/images/Screenshot\_2022-11-04\_170753-b0152767.png)

If you look clearly, these are the same products that your server has returned in JSON format.

## Set up Medusa Admin

In this step, you’re going to set up Medusa Admin. Medusa Admin allows you to manage your ecommerce store’s data including products, orders, settings, and more.

To start with, clone the Medusa Admin repository on GitHub and navigate to the cloned repository folder:

```
git clone https://github.com/medusajs/admin.git
cd admin
```

Next, install all the dependencies using the NPM command:

```
npm install
```

Further, start the development server for Medusa Admin:

```
npm start
```

### Test Admin

Once the development server starts up, you can visit <http://localhost:7000> to see your admin panel. The admin panel initially asks you for login credentials. If you have already seeded the data, the admin username is *admin@medusa-test.com* and the password is *supersecret*.

However, if you haven’t seeded the data, you can create an admin user by running the below command on the Medusa server:

```
medusa user -e admin@email.com -p some-password
```

Once the admin user is created, you can log in and start adding products as shown in the demo below:

<iframe width="560" height="315" src="https://www.youtube.com/embed/CJuBwLDJoZI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="margin-left: auto; margin-right: auto;"></iframe>

Note that in the above demo, the server has data already seeded.

## Additional Configurations

You can set the environment variables used in the project by changing their values in the `docker-compose.yml` file. The `docker-compose.yml` file contains an environment section in the different services wherein all of your environment variables used by that specific container are mentioned.

![](/images/Screenshot\_2022-11-03\_145918.png)

You can add a new environment variable as `KEY`: `VALUE`. An example of the same is given below:

```
environment:
	...other environment variables...
	MY_VAR: ABCD123
```

In the above example, `MY_VAR` is the name of the environment variable and `ABCD123` is the value of that environment variable.

Once you run a Docker container using this `docker-compose.yml` file, your container will have these environment variables already set.

You can learn about adding more configurations to your Medusa server in [this documentation](https://docs.medusajs.com/usage/configurations/).

## Conclusion

Docker makes it very easy to pack, ship, and deliver code. In this tutorial, you set up your first Medusa server with Docker by running just a few commands.

You can check out [Medusa’s documentation](https://docs.medusajs.com/) to learn more about Medusa and its features. You can explore more about Docker in [their documentation](https://docs.docker.com/).

> Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via [Discord](https://discord.gg/F87eGuwkTp).



Create an Ecommerce Website with Docker

Over the last couple of months, we have been building out our engineering organization and conducted hundreds of interviews. We have observed that covering process structure takes up significant and valuable time during interviews. Therefore, I’ve decided to outline our interview process here, hoping it can serve as a source of alignment prior to starting the process.

This post is dedicated to engineers considering applying for a position at Medusa and wanting to know what’s in store and how to best prepare.

### Overview

Our process is straightforward, and the interviews that all engineering candidates go through do not differ wildly from the rest of the industry. Below you’ll find a diagram depicting the process; four interviews are fixed, while one depends on the role we are hiring for. The offer letter is presented during the final call and is contingent on reference calls we’ll conduct within the following week or two. We might also squeeze in calls with our team, but this varies from candidate to candidate.

This post will cover the intro, technical case, and culture fit interviews.

![](/images/interview-process-81b44830.png)

### The intro call

**Expected outcome**

The introductory call is for us to get to know each other. We introduce ourselves and talk about Medusa and your motivation for applying. At the end of the call, we dedicate time for you to ask questions about our organization, the product, and the team to ensure nothing is left unanswered when we conclude.

**Format**

For all engineering positions, the intro call is with me (CTO) and lasts 30 minutes. We run introductions in a conversational format, asking questions to one another as we go along.

**Preparing for the interview**

We will spend time talking about our product, so I recommend reading through our [website](https://medusajs.com/), [Notion Home](https://www.notion.so/Medusa-Home-3485f8605d834a07949b17d1a9f7eafd), and [GitHub](https://github.com/medusajs/medusa) to get a high-level idea of what we build, how we differentiate, and why. The idea is to form a foundation for a good conversation.

Additionally, It is worth considering why you want to join Medusa. We are a fast-growing, early-stage startup with under 20 people in our organization. This implies more responsibility, taking ownership of tasks, and being receptive to constant change, which is not necessarily for everyone.

### Technical case

**Expected outcome**

Our technical case might differ from what you’ve seen elsewhere. We don’t believe fizz-buzz-like coding challenges help us hire exceptional engineers, and they give you no idea about how it is to work at Medusa.

In our engineering organization, we follow an [RFC approach](https://blog.pragmaticengineer.com/scaling-engineering-teams-via-writing-things-down-rfcs/) to solution design. You will be exposed to that framework in the technical case interview as it is structured around a feature in our backlog. You will be asked to design a solution, write a (small) RFC, and document your thought process as if you were part of the team.

The purpose is to evaluate your technical competencies, product sense, and ability to communicate in a scenario similar to our daily work.

**Format**

The format of the technical case comprises a take-home task and a 60-minute review call. Usually, we schedule the review call a week after you’ve received the take-home case. To be clear, we don’t expect you to spend seven days on the case, but the timing allows you to stretch the work over multiple days.

You’ll receive the task in a [Product Requirements Document](https://docs.google.com/document/d/1mEMDcHmtQ6twzNlpvF-9maNlAcezpWDtCnyIqWkODZs/edit) (PRD) format, which is almost always the input to our solution design framework. In the review call, we’ll spend the first half discussing your solution proposal and the other half talking more generally about engineering.

The interview will involve a Senior Engineer (or our CEO, Seb) and me.

**Preparing for the interview**

As our technical case is a feature from our backlog, you can check it out before applying. The current one in question is an [extension to our Product API](https://www.notion.so/Case-Software-Engineer-Core-32e78b8e409e41e3b9797256167fbfc8).

Aside from reading through the feature document, I recommend familiarising yourself with our technical stack, as we will likely relate your design proposal directly to our product and architecture.

As for the second part of the interview, we’ll discuss engineering and product learnings from your previous experience.

Some of the questions we focus on are:

*   What’s an example of an exciting problem that you’ve solved?

*   What’s an example of a problem you've had to solve quickly?

*   What’s an example of something you’ve learned that you want to bring to Medusa?

*   What’s an example of something you’ve done that had a high impact?

And we approach them from an engineering perspective.

### Culture fit

**Expected outcome**

Engineering capabilities and product sense are two important characteristics that we value highly in a candidate, but collaboration and communication are equally important, as we will be spending most of our time together over the next many years.

The culture fit interview serves two purposes; it is for us to understand what learnings and values from your experience you will bring with you to Medusa, and an opportunity for you to gauge if our team and culture constitute a work environment you see yourself part of.

**Format**

This interview is conducted by one of my co-founders and me. In the call, we ask questions about a selection of past teams you have been part of and your role in those teams.

We set aside at least 15 minutes for you to ask questions before we wrap up the interview.

**Preparing for the interview**

The best preparation for the culture fit interview is to reflect on your career learnings and consider the characteristics of a healthy work environment and overall team culture.

Similar to the technical discussion, we have a set of questions (for each of the selected previous employments) that are almost always covered, and those are:

*   What were you hired to do?

*   What team were you part of, and what was your role?

*   What were your most significant accomplishments?

*   What were your biggest challenges?

*   What would you bring from your time at “X” company?

### Let’s chat!

We believe [companies (and their success) are a product of the team they build](https://blog.samaltman.com/how-to-hire), so we spend tremendous time fine-tuning our process to give us the best basis for making decisions. As with many other things, there’s no silver bullet, but we’ll keep improving to get as close to it as possible.

Hopefully, sharing our interview process will set us both up for success, ensure our time together will be efficient, and lead to us joining forces.

We are looking for [front-end engineers](https://www.notion.so/Frontend-Engineer-Core-6547f79ae3374d79ae9bdb5d9ce973d2) and [full-stack engineers](https://www.notion.so/bc3d0e88da214fdabb1a886033aaf62c) to join our core commerce team. If these job listings don’t fit your profile, don’t let that stop you from reaching out. Hiring is an unpredictable process; you never know when you’ll find the perfect match.


Our engineering interview process


<callout icon="exclamationCircleSolid" button-label="Go to Docs" button-url="http://docs.medusajs.com">
**Notice**
Medusa is under active development, so the content of this post may be outdated. Please check out our documentation instead.
</callout>

Medusa is an open source Node.js ecommerce platform that facilitates the creation of modern ecommerce stores with composable architecture, good developer experience, and advanced ecommerce features.

Although Magento is a platform that provides many [advanced ecommerce features](https://medusajs.com/blog/medusa-vs-magento-comparing-two-open-source-ecommerce-frameworks/), it’s a traditional platform that fails to keep up with the rapidly-advancing digital trends. It’s also widely known how difficult it is to use for developers.

In this article, I’ll share with you my latest Medusa plugin, [Magento Source Plugin](https://www.npmjs.com/package/medusa-source-magento), which allows you to import your products and categories from Magento into Medusa.

## Why Migrate to Medusa

Medusa and Magento both provide essential ecommerce features. However, some of Medusa’s advantages include:

*   Composable Architecture: Medusa’s composable architecture speeds up development processes and gives absolute freedom in building the full architecture of the ecommerce system.
*   Flexibility and Customization: You have full freedom in choosing what components go into your tech stack, including the storefront framework, third-party services, and custom features you want to build into your store.
*   Use of Modern Technologies: Since you have full freedom to pick the different components of your tech stack, you can use modern technologies such as Jamstack storefronts. You can also constantly update the different components of your stack independent of one another.

## Magento Source Plugin

The [Magento source plugin](https://www.npmjs.com/package/medusa-source-magento) is a plugin that you can install on a Medusa server to import your products and categories from a deployed Magento store. This plugin facilitates your move from a Magento store to a Medusa store.

### Limitations

Magento has 6 product types. As some of those types don't exist in Medusa, only the Configurable and Simple products can be imported.

Simple and Configurable products that are part of Bundled or Grouped products will still be imported into Medusa.

## Prerequisites

You must have a Medusa server installed. You can follow the [Quickstart guide](https://docs.medusajs.com/quickstart/quick-start) to install a Medusa server in three steps.

Furthermore, the Medusa server should have [PostgreSQL](https://docs.medusajs.com/tutorial/set-up-your-development-environment#postgresql) and [Redis](https://docs.medusajs.com/tutorial/set-up-your-development-environment#redis) installed and configured on your Medusa server.

### Create Magento Integration

For Medusa to connect to Magento’s APIs, you need to create an integration in Magento. You’ll then receive the authentication keys that you need for the Medusa plugin.

Log in to your Magento admin, then go to System -> Integrations and click on Add New Integrations.

You need to give the integration access to the following resources:

*   Catalog (with its child resources).
*   Stores -> Settings (with its child resources).
*   Stores -> Attributes (with its child resources).

Once you’re done, click Save.

![](/images/Screen%20Shot%202022-11-04%20at%203.13.00%20PM.png)

Then, on the Integrations listing page, click on the Activate link. Click on the Allow button to confirm allowing access to the requested resources.

You’ll then see four keys: Consumer Key, Consumer Secret, Access Token, and Access Token Secret. You’ll need these keys for the Medusa plugin.

### Install Magento Source Plugin

On your Medusa server, run the following command to install the Magento Source plugin:

```
npm install medusa-source-magento
```

Then, in `.env`, add the following environment variables:

```
MAGENTO_URL=<YOUR_MAGENTO_URL>
CONSUMER_KEY=<INTEGRATION_CONSUMER_KEY>
CONSUMER_SECRET=<INTEGRATION_CONSUMER_SECRET>
ACCESS_TOKEN=<INTEGRATION_ACCESS_TOKEN>
ACCESS_TOKEN_SECRET=<INTEGRATION_ACCESS_TOKEN_SECRET>

# optional
MAGENTO_IMAGE_PREFIX=<YOUR_MAGENTO_IMAGE_PREFIX>
```

Where:

*   `<YOUR_MAGENTO_URL>` is the URL of your Magento service. It shouldn’t end with a backslash.
*   `<INTEGRATION_CONSUMER_KEY>`, `<INTEGRATION_CONSUMER_SECRET>`, `<INTEGRATION_ACCESS_TOKEN>`, `<INTEGRATION_ACCESS_TOKEN_SECRET>` are the keys you received after creating the integration
*   `<YOUR_MAGENTO_IMAGE_PREFIX>` is optional and should only be used if you don’t use Magento’s default media storage. If you use, for example, S3, then you should include the URL prefix of media files here to retrieve the images properly.

Next, add the following in `medusa-config.js` to the `plugins` array:

```
const plugins = [
  //...
  {
    resolve: `medusa-source-magento`,
    //if your plugin has configurations
    options: {
      magento_url: process.env.MAGENTO_URL,
      consumer_key: process.env.CONSUMER_KEY,
      consumer_secret: process.env.CONSUMER_SECRET,
      access_token: process.env.ACCESS_TOKEN,
      access_token_secret: process.env.ACCESS_TOKEN_SECRET,
			//optional
      image_prefix: process.env.MAGENTO_IMAGE_PREFIX
    },
  },
];
```

If you didn’t add the `MAGENTO_IMAGE_PREFIX` environment variable then don’t pass the `image_prefix` property.

## How to Use the Plugin

### Server Start-Up

After installing the plugin, every time you start the Medusa server the plugin will import the products and categories from Magento in the background.

You can start the Medusa server with the following command:

```
npm start
```

You can check that the products are added either using the [List Products endpoint](https://docs.medusajs.com/api/store/#tag/Product/operation/GetProducts) or using the Medusa Admin.

![](/images/Screen%20Shot%202022-11-04%20at%203.33.30%20PM.png)

### Triggering Import

Alternatively, you can trigger importing products while the Medusa server is running using Batch Jobs. Batch Jobs in Medusa allows you to run an extensive task asynchronously.

To trigger an import, send a request to the [Create Batch Job endpoint](https://docs.medusajs.com/api/admin/#tag/Batch-Job/operation/PostBatchJobs) with the following payload:

```
{
    "type": "import-magento",
    "context": { },
    "dry_run": false
}
```

## What’s Next?

You can do so much more with Medusa after importing your data! You can:

*   Install the [Next.js](https://docs.medusajs.com/starters/nextjs-medusa-starter) or [Gatsby](https://docs.medusajs.com/starters/gatsby-medusa-starter) storefronts.
*   Install the [Medusa Admin](https://docs.medusajs.com/admin/quickstart).
*   Check other plugins such as [Stripe](https://docs.medusajs.com/add-plugins/stripe), [SendGrid](https://docs.medusajs.com/add-plugins/sendgrid), and [Algolia](https://docs.medusajs.com/add-plugins/algolia).

> Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via [Discord](https://discord.gg/F87eGuwkTp).


Magento Source Plugin: Import your Magento Data into Medusa

Medusa Webhooks: The Best Technical Project of the Medusa Hackathon

Extensibility is one of the core features of [Medusa](https://medusajs.com/), an open source headless ecommerce engine, and it has enabled developers to create plugins for Medusa. This infinitely increases the potential for what can be done with Medusa.

Webhooks are web requests that are triggered on certain events. They allow applications to communicate with each other easily. Medusa has great potential for using webhooks to communicate with other services, so I decided to build the [Medusa Webhooks Plugin](https://github.com/AnishDe12020/medusa-plugin-webhooks) for the [Medusa Hackathon during Hacktoberfest 2022](https://medusajs.com/blog/medusa-hackathon).

This Webhooks Plugin allows you to add webhook triggers for order-related events on your store. The possibilities which can be achieved are endless. It can be anything from sending a confirmation email to the customer to airdropping them an NFT.

## My Experience Working on This Project

I was able to learn a lot about the inner workings of Medusa when working on this project. It proved to be a great learning experience for me and an opportunity to make something for the community.

## My Experience Creating the Plugin

Medusa has great documentation and guides for working with it. Although I had minor hiccups when creating the plugin, I was able to work my way out by looking at how the official plugins were implemented.

### How I Created the Plugin

I started out by following the [Create a Plugin guide](https://docs.medusajs.com/advanced/backend/plugins/create) for the plugin. I followed the [Quickstart](https://docs.medusajs.com/quickstart/quick-start) and [Set Up Dev Environment](https://docs.medusajs.com/tutorial/set-up-your-development-environment) guides to set up a local store for me to test my plugin. I also set up [Medusa Admin](https://docs.medusajs.com/admin/quickstart) and a [Next.js storefront](https://docs.medusajs.com/starters/nextjs-medusa-starter). While setting up the store, I also added the `--seed` flag, which added some dummy products to the store so that I didn’t have to add products manually. This process took only approximately 15 minutes.

I encountered some hiccups during the development process and that is when the [Notifications Service Reference](https://docs.medusajs.com/references/services/classes/NotificationService) and a sneak peek at the implementations of the official plugins came in handy.

## What Does the Webhook Plugin do?

The plugin lets you set up webhook triggers on order events (order being placed, cancelled, updated, or completed) in your store. For example, if you would like to send an email to the customer when they place an order successfully, you could set up an api route which sends out the email to the customer.

The plugin will send a request to this API route along with the order and customer data which can be used by your code in determining whom to send the email to along with what the message should contain.

You can also pass in headers to go along with the request. This is useful when you have to send a secret key for authentication. The default webhook URL and headers can also be overridden on an event basis.

The plugin service also exposes a `postWebhook` method that can be used to trigger webhooks from your custom code in the Medusa store.

## Using the Plugin

Before trying to use the plugin, here are some things you must have.

### Prerequisites

*   A Medusa server ([Quickstart Guide](https://docs.medusajs.com/quickstart/quick-start/))
*   Redis setup on your Medusa server ([Configuring Redis on your Medusa server](https://docs.medusajs.com/tutorial/set-up-your-development-environment/#redis))
*   A webhook endpoint to which you can post webhooks (for testing purposes, I recommend using [Svix Play](https://play.svix.com/))

### Installing and Setting up the Webhooks Plugin

To install the plugin using NPM, run the following command in your Medusa server directory:

```
npm install medusa-plugin-webhooks
```

If you prefer using Yarn, run the following command in your Medusa server directory:

```
yarn add medusa-plugin-webhooks
```

Once the plugin is installed, we need to add it to the `plugins` array in the `medusa-config.js` file in your Medusa server directory:

```
const plugins = [
  ...{
    resolve: "medusa-plugin-webhooks",
    options: {
      webhook_url: "https://mystore.com/events", // REQUIRED: CHANGE THIS TO A VALID WEBHOOK ENDPOINT
      webhook_headers: {
        "x-api-key": "supersecretapikey", // OPTIONAL: You can add custom headers (for example, for authentication)
      },
      webhook_config: {
        "order.placed": {
          enabled: true,
          overrideUrl: "<https://mystore.com/events/order-placed>", // OPTIONAL: You can override the URL on a per-event basis,
          overrideHeaders: {
            "x-api-key": "supersecretorderplacedapikey", // OPTIONAL: You can override the headers on a per-event basis
          },
        },
      },
    },
  },
];
```

Currently, these four (4) events are supported:

*   `order.placed`
*   `order.updated`
*   `order.completed`
*   `order.canceled`

By default, notifications for all events are disabled. To enable notifications for any of the above events, set the `enabled` property to `true` in the `webhook_config` object (see example config above).

You can override the URL or headers for any of the above events by setting the `overrideUrl` or `overrideHeaders` properties in the `webhook_config` object (see example config above).

### Triggering a Webhook Request from Your Custom Code

You can trigger a webhook request from your code by resolving the webhook service and then using the `postWebhook` function. For example:

```
const webhooksService = scope.resolve("webhooksService");
await webhooksService.postWebhook(
  {
    event: "order.placed",
    data: {
      order_id: "order_id",
      customer_id: "customer_id",
      total_price: 1000,
      currency_code: "USD",
    },
  },
  "mystore.com/events/custom", // OPTIONAL: You can pass in an URL override here as well
  {
    "x-api-key": "customeventsapikey", // OPTIONAL: You can pass in custom headers here as well
  }
);
```

## Conclusion

Setting up this plugin is a quick and easy task. If you have any issues, feel free to [open an issue on GitHub](https://github.com/AnishDe12020/medusa-plugin-webhooks/issues).

*   NPM Package - [medusa-plugin-webhooks](https://www.npmjs.com/package/medusa-plugin-webhooks)
*   GitHub Repository - [AnishDe12020/medusa-plugin-webhooks](https://github.com/AnishDe12020/medusa-plugin-webhooks)

> Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via [Discord](https://discord.gg/F87eGuwkTp).


How We Won the Medusa Hackathon: Building the Paystack Plugin

[Medusa](https://medusajs.com/) is an open-source composable commerce engine built with Node.js. Medusa enables developers to build scalable and sophisticated commerce setups with low effort and great developer experience.

[Paystack](https://paystack.com/) allows African businesses to accept payments in local and foreign currencies from multiple local and global payment channels.

As our submission for the Medusa Hackathon, we built [Medusa-Payment-Paystack](https://github.com/a11rew/medusa-payment-paystack), a plugin that adds Paystack as a payment provider to Medusa ecommerce stores. 

With our plugin, African business owners can create ecommerce stores on Medusa and accept payments in local currencies tailored to the 236 million (2022) and counting ecommerce users in Africa.

## Experience Working on the Hackathon

Working on the Medusa hackathon was a great experience for both of us. We met on the Medusa Discord server and decided to work together on a submission for the hackathon. 

We were both familiar with Paystack, being that they operated in both our countries (Ghana & Nigeria), and decided it would be useful to build a payment plugin integrated with Paystack to enable Medusa store purchases in our local currencies. 

We decided on our high-level goals; feature parity with the existing Stripe payment plugin, high code coverage, and a really good developer experience. We then broke those down into measurable tasks we split among each other and worked on in short sprints.

We met regularly to catch up on progress and unblock each other where necessary. We had a great time working together and learned a lot from each other.

## Experience developing with Medusa

Our development process began by identifying and getting familiar with the Medusa user flows our payment plugin would be integrated into. These turned out to be the checkout flow and the admin order management system. 

Users should be able to pay for items in Medusa stores and store owners should be able to view order payments and issue refunds. Our plugin would take care of everything.

We went to work getting familiar with the APIs Medusa provides developers that would allow our plugin to perform the aforementioned tasks.

The Medusa docs were a godsend for us as first-time users of the platform. There were docs for practically everything we needed and we found the dependency injection mechanism that allowed core Medusa services like the Cart service (we use this in verifying payment amount values) to be used in plugins particularly useful.

After figuring out what needed to be done on Medusa’s end of things we integrated Paystack using the `paystack-api` package, a Node.js wrapper for the Paystack API, calling the relevant Paystack API endpoints as appropriate.

## What are the plugin's features?

When you install and choose Paystack as your payment provider for your Medusa ecommerce store, you are guaranteed the following features:

### Connect Medusa to Paystack

Using [Medusa-Payment-Paystack](https://github.com/a11rew/medusa-payment-paystack), you can effortlessly integrate Paystack with Medusa, add Paystack as a payment provider in a region, and include Paystack in your checkout flow using the `provider_id` of Paystack. Payments to your Paystack business made from your Medusa store show up on your admin panel automatically. Refunds too. 

### Verify purchases

In the payment completion callback of your chosen flow, you can call the Medusa [Complete Cart](https://docs.medusajs.com/advanced/storefront/how-to-implement-checkout-flow/#complete-cart) method. When you use the reference provided by [Medusa-Payment-Paystack](https://github.com/a11rew/medusa-payment-paystack), The transaction status is checked, verifies the amount matches the cart total, and marks the cart paid for within Medusa.

### Issue refunds

The admin dashboard allows you to refund captured payments made with Paystack.

A refund will occur using [Medusa-Payment-Paystack](https://github.com/a11rew/medusa-payment-paystack), which marks the order in Medusa as refunded using Paystack.

In addition, all Paystack's checkout flows (popups, redirects, APIs) are made available by the plugin.

## How to use the plugin

Adding support for Paystack payments to your Medusa store using the [Medusa-Payment-Paystack](https://github.com/a11rew/medusa-payment-paystack) plugin involves three main steps:

1. Adding Paystack as a payment provider in your Medusa server
    - This involves installing the plugin from NPM using the command `npm install medusa-payment-paystack`
    - Adding the plugin to your list of plugins in `medusa.config.js`
- Adding Paystack to the region
    - In the Medusa admin dashboard, choose the regions you want to enable Paystack in and select the Paystack option in `Payment Providers`.
- Integrating into the checkout flow
    - Use the reference the plugin injects into your Payment Session data when initializing the payment with Paystack.
    - Call Medusa’s complete cart method after the user successfully completes payment. The plugin will take it from there, handling reporting the order as paid for in Medusa, verifying amounts, and processing refunds if necessary.

We also made a [video walking you through these steps](https://vimeo.com/763132960).

## Conclusion

For more detailed steps on setting up the Paystack plugin, you can visit the project’s [README](https://github.com/a11rew/medusa-payment-paystack#readme) for detailed steps.

If you’d also like to dive directly into code, check out [medusa-paystack-demo](https://github.com/a11rew/medusa-paystack-demo) - a demo Medusa store with Paystack configured as a payment provider using `medusa-payment-paystack`. 

> Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via [Discord](https://discord.gg/F87eGuwkTp).

Ecommerce is rapidly becoming the way you do business today. And one of the most important outcomes of this prosperity is a large number of customers. The biggest challenge is how to convert your visitors into customers.

One way you can gain customers is by building a well-developed ecommerce user experience. If your store doesn’t offer the best UX, all your efforts might go down the drain.

Let’s look at why you need to care about UX, and how ecommerce designers can make the customer’s experience hassle-free.

## What is Ecommerce User Experience (UX)?

Ecommerce user experience (UX) is defined as the overall experience of the visitor when interacting with your store, from the second the visitor loads your homepage, to the purchase, and even the post-purchase experience.

That is why it’s wise to focus on every element of UX, starting from performance and neat design, to clean navigation. The best ecommerce user experience aims to make the shopping experience as good as possible to drive potential customers to your products and services.

Improving your ecommerce UX leads to more impulse purchases, less cart abandonment, high trust and confidence in your store, and higher overall conversion. So, it's important to follow the best practices when you build your ecommerce store.

## 9 Best Ecommerce UX Practices

### 1- Clean and Clear Homepage

Your homepage is the first thing your customers see when they come across your store, and it’s usually the page that gets the most traffic. It’s crucial to make it look clean, uncluttered, and have a clear purpose.

Here are some points to consider while building your homepage:

*   Don't make it cluttered. Keep it offering minimum choice pathways. Don’t bog down your customer with too much information.
*   Keep content short and to the point.
*   Avoid pop-ups and forms. They distract your customers.
*   Make your customer support contact information prominent through a [live-chat widget](https://medusajs.com/blog/chatwoot-ecommerce/) on your homepage.
*   Keep your hero area streamlined and simple. The images should be relevant and meaningful to your ecommerce store. Use high-quality images and make them full-width.
*   Keep the text on the hero image short, and relevant, and let there be a contrast between the text and the background.
*   Always add Call-to-action buttons on your hero image. It ensures the highest chance of customers interacting with it.
*   The visual hierarchy should follow the information hierarchy so customers naturally gravitate to the most important products first. You can do that by adjusting the position, color, or size of your products.

### 2- Make Sure Your CTA Buttons Are Clear and Prominent

Call-to-action (CTA) buttons are key to ecommerce success. They help customers to navigate your store and help you highlight the products and promotions. CTA in ecommerce generally is an “Add to Cart”, a “Buy Now”, or a “Checkout” button. Therefore, good CTA buttons would inspire your customers to take action and urge them to purchase.

A good CTA should be:

*   Noticeable and clickable.
*   Readable with contrasting colors and bold lettering.
*   Placed in the right place on the website or the application so that customers can find them quickly. For example, place “Sale” on the navigation bar to make customer access it easily. You can also place the “Sale” button on the hero area or in a wide section on the homepage.
*   Be clear about what happens next. For example, the “Show Sales” button or tab will show your customer only the products in the sale, not any other products. Also, the “Shop Now” button should show your customer product listing page.
*   Keep the wording short but with clear and common phrases. For example, use “Add to Cart” or “Buy Now” to add a product to the cart.

### 3- Enable Search From All Pages

In ecommerce stores that sell a large number of products, the search bar is an essential way for customers to find the products that they are looking for.

These are some considerations to take when you design the search bar:

*   Make the search bar prominent and ensure to use a background that makes it stand out. For example, make the field lighter and the background darker, which makes the customer catch it readily.
*   If you use a search icon, you should make it easy to spot. For example, near the cart icon.
*   Place the search on the top right or centralized.
*   Use sticky search bars to ensure the search feature is available everywhere on all pages.
*   Use autocomplete function to help customers search faster and fix spelling mistakes. For example, you can use [**Algolia**](https://docs.medusajs.com/add-plugins/algolia) for the best practices.
*   Add filters when using the search bar to narrow search results.
*   Use suggested results and autocorrect for human errors.
*   Save customers’ search history.

### 4- Make Your Product Listing Pages Informative

The product listing page is the most important page for customers. Not only do they use it to find the products they need, but they can use it to find products they didn’t know they needed.

Some essentials to include are:

*   Provide product images, prices, availability, and options (colors, sizes,...etc) on your listing pages.
*   Show primary actions like “Add to Cart”, “Buy Now”, and “Add to Wishlist” buttons for each product. Place them prominently relative to the rest of the page content.
*   Make the name of the product bold and the price of the product clear.
*   Show products in grids and use a divider between products.
*   Provide pagination to allow your customer to navigate between pages without struggle. Allow them to jump to specific pages within the results.
*   Mark bestselling, recently launched, and out-of-stock products with unique tags or icons.
*   Allow customers to sort products by price and rating.

### 5- Use High-Quality Product Images and Strong Descriptions

The online shopping experience is limited on all fronts. Your customers can’t try on products and can’t feel or tangibly experience them. So, providing high-quality product images and strong-detailed descriptions help your customers get a better understanding of the products.

Here are some tips to follow:

*   Use large, high-resolution images with white backgrounds and good lighting.
*   Add a zoom-in feature to allow customers to see product details clearly.
*   Allow customers to scroll back and forth between images.
*   The images should show different shots of the product from different angles, close-up images of its texture, and photos of the product in use.
*   Use clear, well-written, and detailed product descriptions to assure your customers that your product is the right fit.
*   Provide available product dimensions and colors.

### 6- Show Product Reviews

Including customer reviews on your product pages is a very powerful way to encourage customers to purchase. By displaying customer reviews on the product page, you’re showing new visitors that you’re a trustworthy seller.

Here are some tips to ensure the best UX for product reviews:

*   Show the rating average by stars.
*   Pair the star rating with a review.
*   Allow customers to submit photos and videos of the product they received.
*   Show a questions and answers section.
*   Place the ratings closer to the price. A high rating can encourage the customer to make the purchase.

### 7- Highlight Deals and Promotions

Promotions play an important role in attracting customers to your site and tempting them to purchase once they arrive.

Here is how you can ensure that promotions are communicated effectively to your customers:

*   Show a prominent sales and deals section on the homepage. It should be noticeable but shouldn’t compete with the homepage’s primary value proposition.
*   Call-out deals with bright colors, bold text, and full-width photos.
*   Show the discount percentage.
*   Show the old price and the price after the discount, preferably in red color. Also, don’t hide the old price.
*   Use countdown timers with the products that have sale periods to encourage customers to make a fast purchase decision.
*   Be clear about the rules and conditions for special offers. For example, “buy one get one free” or “buy two get one free”.
*   When you have an urgent or a seasonal sale, add an announcement bar or add a Sale button on the hero area with a catchy message.

### 8- Make The Checkout Progress Straightforward

The more steps that stand between your customers and confirming their purchase, the higher the cart abandonment rate will be. Streamlining checkout makes the purchase process faster and prevents the customer from rethinking their decision.

There are plenty of ways to optimize the checkout process:

*   Simplify the checkout process as much as possible. Skip steps that are not essential, and combine similar steps.
*   Show the customer their progress and how much is left until they complete the purchase. That can be done with a progress bar, or numbered steps or stages.
*   Ask for only the minimal required information, and clarify and indicate optionally and required information.
*   Highlight the discount code field or coupon.
*   Allow customers to use the sa billing address as the shipping address with one click.
*   Offer different payment methods and third-party payment options backed by trusted companies, like PayPal’s OneTouch, Amazon, Android Pay, and Apple Pay.

### 9- Don’t Force Customers to Register

Account creation can feel like a long process and include many steps. it might include the confirmation link or One Time Password (OTP), and this annoys customers who want just to purchase.

For an enjoyable experience, you can enable checkout as a guest. This further makes the checkout process simpler which leads to more purchases.

Here are some tips to follow:

*   Only require the customer’s email. You can also tie the address they enter to that email so that they can have the address auto-filled the next time they use the same email, even if they’re not logged in.
*   Enable social login on the checkout screen to allow the user to register with one click.
*   You can encourage the customer to register by letting them know that they can see their order history, track order details, get coupons, or mot.

## Summary

The tips in this article provide a baseline of UX best practices that every ecommerce store should follow, but it’s just the beginning. In general, you have to follow UX standards, make your ecommerce store accessible, and make sure the performance and the security of your store meet the quality standards.

Good ecommerce UX, in a growing and competitive market, is the ultimate advantage. It leads to higher conversion rates and more purchases.

For more useful tips on the success of your ecommerce store [subscribe to Medusa’s newsletter](https://ky5eo2x1u81.typeform.com/newsletter) to get updates directly to your email, or just stay tuned on [our blog](https://medusajs.com/blog/).


Here are 9 best practices you should follow in your ecommerce store.

9 UX Best Practices for Ecommerce

Create an Ecommerce Storefront with Medusa, Strapi, and Remix

Our first Medusa Hackathon has come to an end and the outcome has been incredible. The amount of solutions far exceeded our expectations with +200 participants across 120 submissions. Among these, we saw some extraordinary cool solutions.

Thanks a lot to all the participants that took part. Also a big shout out to the many community members that took it upon themselves to help new members get a good first experience with Medusa.

With many great submissions, it proved difficult to select only 4 winners - 1 overall winner & 3 category winners. In the end, after lengthy deliberation, we have found our winners.

You can find all submissions [here](https://github.com/medusajs/medusa/discussions/2280) and an overview of our competition guidelines [here](https://medusajs.com/blog/medusa-hackathon).

## Winner: Best Overall

[**Payment integration to Paystack**](https://github.com/a11rew/medusa-payment-paystack)

By [**Andrew Glago**](https://twitter.com/a11rew) & [**Femi Akinyemi**](https://twitter.com/akinyemi_t)

![](/images/Group%20107%20$1$%20$1$.png)

Andrew and Femi built a payment provider plugin integrating Paystack with Medusa. The plugin enables African businesses to accept payments in local and foreign currencies and is built to support all of Paystack’s checkout flows (Popup, Redirect, API). Andrew and Femi not only built a sophisticated payment plugin but also included a frontend implementation using our NextJS starter template and added a 5-minute demo taking you through the complete setup and a demo of the full flow.

The main criteria for the Best Overall Project were usefulness and project completeness. Andrew and Femi excelled on these parameters, placing them at the top of the podium.

## Winner: Most technically impressive

[**Webhooks as a notification service**](https://github.com/AnishDe12020/medusa-plugin-webhooks)

By [**Anish De**](https://twitter.com/AnishDe12020)

![](/images/Untitled%20$7$.png)

Anish built a plugin allowing developers to send core events to webhooks easily. With the plugin, you can effectively centralize your usage of webhooks in one single place instead of having to install separate plugins for each of those use cases e.g., Discord, Slack, etc.

We are mind-blown by the fact that Anish, at only 15 years old, managed to know his way around our codebase, build a sophisticated plugin, and generally is engaged in the open-source developer community.

## Winner: Best shop

[**Habesha clothing store**](https://github.com/earthcomfy/shop-habesha)

By: [**Hana**](https://twitter.com/earthcomfy)

![](/images/Untitled%20$9$-ca78f5aa.png)

Hana built a beautiful clothing store for the brand Habesha on top of our NextJS starter template. What sets this store apart from the rest is the addition of elements that improve the overall commerce experience, including Algolia for search and a quick view functionality for products.

## Winner: Best design

![](/images/Burger%20Hat.png)

[**Burger Hat store**](https://github.com/realanupreet/burgerHat)

By [**Anupreet Singh**](https://twitter.com/real_anupreet)

Anupreet used our NextJS starter to build a super good-looking storefront for a burger restaurant. The starter was heavily customized to fit the concept and theme of the burger restaurant, and the thoroughness and consistency of the modifications are indeed impressive!

## Runner up list

Here's a list of Projects that were runner-ups as competition and category winners:

*   [**Maxmind plugin**](https://github.com/g33kdev/medusa-plugin-ip-lookup-maxmind) by [@stnguyen90](https://github.com/stnguyen90) (IP lookup)
*   [**3D Product Previewer**](https://github.com/manojvirat457/Medusa-3D-Swag-Store) by [@MrKrishnaAgarwal](https://github.com/MrKrishnaAgarwal), [@TamilPrakash-S](https://github.com/TamilPrakash-S) & [@manojvirat457](https://github.com/manojvirat457) (Store)
*   [**Reepay integration**](https://github.com/Agilo/medusa-payment-reepay) by [@josipmatichr](https://github.com/josipmatichr), [@anteprimorac](https://github.com/anteprimorac) & [@marijapolovic](https://github.com/marijapolovic) (Payment)
*   [**Cashfree plugin**](https://github.com/Ambareen09/medusa-store) by [@Azanul](https://twitter.com/AzanulZ) & [@AzamAmbareen](https://twitter.com/AzamAmbareen) (Payment)
*   [**Paytm plugin**](https://github.com/saurabh73/medusa-payment-paytm) by [GyaniRoman23](https://github.com/gyaniroman23) & [saurabh73](https://github.com/saurabh73) (Payment)
*   [**Wompi plugin**](https://github.com/Cristian-David-Github/medusa-payment-wompi-col) by [@Cristian-David-Github](https://github.com/Cristian-David-Github) (Payment)
*   [**Billplz plugin**](https://github.com/ibnumalik/medusa-payment-billplz) by [@ibnumalik](https://github.com/ibnumalik) (Payment)
*   [**PNPM Monorepo**](https://github.com/dalenguyen/medusa-monorepo) by [@dale_nguyen](https://twitter.com/dale_nguyen) (PNPM)
*   [**Go.lang SDK**](https://github.com/harshmangalam/medusa-sdk-golang) by [@HarshMangalam6](https://twitter.com/HarshMangalam6) (SDK)
*   [**Flutter Package**](https://github.com/parth-asodariya/medusa_flutter) by [karanjoshi, ](https://github.com/karanjoshi)[keval-makadiya](https://github.com/keval-makadiya), [Pankti910](https://github.com/Pankti910), [parth-asodariya](https://github.com/parth-asodariya) & [Snehal-Singh174](https://github.com/Snehal-Singh174)(Flutter Package)
*   [**Discord integration**](https://github.com/superstashed/medusa-stonkers) by [@stefa-n](https://github.com/stefa-n), [@Feely3007](https://github.com/Feely3007) & [@penktastal](https://github.com/penktastal) (Social)

## Prizes

For all participants and winners, we will get back to you via Discord to coordinate the shipping of prizes, participation certificates, and GitHub sponsorships. We will be in touch during the next week.

If you want to take part in the community, feel free to join our [Discord](https://discord.com/invite/medusajs). Here you can also stay tuned for more Medusa news and events.

Once again, thanks for making this a wonderful first Medusa Hackathon!


Medusa Hackathon 2022: This Year Winners Announcement

Creating a React Native Ecommerce App with Medusa Part 2: Adding Cart and Checkout

For this year's Hacktoberfest, we are thrilled to be launching our very first Medusa Hackathon with crazy prizes! Register your participation [here](https://ky5eo2x1u81.typeform.com/to/oG2DCRg7).

For those of you that prefer getting started with regular Hacktoberfest-issues (see bottom of the page).

***

## Hackathon overview

*   **Kick-off:** on Saturday, Oct 1st on our [Medusa Discord](https://discord.com/invite/medusajs) under our #Hackathon channels
*   **Project:** Build a Medusa project in 3 weeks. It can be anything; ecommerce store, plugin, frontend-starter, app, library, etc.
*   **Requirements:** The solution needs to be related to Medusa and open source
*   **Team size**: 1 to 5 per submission
*   **Submission deadline:** Sunday, Oct 23rd
*   **Submission link:** [github.com/medusajs/medusa/discussions/2280](https://github.com/medusajs/medusa/discussions/2280)

***

## The prizes

### Participation Prizes:

*   Medusa Hackathon Tee + Hackathon Hoodie
*   Certificate of Participation
*   Some surprise Medusa merch 🎁
*   For Pre-sign-ups: Medusa tote bag

### Best Project Prizes:

*   **Best overall project** ⇒ $1,500 in GitHub sponsorship + Ltd. Edition Winner Hoodie
*   **Most technically impressive** ⇒ $300 in GitHub sponsorship + Ltd. Edition Winner Hoodie
*   **Best shop** (for store builders) ⇒ $300 in GitHub sponsorship + Ltd. Edition Winner Hoodie
*   **Best design** ⇒ $300 in GitHub sponsorship + Ltd. Edition Winner Hoodie

***

## Participation details

### Timeline

*   **Pre-registration:** CLOSED on Oct 1st
*   **Opening ceremony:** Saturday, Oct 1st at 05:00 pm CET on our Discord channel
*   **Submission deadline:** Sunday, 23rd of Oct at 11:59 pm CET
*   **Judges deliberate:** Monday 24th of Oct
*   **Winner announcement:** The week of the 24th of Oct on Discord + Twitter

### Submission

*   **Submissions link:** [Use this GitHub thread](https://github.com/medusajs/medusa/discussions/2280)

*   **Submission guidelines:** Follow the guidelines in [this repository](https://github.com/medusajs/hackathon-oct2022-guidelines)

### Judging criteria

The full Medusa team will review your solution, we will be looking for:

*   Ecommerce relevance
*   Applicability for community
*   Technical setup
*   Beautiful Design
*   Creativity

### Next steps

*   Register your participation [here](https://ky5eo2x1u81.typeform.com/to/oG2DCRg7) to get updates underway and have a chance to win extra swag.
*   Join our [Discord](https://discord.com/invite/medusajs) to find a team, ideas and other inspiration.
*   Get started building! You can use our [docs](https://docs.medusajs.com/) for guidance or check out our [blog](https://medusajs.com/blog) for inspiration.

## Other Hacktoberfest activities

### PRs ⇒ Swag

During Hacktoberfest, we'll also give away swag for picking up issues tagged with #hacktoberfest. We will release these on the **1st of October**. For PRs on these we give the following:

*   1 PR ⇒ Medusa sticker
*   3 PRs ⇒ Medusa tee + Medusa stickers
*   5 PRs ⇒ Medusa tee + Medusa hoodie + Medusa stickers

### First time contributing, no worries!

Contributing to an open-source project might feel intimidating at first. Below, you can find a guide about the process:

1.  Browse the issues that are labeled #hacktoberfest and find an issue to tackle
2.  Fork the Medusa repo and create a branch for your solution
3.  Submit a pull request for your solution in accordance with our [contribution guidelines](https://github.com/medusajs/medusa/blob/master/CONTRIBUTING.md#branches)
4.  We will review the pull request and let you know if additional work is needed
5.  After we have merged your pull request(s), you can claim your swag

Happy building!

For questions reach out in our [Discord](https://discord.com/invite/medusajs).


Medusa Hackathon 2022: Join Hacktoberfest Challenge

Explained in 5 Levels of Difficulty: Ecommerce by Medusa

At [Medusa](https://github.com/medusajs/medusa), we often write articles where we try to explain how to do different tasks with Medusa, or how it compares with other platforms like Shopify.

But what is Medusa, really?

Whether you’re a child that somehow stumbled here, you’re an expert developer interested in learning about new technologies, or anything in between, this article explains what Medusa is and why to use it based on your level of experience.

## Explained to a Child 👶

Remember when your parents bought you a lego set just using their phone? They used an online store where you can browse for different toys, buy them online, and have them shipped right to your door.

These online stores are created using tools like Medusa. Medusa allows store owners to create online stores that are later used to buy different items, such as a lego set.

## Explained to a Teen 👧

Ecommerce online stores allow store owners to showcase their products to their customers. The customers then can buy some of these products using different payment methods, such as Stripe or PayPal, then have these items shipped to their door using the shipping method of their choice.

For store owners to create an ecommerce store, they generally need an ecommerce platform that builds the basics for them, such as creating products, storing customer information and handling products.

Medusa is an ecommerce platform that was built for software developers. It is a free platform that can be used for any type of ecommerce store, and it can be customized with different options to make the customer’s experience more unique.

## Explained to a College Graduate 👩‍🎓

Ecommerce platforms power up all ecommerce online stores that we see today. Medusa is one of those platforms, but a few characteristics sets it apart:

*   **Open Source:** A software that is open source is a software that is open to the public. Anyone can check the code at any time, and anyone can use it for their projects for free. It can be used as-is, or it can be modified for different purposes as every line of code can be changed.
*   **Easy-to-use:** Medusa’s [intuitive admin panel](https://docs.medusajs.com/user-guide/) makes it easy for store owners to customize their store and perform advanced tasks such as handling order returns and exchanges.
*   **Flexibility:** Medusa does not force store operators or developers to use a set of services that they do not need. If a store operator can benefit from using Stripe, they can use it as a payment method for their store. If they instead prefer using PayPal, they can use that instead. They can also use both! There are no limitations to the services that can be used in Medusa.

## Explained to an Intern Developer 🙍‍♀️

Medusa is an open source Node.js ecommerce platform that aims to provide a great developer experience. Whether you’re a beginner or an expert, you can use Medusa if you have some knowledge of JavaScript or TypeScript.

Medusa is easy to get started with. All you need is to follow [three steps to get started with Medusa](https://docs.medusajs.com/quickstart/quick-start) and set up your first online store.

Medusa’s open source nature makes it highly flexible and customizable. You can use it to build a traditional ecommerce store or more advanced business models such as subscription-based ecommerce stores.

Medusa also provides storefronts built with [Gatsby](https://docs.medusajs.com/starters/gatsby-medusa-starter) and [Next.js](https://docs.medusajs.com/starters/nextjs-medusa-starter), which are open source static-site generators that make your ecommerce website blazingly fast.

[Medusa’s Discord community](https://discord.gg/medusajs) is welcoming to all developers of different levels that are interested in learning more about Medusa and want to receive help during the process. The [GitHub repository](https://github.com/medusajs/medusa) can also be used to submit any issues or participate in discussions.

## Explained to an Expert Developer 🦸‍♀️

Medusa is an open source composable commerce platform built with Node.js. Its main purpose is to provide a great developer experience that allows developers to build any type of ecommerce solution without hacky workarounds.

Medusa’s architecture is composed of three components:

*   **The backend** is the core of the ecommerce store. This is where all data and processing logic is stored. Other components in the architecture interact with the backend to perform any ecommerce operation or retrieve the store’s data.
*   **The storefront** is what customers use to buy products from the ecommerce store. Medusa provides two storefronts, one built with [Gatsby](https://docs.medusajs.com/starters/gatsby-medusa-starter) and one with [Next.js](https://docs.medusajs.com/starters/nextjs-medusa-starter). You can also build your own storefront with any frontend framework by using the [Storefront APIs](https://docs.medusajs.com/api/store).
*   **The Medusa admin** is an intuitive admin panel that can be used by store operators to manage their ecommerce store. Store operators can manage products, orders, discounts, and more features that the ecommerce store provides. You can either use [Medusa’s admin panel](https://docs.medusajs.com/admin/quickstart) or build your own using the [Admin APIs](https://docs.medusajs.com/api/admin/).

As an ecommerce platform, Medusa provides many advanced features on top of the basic ecommerce features, including automated RMA flows, Sales Channels, Automated tax calculation, and [more](https://docs.medusajs.com/#features).

The Medusa server’s architecture is built with abstract layers that allow you to extend any part of the server to provide additional services seamlessly. Medusa can also be integrated with any third-party services hassle-free using its plugin system.

Some of the existing plugins to integrate Medusa into third-party services are [Stripe](https://docs.medusajs.com/add-plugins/stripe), [Contentful](https://docs.medusajs.com/add-plugins/contentful/), [Algolia](https://docs.medusajs.com/add-plugins/algolia), [Slack](https://docs.medusajs.com/add-plugins/slack), and more. You can also [create your own plugin](https://docs.medusajs.com/advanced/backend/plugins/create) to use on your server or share it with the community.

## Want to Learn More About Medusa?

If you’re interested in getting started with Medusa, check out our [quickstart guide to get started in three easy steps](https://github.com/medusajs/medusa#install-locally).

You can learn more about Medusa and how to use it in our [Documentation](https://docs.medusajs.com/).

If you need any help while using Medusa or just want to chat with the core team behind Medusa and the community, please join our [Discord server](https://discord.gg/medusajs).


Blog

Recent posts