How to create an eCommerce shop and checkout with Shoprocket

Create a full product listing and shopping cart with the uSkinned Site Builder for Umbraco and Shoprocket.

There are various ways to implement headless eCommerce platforms on your website, including third-party providers such as Shopify, Snipcart, FoxyCart, Stripe, PayPal, Ecwid and many more.

Step 1

Step 2

Under Home, create a new Page, name it and select the 'Full' layout option.

Step 3

Click 'Add Content' and choose the 'Embed Code' component.

Step 4

Go to your Shoprocket admin dashboard. From the left-hand side navigation, select 'Sales Channels' > 'Existing websites' from the left-hand side menu.

Embed shoprocket into Umbraco CMS.

Step 5

From the options provided, select 'Embed Multiple Products into a page'.

You can choose from a wide range of options, including, colors, padding, products per row etc. This will help make sure your products match your uSkinned website.

Step 6

Return to the uSkinned Site Builder CMS. In the 'Embed Code' field, paste the code provided by Shoprocket.

In the bottom right corner, click 'Submit'.

Embed full shoprocket shop into Umbraco CMS.

Step 7

We now need to embed the Shopping Cart embed code — this will live at a Global level so that your shopping cart is accessible throughout all of your website pages.

In the tree menu, go to 'Global' > Click on 'Settings' > Click on 'Scripts'. In the field 'Header Scripts' paste in the Embed code provided by Shoprocket. In the bottom right-hand corner, click 'Save and publish'.

Embed shopping cart from Shoprocket into Umbraco CMS.

Step 8

You can now view all of your Shoprocket products on the front end of your uSkinned Site Builder for Umbraco website.

Go to any other page on your site and you will be able to access your shopping cart. This will make sure your customers can get to the checkout from any page.

Embed Shoprocket with uSkinned for Umbraco.