The Easiest Way to Get an E-Commerce Site Running in Umbraco

I love Umbraco.

I’ve felt this way for a long time now.

I firmly believe that making it a more recognizable and popular content management system is a benefit for the dev community.

That’s why my partner Marc and I launched uSkinned four years ago. Since then, we’ve sold Umbraco themes to thousands of users across 77 countries.

However, it’s only lately that we’ve focused our attention on an important piece that we thought hadn’t been optimized yet with Umbraco: e-commerce.

But I won’t spoil with the solution we came up with just yet.

First, I want to quickly go through why I think Umbraco is so great and what it has to offer for e-commerce projects. It will help shed more light on the missing pieces that inspired our work.

Shall we?

What does Umbraco offer for e-commerce?

Umbraco is a well-established content management system. It was born in the early 00s and now counts over 200K active members running over 500k Umbraco installs.

Our introduction to Umbraco came in 2010 when Marc and I worked in the same agency. Back then, it was common to build custom CMS for clients. Until one day, a friend at another agency in Glasgow mentioned that they were using Umbraco to create websites.

We had a look at it and then never looked back.

Knowing that a fantastic open source content management software like that existed, we concluded that building a custom CMS was crazy. Umbraco allows developers to craft a CMS editing experience that fits their clients’ needs—and it’s backed by a friendly community who continually improves it.

Of course, there are already a few existing e-commerce solutions for Umbraco, great ones, even. If you’re new to it, here’s a shortlist of the options to look into:

• Tea Commerce

• Merchello

• Ucommerce

I personally have experience with both Ucommerce and Tea Commerce: cool platforms with great functionalities. One thing they all have in common, though, is that a significant developer input is needed to set them up.

So I started asking myself, is there any other way to easily build an online store with Umbraco?

Crafting everything from scratch was pretty much the only other option. Creating a custom e-commerce solution is always an exciting challenge for us developers, but it went against what we were trying to build with uSkinned.

That’s why we decided to use Snipcart to power Merch, our first e-commerce theme for Umbraco.

What’s Merch?

Basically, Merch is our answer to what we found was the most significant gap in the Umbraco e-commerce ecosystem. A solution allowing our customers to launch an online store with absolutely no developer input.

This new uSkinned theme provides an out-of-the-box, ready-to-go shopping cart and e-commerce backend that even your “wait, what does this button do” Grandma can start playing with right away. The package is easy to install, so that you can get going in minutes.

Upload your business’ logo & content and start selling immediately.

Snipcart powers the e-commerce functionalities, so you’ll have access to all the features available in their merchant dashboard, namely:

• Inventory management

• Abandoned cart recovery

• Tax management

• Discounts

• Multi-currency

• Payment gateways

• Invoicing

• Shipping

• Etc.

Design-wise, we use a modular, component-based design architecture. There are no fixed templates for home pages, landing pages, product pages, etc. Pages are built up with pre-designed components which give content editors a great deal of flexibility.

Unlike other e-commerce platforms, you’re not stuck with a rigid pre-defined product page design.

Personality and great UX are essential to the success of an online store. Using our pre-designed components you have an unlimited variety of options for presenting the content of your product pages.

This allows users to create product visuals that represent what they sell in an engaging and user-focused manner that will boost conversions.

All of these choices don’t mean that devs can’t have their part of the fun!

If there is a requirement for further customization, then a developer has the perfect starting point to work from and extend the built-in functionalities even further, as we’ll see later on.

But your first move will be plugging the theme to your Umbraco installation. Let’s see how!

How to use Merch?

As I mentioned earlier, our main concern here was to build an e-commerce theme that was very easy to set up. Trust me; it’s no overstatement. Eight simple steps will get us there.

1. Install the latest build of Umbraco CMS. This can be in a local, development or live environment. Umbraco Cloud will also do the job.

2. Download the Merch theme package file from uSkinned’s website.

3. Login to your Umbraco CMS account.

4. Go to Developers section.

1. Click on Packages.

1. Click on Install Local.

1. Upload the Merch package file. Wait a couple of minutes.

2. That’s it. You’re ready to go!

The shopping cart & e-commerce backend

You can add any number of products and categories under the ”Shop” node in the CMS. Additionally, using the simple interface provided you can take advantage of all the great ways Snipcart allows you to configure your products, from pricing, sizes, delivery options, etc.

All Snipcart specific product and checkout customizations available can be configured directly from Umbraco with no need to ever touch the backend code.

To do this, we’ve taken all of the product definitions available within Snipcart and added them to Umbraco. When creating a new product you have all of the options you would get by using Snipcart the traditional way.

Behind the scenes, we have a helper function which creates the Snipcart “Add to Cart” button and adds all product definitions previously defined.

We have also created an easy to use interface to provide product custom fields and order custom fields.

Why Snipcart?

I know it sounds ironic to use a developer-oriented shopping cart to build a solution to strip away devs’ input, right? Well, for us it was quite an easy choice.

Users are free to choose the level of developer’s input—from none to high—depending on how much they want to push customization.

This integration also allows a separation of concerns. We’re big believers that content management systems work best when they are used for what they were intended—managing content.

This is why we decided that Snipcart was a great fit for our themes. A user can manage their products, categories, pricing, etc. in the same place as they maintain the rest of the site’s content.

In the meantime, more advanced e-commerce functionalities (invoicing, orders, stock management, etc.) are all handled separately where they belong—the Snipcart dashboard. These features allow your business to scale as you go along.

What’s under the hood?

Integrating Snipcart with Umbraco is unbelievably straightforward. Our approach started by creating a custom Document Type (the data definition of content in Umbraco) that would be used to specifically manage product information.

We then went through every product definition available with Snipcart and added these as properties of our Document Type. The idea behind this was to provide our users with a simple editor for managing all of the options available with Snipcart and avoid them having to delve into code.

Behind the scenes, we have created a helper function which builds up the product button’s data-items and therefore configures the buy button to pass the required information to the shopping cart:

    @if (globalSettings.SnipcartApikey.HasValue() && !Model.AlternativeProductUrl.HasValue() && Model.ProductCurrentPrice.HasValue())
    {
      <fieldset class="buttons">
        <button id="SnipcartBuyButton" class="snipcart-add-item btn btn-lg btn-block c1-bg c5-text" @Html.Raw(USNShopHelper.BuildSnipcartProductDefinition(Model.Id))>
          @umbraco.library.GetDictionaryItem("USN Shop Add to Basket Detail")
        </button>
      </fieldset>
    }

Similarly, we looked at all global information relating to the Snipcart shopping cart and allowed configuration of these elements via Global Site Wide Configuration section in Umbraco:

    if (globalSettings.SnipcartApikey.HasValue())
    {
      <script id="snipcart" data-api-key="@globalSettings.SnipcartApikey" data-autopop="@globalSettings.EnableCartPopup.ToString().ToLower()" @Html.Raw(USNShopHelper.BuildSnipcartGlobalDefinition(Model.GlobalSettings.Id)) src="//cdn.snipcart.com/scripts/2.0/snipcart.js"  type="text/javascript"></script>
      <link href="//cdn.snipcart.com/themes/2.0/base/snipcart.min.css" rel="stylesheet" type="text/css" />
      <script>
        document.addEventListener('snipcart.ready', function () {
          Snipcart.DEBUG = @globalSettings.EnableSnipcartLogging.ToString().ToLower();
        });
      </script>
    }

It would be hard to go deeper on a technical level since the integration is so simple. A testament to how good Snipcart and Umbraco are!

Closing thoughts

We are passionate about making Umbraco the ultimate CMS.

With our uSkinned themes, we have been able to reach a much larger audience, because novice users are now able to set up Umbraco sites without the need for a developer. With the launch of our first e-commerce theme, we believe we have found the perfect marriage between content editing and e-commerce to make it easier than ever before to launch an online store.

In case you’re wondering, we definitely intend on releasing more e-commerce themes for Umbraco. We’ve been delighted with how Merch has turned out and have already had a really positive response from our user-base.

There are lots of plans in the pipeline for us, and we can’t wait to get started on them! :-)

If you have any questions or need any help with the Merch theme, don’t hesitate to contact us.

If you've enjoyed this post, please take a second to share it on Twitter. Got comments, questions? Hit the section below!