How to implement Headless eCommerce in Umbraco

There are various ways to implement headless eCommerce platforms on your website, including third-party providers such as Shopify (https://www.shopify.com), Ecwid (https://www.ecwid.com) or Shoprocket (https://www.shoprocket.co) plus loads more.

Our themes now ship with an out of the box Ecwid eCommerce integration. 

Step 1

First of all, you will need to sign up for a free account at https://my.ecwid.com/cp/#register. Don't worry, you can start selling online at absolutely no extra cost, the free tier on Ecwid is free forever.

Step 2

Ecwid provides demo content for your store but you can remove this when you are ready to add your own products. In the meantime, let's try implementing the demo content on your Umbraco website.

Step 3

Once you've signed up, log in to the Ecwid dashboard. In the address bar, you'll see your store ID (e.g. https://my.ecwid.com/store/123456789#dashboard). Copy the number in the URL.

Step 4 

Let's go to your uSkinned site and log in to the CMS.

Step 5

In the tree menu, go to the page you intend to add your shop. For instance, you can create a new page called, Shop. 

Step 6

On the 'Content' tab, locate the 'Main Content section. Click to 'Add content' and from the slide-out panel, select 'Ecwid Shop'. Save and Publish your page.

Step 7

In the tree menu, go to 'Configuration'. From the grid, select 'Global Settings'.

Step 8

Go to the 'Shop' tab. Enable your shop, select the Ecwid option, enter the shop ID that you copied in step 3 and select your shop page. Save and Publish.

Step 9

 

Check out the final result on your website (or below). You can now start selling your products on your website.

Step 1

Login to the CMS, navigate to the page or blog post you would like to place your widget, right-click on the corresponding Component folder and choose to add an 'Embed Code Block' component.

Step 2

Sign up for free at https://my.ecwid.com/cp/#register.

Step 3

Ecwid provides demo content for your store but you can remove this when you are ready to add your own products. In the meantime, let's try implementing the demo content on your Umbraco website.

Step 4

From the control panel locate the left-hand side navigation and click on 'All Sales Channels'.

Step 5

On the right-hand side scroll until you find the option 'Custom website'. Click 'Learn more'.

Step 6

Under the heading 'Get the Ecwid integration code here' choose to 'Copy Code to Clipboard'.

Step 7

In the CMS, name your new 'Embed Code Block' component and paste in the code copied from Ecwid. Click 'Save and Publish'.

Step 8

Check out the final result on your website (and below). You can now start selling your products on your website.

Headless eCommerce Example

Start selling online today with any uSkinned theme and Ecwid eCommerce.

Get started today

Join thousands of agencies, freelancers, enterprises & start ups worldwide who use uSkinned Umbraco themes to deliver results.

NEW Themes Released

We have launched new themes and released major updates.