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. In our example below, we will use Ecwid, which is an amazing service with a free to use forever option that will get your webshop up and running quickly.

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

Get started today

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