DEV Community: Nicklas Gellner

Medusa 2.0: The world's most flexible commerce platform

Nicklas Gellner — Wed, 23 Oct 2024 10:06:09 +0000

We’re thrilled to announce that the Medusa 2.0 Launch is now live 🎉

Explore and support the Launch on Product Hunt.

Along with Medusa 2.0, we release five new Starters with pre-built integrations, features, and frontends to launch both DTC and B2B setups with 2.0 in minutes. Get a glimpse of the Starters and the many new features on Product Hunt.

We hope you will help support the launch and spread the word.

Thanks all for your continued trust!

Community Highlights: Svelte Storefront, Medusa Flutter Admin, and lots of new plugins

Nicklas Gellner — Thu, 10 Aug 2023 19:08:03 +0000

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 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

In our most recent community highlight, we were excited to announce the introduction of the SvelteKit client. Now, Lacey Pevey made it even easier to get started using Svelt expeerience with her new SvelteKit eCommerce Store Starter, a Svelte storefront designed to integrate with your Medusa backend seamlessly.

The starter uses the SvelteKit 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 in the Community Radar section.

Postmark Plugin

Bram Hammer recently contributed with a new Postmark plugin. The plugin lets you use the Postmark service as a notification provider 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 developed a blog plugin 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

Ragheb 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.

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 created a Canada Post plugin 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 built a Platform.sh template 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’s infrastructure to launch their Medusa ecommerce shop with a single click. Platform.sh is a PaaS that offers a unified solution for building, running, and scaling websites and applications.

Community Radar

// Detect dark theme var iframe = document.getElementById('tweet-1686914473070653440-582'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1686914473070653440&theme=dark" }

Lacey Pevey shows us how to combine Svelte and Medusa on the latest live stream from the Svelte Society.

// Detect dark theme var iframe = document.getElementById('tweet-1679568690138980352-96'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1679568690138980352&theme=dark" }

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

// Detect dark theme var iframe = document.getElementById('tweet-1685718106583293952-885'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1685718106583293952&theme=dark" }

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 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.

Medusa Recap: Product Module, Admin Extensibility, Omnichannel features and more

Nicklas Gellner — Tue, 20 Jun 2023 16:47:11 +0000

Today, we are kicking off our June edition of our Medusa Recap. This week is dedicated to showcasing the features we have built in the past ten weeks. You can get an overview of everything we have shipped in our latest Tweet!

❤️ our Tweet

// Detect dark theme var iframe = document.getElementById('tweet-1671181706970255361-411'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1671181706970255361&theme=dark" }

Every feature in our Recap will be highlighted in the coming days with in-depth articles and demos so you can try them out yourself. If you want to stay in the loop, sign up for our daily deep dives via this link.

Below is a short summary of some of the key features we have shipped and that we will dive deeper into over the next days.

Product Module

With the beta release of our Product Module, we are bringing our building blocks closer to frontend frameworks and serverless environments.

The Product Module enables you 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 to give you access to your product data with full control.

Admin Extensions

Admin Extensions enable customizations to the Medusa Admin, making it easy to build powerful merchant experiences without compromising the maintainability of your system.

Extensions come in two forms: Widgets and UI Routes. Widgets allow you to add custom React components to existing Admin pages to enrich information about Orders, Products, etc., while UI Routes give you a full canvas to build customizations without constraints on creativity.

Reservation Management

Our improved Reservation Management gives you full control of your inventory, including an overview of all allocated stock and advanced filters.

The additions to Reservation Management also further strengthen our inventory tooling with a new powerful primitive to enable more omnichannel experiences.

Stay tuned for more feature highlights in the coming days and make sure to check out the full details on our Recap page.

Introducing Medusa’s Plugins Library for Payments, CMS, Notifications, and more.

Nicklas Gellner — Wed, 26 Apr 2023 10:49:44 +0000

Our new Plugin Library provides an overview of all Medusa plugins, including payments, notifications, shipping, CMS, storage, search, and more.

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 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, multi-region support, multi-channel handling, advanced tax, promotion features, 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, Paypal, Adyen, Klarna)
Notifications (e.g. Sendgrid, Mailchimp, Slack, Twilio)
Shipping (e.g. Webshipper, Brightpearl, Shippo)
Search (e.g. MeiliSearch, Algolia)
Storage (e.g. S3, DigitalOcean, MinIO)
CMS (e.g. Contentful)
Analytics and monitoring (e.g. Segment, 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 plugin and publish it through npm following our publishing guidelines. 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. Otherwise, stay in touch via our newsletter for more product updates.

5 Rules That Most B2B Shops Miss in Their Product Categorization

Nicklas Gellner — Tue, 31 Jan 2023 16:04:04 +0000

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, 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 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.

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.

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 (Mutually Exclusive, Collectively Exhaustive). Meaning that categories cannot overlap (mutually exclusive) while they still have to cover the full product assortment (collectively exhaustive). See example below.

Indiamart 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).

#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 (supplier of fitness equipment) which has 8 main categories with two layers underneath. For instance, Functional Fitness > Strength Equipment > Dumbbell Sets & Dumbbell Racks.

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, 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.

#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.

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. 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.

#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 Keep It Simple Stupid (KISS) principle 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 showcasing a very lean and simple setup despite guarding several thousand products underneath each sub-category.

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). 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 and Made-in-China.com) to improve customer navigation. One of the more nuanced variations of it comes from ec21, which almost treats Top Searching Keywords as a subcategory of its own (see below).

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 UX Learnings From the World's Best Ecommerce Site

Nicklas Gellner — Thu, 15 Dec 2022 13:47:06 +0000

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 will use an example case from a B2B site that recently made the top of HackerNews as the best e-commerce site, mcmaster.com by McMaster-Carr.

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 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

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 is the best e-commerce site I've ever used” recently trended on Hacker News. 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:

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.

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.

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.

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 [add article link] 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.

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.

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.

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.

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

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.

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 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 & Part 2.
Our Perspective on Open Source B2B Ecommerce.
Our Comparison of the Top 5 Open Source B2B Ecommerce Platforms.

Uncovering Open Source B2B Ecommerce

Nicklas Gellner — Wed, 14 Dec 2022 13:55:30 +0000

At Medusa, we recently published our Perspective on Open Source B2B ecommerce as part of the launch of our new B2B starter template.

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 website.

Ecommerce is becoming a key revenue channel in B2B sales

It has long been a myth that B2B businesses don’t offer ecommerce. That’s wrong. A recent McKinsey study 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

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

We used 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

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

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.

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.
Check out our tutorial on how you set up Medusa to support B2B: Part 1 & Part 2.
Reach out in our Discord for a chat on the topic

5 best open source platforms for B2B ecommerce

Nicklas Gellner — Tue, 13 Dec 2022 13:23:36 +0000

B2B ecommerce can be a complicated matter and imposes new requirements for an ecommerce platform compared to what is required to handle regular B2C commerce.

Getting an overview of the B2B features that are supported out-of-the-box in the different open source solutions available in the market can likewise be challenging. Therefore, I spent some time together with Carlos Padilla researching:

What are the 10 most critical features to support a scaleable B2B ecommerce setup?
How well do the 5 most popular open source platforms compare across these features?

Below is a summary of the findings.

Why use open source for B2B commerce

What is an open source commerce platform

Before jumping into it, let’s get the definitions right.

Open source refers to the source code of the platform being fully publicly available for anyone to view, modify, and distribute freely.

B2B ecommerce refers to the direct sale of products or services between two businesses through an online sales portal. For instance, between a manufacturer and a wholesaler.

The benefits of open source commerce platforms

Businesses and their development teams often benefit from open source commerce platforms as they can take full control of the code base. This gives them the flexibility to build bespoke commerce setups.

Newer open source commerce platforms have especially focused on the composability of the platform. This makes it possible for merchants to set up a tech stack of their preference while giving their development teams the possibility of mingling directly with the core to customize it to their preference. This is not possible with proprietary platforms.

This flexibility is the reason why the majority of the world’s top 250k ecommerce sites today use either open source or custom-built platforms to power their ecommerce setups. You can read more about this in our recent Open Source B2B Ecommerce Perspective.

Why does flexibility matter for B2B businesses

The benefits of platform flexibility are only amplified in the world of B2B-oriented businesses.

B2B is a complex area in commerce as you need to handle a lot of aspects that not considered in B2C. This includes customer groups, customer-differentiated pricing & discounts, separate B2B product catalogs, and more.

In addition, the integration landscape becomes more complex due to the need for integrations with ERP systems, more advanced fulfillment systems, new omnichannel experiences on the frontend, etc.

This requires flexible systems that are geared toward handling more bespoke cases. That is the reason why most B2B businesses end up building completely from scratch or hacking their setup together using a proprietary platform.

The 10 Most Important B2B Ecommerce Features

First, we identified the 10 most important features to have for an ecommerce platform that needs to support B2B cases. We determined the features based on conversations with existing B2B ecommerce managers & developers, along with requirement specifications from our own B2B cases.

Below are the 10 features:

Customer groups are a way to group customers with similar characteristics. This feature helps define unique B2B and custom logic for one particular subset of customers, for instance, specific pricing, promotions, or access levels.
Price lists allow setting different B2B prices for different customer groups. This is used to add a sale or override the pricing of one or more products based on specific conditions.
Sales Channels allow separating B2C and B2B customer experiences. Businesses can define different products for different channels. For example, B2B customers can see and purchase different products than B2C customers on the same interface.
Dynamic order management allows businesses to perform granular order handling for B2B customers, including creating a new order on their behalf, adding payments, defining shipping addresses, or changing the order status.
Bulk imports allow for the handling of larger B2B product catalogs by importing them from files, such as CSV files. Resources can be products, orders, customers, prices, etc.
Multi-currency support enables B2B customers to order in their local currency catering to global B2B customers.
Payment flexibility means the ability to configure different payment methods based on regional settings. This allows global B2B customers to choose the payment method that is available in their region.
Product configurations allow merchants to associate unlimited custom attributes and options with their products. For a B2B case, the product catalog can get very complex. So, advanced product configurations provide additional information about a product to help customers make better purchase decisions.
Advanced search allows B2B customers with large catalogs to refine the search and discovery criteria and to display results quickly and accurately. Some advanced search strategies include typo tolerance, intuitive search, synonyms, keyword discovery, and faceted search.
Native headless ecommerce refers to offering a solution where the frontend and backend of an ecommerce system are independent. From a B2B perspective, this allows businesses to offer omnichannel support by simultaneously developing different implementations for different channels. For example, developing a mobile application and a web app.

Legend

✅ = Supported

➕ = Supported via plugin

❌ = Not supported

Medusa (JS/TS)

✅ Customer groups are available out-of-the-box and can be used for making discounts and promotions available for B2B wholesalers or retailer groups.
✅ Price lists are available out-of-the-box and allow you to specify custom pricing for each B2B customer group. Importing prices from a CSV file into a price list is available to better handle larger assortments.
✅ Sales channels allow you to manage order logistics and product data differently for each sales channel. You can create a B2B sales channel, specify which products are available in it, and process B2B orders in its own flow. You can do all of that from the same platform you manage B2C customers. At the moment of writing this, sales channels must be manually enabled using feature flags.
✅ The dynamic order management allows you to create manual draft orders, add existing or custom products as purchased items, and specify custom shipping amounts. Moreover, you can cancel the draft order or mark it as paid.
✅ Bulk imports for products and prices are available out-of-the-box; you can see the import process and check its status or cancel it. It's also effortless to extend the functionality to import other resources like orders or customers by creating batch jobs with the Admin API.
✅ Multi-currency support is available out of the box; you can add multiple currencies and set product prices for each currency and region. Regions represent one or more countries and have their own currency. Customers can choose the region based on their currency and location.
✅ Medusa offers payment flexibility as you can specify which payment providers and methods are available for each region. Medusa offers plugins for PayPal and Stripe, but there are many payment community plugins.
✅ Aside from basic product configuration such as general details or product collection, Medusa allows you to add advanced product configurations including unlimited options and variants, a metadata field to include any custom configurations, pricing per currency and region, and more.
➕ In Medusa, advanced search can be implemented by integrating any search engine. Medusa offers official plugins for Algolia and MeiliSearch. By integrating these powerful search engines, you can utilize their advanced search functionalities. When you add or update products on your Medusa server, the changes are reflected on the indices in the integrated search engine.
✅ Medusa is a flexible headless commerce platform with a backend that holds all the store's logic and data. It offers Admin and Store REST APIs to interact with the backend. It also offers an intuitive Medusa admin and Jamstack storefront starters.

Who should use Medusa

Medusa covers nine of the ten features, leaving out only one feature you can add by using plugins.

Medusa is one of the newest solutions on the market but has been used in production since 2018. It provides a powerful and flexible solution built on a composable architecture making it easy to customize the solution to specific user needs.

Businesses with a B2B ecommerce model should consider Medusa as it provides scalability, extendibility, and strong customization options. It’s also a powerful solution for developers preferring Node.js as it is the most used option in the Javascript and Typescript categories.

Magento (PHP)

✅ Magento uses customer groups to determine available discounts and taxes associated with the group. You can also set pricing rules for groups.
❌ Prices lists aren't offered, but it has catalog and cart price rules where you can apply discounts to specific products based on conditions. However, you can't override the price of products explicitly.
❌ The sales channels feature is not available in the open source version. This feature is available through extensions for Adobe Commerce but only supports specific sales channels such as Walmart or Amazon. However, it doesn't offer customizable sales channels.
✅ The dynamic order management lets you create manual orders from the Admin by selecting the customer and adding products. Also, you can fill up the order currency and apply coupon codes, payment, and shipping methods.
✅ Bulk imports are available out-of-the-box, allowing users to import many records in a single operation. They can import new products and update, replace, and delete existing sets of products.
✅ Magento supports multi-currency as it allows you to accept currencies from more than 200 countries worldwide. You can customize the currency symbols, change the displayed symbol of currencies, and import currency rates.
✅ Payment flexibility is supported by offering various offline methods such as cash on delivery, bank transfer payment, or check/money order methods that you can set for each store. For online methods, there are numerous integrations and gateways for third-party providers.
✅ You can edit the general product information and add media such as images or videos for product configuration. Also, you can customize product options and generate product variations with those options, and manage pricing and inventory.
✅ You must install and configure Elasticsearch or OpenSearch for a basic search or use the paid module Live search for an advanced search.
❌ Magento is not a native headless commerce platform. However, you can access its data through a REST API by making a new integration in the Admin panel or using the GraphQl API developed for the Storefront.

Who Should Use Magento

Magento covers seven of ten parameters and lacks price lists, sales channels, and a native headless solution. Although Magento provides powerful ecommerce features, the lack of these important B2B features can make it an unfit platforms for B2B businesses.

Putting the missing features aside, B2B ecommerce models can consider Magento if they need a centralized ecommerce system and want to be on the market fast. Also, they want a convenient website builder that meets all their needs, such as integrations or automated wholesale web applications.

You can read this article to directly compare Medusa and Magento in terms of ecommerce features and developer experience.

Sylius (PHP)

✅ Customer groups are available by default and are used to attach cart promotions to offer a discount to customers that belong to specific groups. You can't add customers in bulk to a group.
❌ Price lists are not available since Sylius provides product prices per channel. Inside each product, you must set a current, an original, and a minimum price for each channel.
✅ The sales channels feature is available out of the box. You can configure general information, shop billing data, currencies and countries, and look and feel for each channel.
➕ Sylius doesn't offer dynamic order management by default. However, there is an official plugin that allows administrators to create manual orders.
➕ Sylius doesn't have bulk import by default. However, there is an approved plugin in the community that allows importing countries, customer groups, payment methods, tax categories, customers, and products.
✅ Sylius offers multi-currency support because you can set the base currency for each channel. However, you can't specify the price of a product per currency.
✅ Sylius has payment flexibility because you can set different payment methods for each channel. They offer a default configuration to use PayPal and Stripe as payment providers.
✅ In Sylius, configurable products can have different variations and attributes. You can edit products' general information, set their categories, and add many product attributes and images.
➕ They have a grid filter to search by product name for a basic search. Sylius don't support advanced search by default, but you can use a plugin to extend Sylius’ basic search functionality with ElasticSearch.
✅ Sylius is a headless native platform that offers Admin and Shop APIs. A new unified Sylius API is still under development and is tagged as experimental.

Who should use Sylius

Sylius covers six of ten parameters, but two can be added through integrations. It fails to provide some essential features that B2B ecommerce businesses need to create different user experiences for different types of customers.

On the other hand, a B2B ecommerce business can use Sylius if it wants to provide excellent conditions to maintain extensive data and have a proven track of flexibility towards customers' needs and scale of operations.

Spree (Ruby)

❌ Customer groups are unavailable in Spree, and there isn't an official extension to add them.
❌ There are no price lists, and you can’t override product prices explicitly or bulk import prices. However, you can use promotions with rules and conditions to set custom pricing for products, users, and carts.
❌ In Spree, the sales channels feature is unavailable, and there isn't an official extension to add it.
✅ Spree offers dynamic order management by default. You can create manual orders from the admin panel, add products, quantities, and customer details, and choose the shipping method. You can also add order discounts and payments.
❌ Bulk imports are not supported, and there isn't an official integration to add this functionality. Some plugins can help to make bulk imports, but they seem outdated on GitHub.
✅ Multi-currency support is available out-of-the-box; each store can have multiple locales and currencies, but you can't specify the price of a product per currency. If there is more than one currency, visitors can choose which they would like to use to browse the store.
❌ Spree doesn't offer payment flexibility because you can't specify payment methods by region or country, even if you have multiple payment methods, including online and offline options.
✅ For product configurations, you can edit product details and taxonomies. You can also set product option types to manage variant types and add custom attributes and prices for each product.
➕ In Spree, there isn't any advanced search functionality. Still, you can add an Elasticsearch integration with an extension that allows full-text searching and advanced product filtering.
✅ Spree is a modular headless ecommerce platform with two APIs. You can build an application-to-application integration and leverage its permission sets based on resource access.

Who should use Spree

Spree only covers four features out-of-the-box and one more through integrations. So, using Spree can be a challenge for B2B businesses as they have to implement these features themselves for a full B2B experience.

If B2B ecommerce businesses choose Spree they’ll benefit from its versatile, modular open-source ecommerce platform that allows for easy integrations. Also, Spree's order handling system is the best fit for business models needing to do multiple actions on their customers' orders.

Prestashop (PHP)

✅ PrestaShop allows you to give customers certain privileges by assigning them to customer groups. By default, there are three groups available: visitor, guest, and customer. You can’t delete the default groups, but you can add new ones.
❌ Price lists aren't available by default and you can't override the price of products explicitly. It has catalog price rules to assign price reductions by category, brand, supplier, attribute, or feature, to a range of products using conditions.
❌ The sales channels feature is unavailable in Prestashop, and there isn't an official extension to add it.
✅ In Prestashop, dynamic order management is available by default. You can create manual orders, but they are called back-office orders. You can provide customer details, products, vouchers, and addresses and organize the shipping and payment. Also, you can send pre-filled orders to customers.
✅ Bulk imports are available out of the box. You can import everything into Prestashop: categories, products, customers, addresses, brands, suppliers, etc. You can also use other file formats besides CSV for the import.
✅ PrestaShop has multi-currency support, but you can't specify the price of a product per currency. You can add and configure new currencies to meet customers' needs. Currency exchange rates are calculated from one store's default currency unit.
✅ In Prestashop, you can set payment methods by currency, customer groups, or countries. Check and bank wire is the only payment methods enabled by default. However, you can install other payment modules from the Prestashop add-ons marketplace.
✅ You can edit product details on the product configuration page and add quantities, combinations, virtual products, and other stock-related options. You can set pricing options and manage your product's visibility, particular references, attached files, or suppliers.
➕ Prestashop has an internal search engine from which you can configure its behavior. Also, you can install a community or paid extension from their marketplace for advanced search functionalities.
❌ Prestashop is a web application, not a headless native platform. You can enable the shop's web service so third-party tools can access the data.

Who should use Prestashop

Prestashop covers out-of-the-box six of ten parameters, and you can add one more feature through their marketplace integration.

For B2B ecommerce businesses looking for essential features like page management and a Multi-store to sell internationally, Prestashop could be a good option; it supports over 60 languages. Prestashop's administrative panel can be adapted to the business's needs and developed in line with the growth goals.

However, Prestashop doesn't offer price lists and sales channels nor provide a native headless architecture, which is unsuitable for B2B business models looking for extensibility and customization.

Want more?

There are plenty of good resources to discover more about B2B and open source ecommerce:

Download our Perspective on the Open Source B2B Ecommerce industry on our B2B-page.
Check out our tutorial on how you set up Medusa to support B2B: Part 1 & Part 2.

I asked OpenAI's chatGPT to write a ballad about Open source tech 😂

Nicklas Gellner — Sat, 03 Dec 2022 21:04:02 +0000

Normally I mostly write about everything Medusa related, but could not help sharing this one.

Also, used OpenAI for the cover photo 😉

In the world of technology,
Where innovation knows no bounds,
A new way of building rose,
With a philosophy that astounds.

Open source, the name it bears,
A community united,
Sharing knowledge and skills,
To create tools that excite.

From Linux to WordPress,
And countless projects in between,
Open source tech has flourished,
A force that cannot be seen.

No longer bound by profit,
Or the will of just a few,
Open source gives us all,
The power to create anew.

With open source, we are free,
To use, modify, and share,
A world of possibilities,
A future beyond compare.

So let us sing its praises,
And join the open source movement,
Together we can build,
A future that's worth the toil.

A future that's bright and bold,
A future that's ours to hold,
A future that's open and free,
A future that's meant to be.

15,000 GH stars in a year: how we did it 🤩

Nicklas Gellner — Thu, 24 Nov 2022 08:35:06 +0000

It has only been a bit more than a year since we decided to raise funding in the quest of building the best OS composable commerce platform for developers with Medusa.

Since starting, we have had +10,000 project starts, raised $9M in funding, and gone from 30 to +15,000 GitHub stars.

Below are some of my takeaways on how we managed to build strong early traction. While at it, please leave a 🌟 on our repo if you like this article: github.com/medusajs/medusa

TL;DR - 10 lessons:

Solve a problem that hurts:

1. Clear user pain point: Make sure you understand the user pain point you are trying to solve.
2. No good alternatives: What you are building needs to clearly differentiated from what is already out there.
3. Why does it need to be open source: Ask yourself whether an OS solution is needed or if proprietary solutions actually solve it.

Create a delightful product experience

4. A focused product approach: It can be easy to get distracted, so keep the focus on your core product priorities.
5. Support your community: Building traction requires you to ensure that your community feels your commitment to their success.
6. Invest in your DevEx: Make it easy to get started with Docs, quick onboarding flows and supporting tools.

Get the word out there

7. Make it easy to understand: Have a simple product description ready that makes it easy to comprehend what you are building.
8. Focus on dev channels: Ensure your product gets attention in forums and blogs where developers are present.
9. Make big bets and follow through: Prioritize events you know have the potential to send your product viral and make sure you execute these well.
10. Make it authentic: Build content that is authentic and useful to developers instead of regular marketing messages

Below I will go into a bit more depth with each of these steps

Find a problem that hurts

Your project must address a pain point for developers that really are meaningful to them. Three things to watch out for are:

1. Clear user pain point: Make sure you understand the user pain point you are trying to solve. In the world of ecommerce, we knew from experience how painful the developer experience was with many proprietary tools (e.g. Shopify) and legacy open source tools (e.g. Magento and Woo). All of them build with an all-in-one monolith architecture, that forces developers to pursue hacky workarounds for customizations and new integrations. Having experienced the pain points ourselves from our previous careers made it easier to verify, that there indeed was a problem to solve in this space.
2. No good alternatives: What you are building needs to clearly differentiated from what is already out there. In our view, the ecommerce landscape seemed to crave innovation. API-first solutions like Elasticpath, Commercetools, etc. seemed to focus on enterprise sales and less so on developer experience while their proprietary nature made it difficult for them to offer the same customization options as an OS tool. On the open source side, most existing solutions were offering PHP-based backends staying out-of-touch with modern developers, and no one had nailed it with a JS-based alternative yet.
3. Why does it need to be open source: Ask yourself whether an OS solution is needed in the space, or if proprietary solutions actually solve it. It can be tempting to assume that open source is always the path forward, but it might not always hold true. With ecommerce platforms, the complication is that user needs vary a lot for different business types (e.g. just from serving B2C to B2B customers) and this means a proprietary one-fits-all-solution is seldom the right path when a use case is a bit outside the box - which explains why more than half of the world largest ecommerce sites are still built with a custom or open-source commerce backends.

Create a delightful product experience

Identifying the problem is not merely enough. Building a product to solve it and investing in the community and DevEx around it is key as well.

4. A focused product approach: It can be easy to get distracted, so keep the focus on your core product priorities. Building open source, the community will have lots of opinions on additional features, plugins or functionalities to build. Some of this feedback will be less relevant to your core audience. Therefore, be selective of the inputs you get and build the few features that will make a meaningful impact for your core audience instead of a lot of half-decent features for everyone.
5. Support your community: Building traction requires you to ensure that your community feels your commitment to their success. From our early days, we have been razor focused on our community. We do this through a wide array of activities from community events to our transparent product discussions to our continuous focus on building community support materials. Likewise, we are dedicating a lot of time to answering community inquiries on GitHub and Discord helping devs get started.
6. Invest in your DevEx: Make it easy to get started with Docs, quick onboarding flows and supporting tools. We prioritize the developer experience by putting a lot of focus into areas such as our Documentation - which we treat as a product of its own with a full-time team member dedicated to it - while ensuring that our onboarding flow is easy to get through with supporting project starter templates.

Get the word out there

When you have a great developer experience set up, your key task becomes to create awareness around the project.

7. Make it easy to understand: Have a simple product description ready that makes it easy to comprehend what you are building. We focused a lot of our messaging around being “the open source Shopify alternative” which instantly resonated with developers (see e.g. our HN launch). In reality, Medusa is much more than open source Shopify as our modular architecture better fits more bespoke ecommerce cases than typical “mom and pops” Shopify stores. Yet, the simplicity of the messaging makes it very easy for developers to categorize the solution when quickly hearing about it for the first time.
8. Focus on dev channels: Ensure your product gets attention in forums and blogs where developers are present. We have always remained focused on developer channels and spent energy creating content and initiatives to target these; e.g. leveraging Reddit to make a lot of “mini launches” or setting up a Writers Program to produce content for channels like Dev.to, Medium and Hashnode. Other tools like Supabase focuses on Twitter, while Digital Ocean is a prime example of own channel content done right.
9. Make big bets and follow through: Prioritize events you know have the potential to send your product viral and make sure you execute these well. Once in a while, we have events we believe have the potential to make Medusa go viral, e.g. ProductHunt launch, Series Seed investment announcement or our recent Medusa Hackathon. For all of them, we prioritized planning ahead and making a structured campaign around it to ensure maximal exposure, sometimes preparing videos, announcement content, and website updates weeks or months in advance.
10. Make it authentic: Build content that is authentic and useful to developers instead of regular marketing messages. In our 12 months, we did not spend a single dollar on ads for Medusa. Instead, we focused our resources on building content that was authentic to developers through articles and tutorials that were centered around explaining what our product did instead of more sales-oriented messaging.

A word of caution

I hope the above gave some useful inputs from our journey. One last disclaimer: In all honesty, GH stars can be a bit of a vanity measure for a project's popularity when used as a standalone metric.

I will be an advocate for looking into more usage-related metrics as well such as project starts, active developers, monthly contributors etc.

Where GitHub stars do serve as a fine indicator is to understand if people are interested in what you are building - and it is one of the few OS metrics that are comparable across projects.

From PHP to JS ecommerce: Migrate from Magento and stay open source 🤩

Nicklas Gellner — Tue, 15 Nov 2022 10:39:52 +0000

If you are a fan of open source and ever been wanting to build ecommerce, you've probably been considering Magento.

But then again you might have hesitated because it is in PHP and not JS / Typescript-based.

We got your back. Here's how to quickly shift to a ecom framework that is:

Open source (MIT licensed)
Javascript and Typescript based
Easier to handle than Magento with better DevEx

In this article, we’ll share with you the brand new Medusa plugin, Magento Source Plugin, which allows you to import your products and categories from Magento into Medusa - an open source Node.js ecommerce platform.

Why Migrate

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 storefront, third-party services, and custom features.
Use of Modern Technologies: You can handpick different components of your tech stack (e.g. Jamstack storefronts) or update the different components of your stack independent of one another.

For a thorough comparison, please see this post.

If you like Medusa, please give Medusa a 🌟 on GH

medusajs / medusa

Building blocks for digital commerce

Medusa

Documentation | Website

Building blocks for digital commerce

Getting Started

Visit the Quickstart Guide to set up a server.

Visit the Docs to learn more about our system requirements.

What is Medusa

Medusa is a set of commerce modules and tools that allow you to build rich, reliable, and performant commerce applications without reinventing core commerce logic. The modules can be customized and used to build advanced ecommerce stores, marketplaces, or any product that needs foundational commerce primitives. All modules are open-source and freely available on npm.

Learn more about Medusa’s architecture and commerce modules in the Docs.

Roadmap, Upgrades & Plugins

You can view the planned, started and completed features in the Roadmap discussion.

Follow the Upgrade Guides to keep your Medusa project up-to-date.

Check out all available Medusa plugins.

Community & Contributions

The community and core team are available in GitHub Discussions, where you…

View on GitHub

Magento Source Plugin

The Magento source plugin 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 to install a Medusa server in three steps.

Furthermore, the Medusa server should have PostgreSQL and 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.

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.

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 or using the Medusa Admin.

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 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 or Gatsby storefronts.
Install the Medusa Admin.
Check other plugins such as Stripe, SendGrid, and Algolia.

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

Medusa Hackathon Winner Announcement

Nicklas Gellner — Thu, 27 Oct 2022 18:31:00 +0000

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 and an overview of our competition guidelines here.

Winner: Best Overall

Payment integration to Paystack

By Andrew Glago & Femi Akinyemi

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

By Anish De

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

By: Hana

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

Burger Hat store

By Anupreet Singh

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 by @stnguyen90 (IP lookup)
3D Product Previewer by @MrKrishnaAgarwal, @TamilPrakash-S & @manojvirat457 (Store)
Reepay integration by @josipmatichr, @anteprimorac & @marijapolovic (Payment)
Cashfree plugin by @Azanul & @AzamAmbareen (Payment)
Paytm plugin by GyaniRoman23 & saurabh73 (Payment)
Wompi plugin by @Cristian-David-Github (Payment)
Billplz plugin by @ibnumalik (Payment)
PNPM Monorepo by @dale_nguyen (PNPM)
Go.lang SDK by @HarshMangalam6 (SDK)
Medusa Flutter Package by karanjoshi, keval-makadiya, Pankti910, parth-asodariya & Snehal-Singh174(Flutter Package)
Discord integration by @stefa-n, @Feely3007 & @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. Here you can also stay tuned for more Medusa news and events.

Once again, thanks for making this a wonderful first Medusa Hackathon!