How to create eCommerce ready website with Snipcart

Create a modern product page layout with the uSkinned Site Builder for Umbraco and Snipcart.

Snipcart lets you sell any type of product, including single, multiple, recurring, subscriptions, digital, bundled and donations!

Get 3 months of Snipcart usage for FREE when you sign up using this uSkinned promotional link: https://app.snipcart.com/register?utm_term=uskinned

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

Follow the steps below or read our full guide on setting up a Shop in Site Builder v4.1.0 and above here.

Sign up for Snipcart

Step 1

Go to the Snipcart website and sign up for a free account.

Step 2

Once you register, log in to the Snipcart dashboard.

Step 3

Locate and copy your API key.

Please note, your API key will be different depending on whether you are in Test or Live mode. If you start in Test mode, remember to update your API key when you switch to Live mode.

Set up Snipcart in uSkinned

Step 4

Log in to uSkinned Site Builder.

Step 5

In the tree menu on the left, go to Global.

Step 6

In the grid on the right, go to Content and Settings.

Step 7

Go to the Shop tab.

Step 8

Choose Snipcart from the options provided. Add your currency settings then scroll down to paste your Snipcart API key.

Step 9

Save and publish.

Create your Shop Listing

Step 10

Go to your uSkinned dashboard.

Step 11

In the grid on the right, open Quick Create.

Step 12

Click to create a Shop.

Step 13

In the slide-out panel, select the position in your tree menu where you would like the new Shop listing to appear.

Step 14

Name your Shop listing node.

Please note, before your Shop listing can be displayed on your site will need to publish the Shop node, Filters node and Products node.

Create a product

Step 15

In your tree menu, go to your new Shop node.

Step 16

Expand the node to reveal the Filters and Products folders.

Step 17

In the Products folder, create your first product.

Step 18

Name your product, enter a description, and set your price.

Scroll further to discover all of the awesome Snipcart settings too.

Step 19

Save and publish your product.

With everything now in place, you're ready to start selling!

Step 1

Go to the Snipcart website and sign up for a free account.

Step 2

Go to the Snipcart documentation website > Store set up > Installation.

Step 3

Copy the code titled "Add preconnect hints":

<link rel="preconnect" href="https://app.snipcart.com">
<link rel="preconnect" href="https://cdn.snipcart.com">

Copy the code titled "Include our default stylesheet":

<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.2.1/default/snipcart.css" />

Copy the code titled "Include Snipcart on your site":

<script async src="https://cdn.snipcart.com/themes/v3.2.1/default/snipcart.js"></script> 
<div hidden id="snipcart" data-api-key="YOUR_PUBLIC_API_KEY" data-config-modal-style="side"></div>

Make sure you update the API Key to your own personal API KEY. This is provided by Snipcart when you sign up and can be found in your customer dashboard.

Please note, in our example, we will include the data attribute for the modal style.

data-config-modal-style="side"

Step 4

Login to the CMS > In the tree menu, go to 'Global' > Click on 'Settings' > Click on 'Scripts'.

In the field, 'Header opening scripts', paste in the Preconnect Hints.

In the field, 'Header closing scripts', paste in the stylesheet.

In the field 'Before closing body scripts' paste in the Javascript file and Cart code.

In the bottom right-hand corner, click 'Save and publish'.

Step 5

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

Step 6

Click 'Add Content' and choose the 'Split Component'.

Step 7 a

Return to the Snipcart documentation > Store set up > Products.

Copy the example product button code provided.

<button class="snipcart-add-item"
  data-item-id="starry-night"
  data-item-price="79.99"
  data-item-url="/paintings/starry-night"
  data-item-description="High-quality replica of The Starry Night by the Dutch post-impressionist painter Vincent van Gogh."
  data-item-image="/assets/images/starry-night.jpg"
  data-item-name="The Starry Night">
  Add to cart
</button>

Please note, you will need to customise all of the data attribute values to the values of your own products and include the relevant classes to style the button so that it matches your uSkinned website.

For example, the <button> code for a t-shirt might look like:

<button class="snipcart-add-item btn base-btn-bg base-btn-bg-solid base-btn-bg-hover-solid base-btn-text base-btn-borders"
  data-item-id="t-shirt"
  data-item-price="19.99"
  data-item-url="/clothes/t-shirt/"
  data-item-description="This is an awesome t-shirt."
  data-item-image="/media/xsdeds1/t-shirt.jpg"
  data-item-name="T-shirt">
  Add to cart
  <span></span>
</button>

You can even add custom attributes, including customer/gift notes and product options, but you can learn more about this on the Snipcart documentation website.

Step 7 b

Return to the CMS > On Split Section 1, click 'Add Content' > choose the 'Pods' block.

Step 7 c

At the top, enable the 'Intro' section.

At the label, 'Heading' enter the product name.

At the label, 'Text' enter the product description.

Step 7 d

At the label 'Pods', click 'Add content'. From the options, select 'Embed Code' pod.

Step 7 e

In the Embed Code field, paste your Snipcart button code.

Then, at the bottom right click 'Submit'.

Step 1

Go to the Snipcart website and sign up for a free account.

Step 2

Go to the Snipcart documentation website > Store set up > Installation.

Step 3

Copy the code titled "Add preconnect hints":

<link rel="preconnect" href="https://app.snipcart.com">
<link rel="preconnect" href="https://cdn.snipcart.com">

Copy the code titled "Include our default stylesheet":

<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.2.1/default/snipcart.css" />

Copy the code titled "Include Snipcart on your site":

<script async src="https://cdn.snipcart.com/themes/v3.2.1/default/snipcart.js"></script> 
<div hidden id="snipcart" data-api-key="YOUR_PUBLIC_API_KEY" data-config-modal-style="side"></div>

Make sure you update the API Key to your own personal API KEY. This is provided by Snipcart when you sign up and can be found in your customer dashboard.

Please note, in our example, we will include the data attribute for the modal style.

data-config-modal-style="side"

Step 4

Login to the CMS > In the tree menu, go to 'Global' > Click on 'Settings' > Click on 'Scripts'.

In the field, 'Header opening scripts', paste in the Preconnect Hints.

In the field, 'Header closing scripts', paste in the stylesheet.

In the field 'Before closing body scripts' paste in the Javascript file and Cart code.

In the bottom right-hand corner, click 'Save and publish'.

Step 5

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

Step 6

Click 'Add Content' and choose the 'Split Component'.

Step 7 a

Return to the Snipcart documentation > Store set up > Products.

Copy the example product button code provided.

<button class="snipcart-add-item"
  data-item-id="starry-night"
  data-item-price="79.99"
  data-item-url="/paintings/starry-night"
  data-item-description="High-quality replica of The Starry Night by the Dutch post-impressionist painter Vincent van Gogh."
  data-item-image="/assets/images/starry-night.jpg"
  data-item-name="The Starry Night">
  Add to cart
</button>

Please note, you will need to customise all of the data attribute values to the values of your own products and include the relevant classes to style the button so that it matches your uSkinned website.

For example, the <button> code for a t-shirt might look like:

<button class="snipcart-add-item btn base-btn-bg base-btn-bg-solid base-btn-bg-hover-solid base-btn-text base-btn-borders"
  data-item-id="t-shirt"
  data-item-price="19.99"
  data-item-url="/clothes/t-shirt/"
  data-item-description="This is an awesome t-shirt."
  data-item-image="/media/xsdeds1/t-shirt.jpg"
  data-item-name="T-shirt">
  Add to cart
  <span></span>
</button>

You can even add custom attributes, including customer/gift notes and product options, but you can learn more about this on the Snipcart documentation website.

Step 7 b

Return to the CMS > On Split Section 1, click 'Add Content' > choose the 'Pods' block.

Step 7 c

At the top, enable the 'Intro' section.

At the label, 'Heading' enter the product name.

At the label, 'Text' enter the product description.

Step 7 d

At the label 'Pods', click 'Add content'. From the options, select 'Embed Code' pod.

Step 7 e

In the Embed Code field, paste your Snipcart button code.

Then, at the bottom right click 'Submit'.

Step 8

On Split Section 2, click 'Add Content' and choose the 'Gallery' block. This is to showcase the product images that support your new product.

Step 9

Click 'Add Content' to select your image or video type. We will use the 'Gallery Multiple Images' options to quickly select multiple images in our example.

Step 10

Select the product images you wish to showcase. Please note, you are not limited to just showcasing images, you can use YouTube, Vimeo, or videos uploaded to your Media section too. Once you're happy, click 'Create' in the bottom right.

Step 11

Still on your 'Gallery', in the top right, click on 'Settings'. In our example, we will choose:

- Items per row — 1
- Image style — 1:1 Square
- Enable Carousel: Yes
- Show arrows: Yes

Once you're happy, click 'Submit' in the bottom right.

Step 12

Still on your 'Split Component', in the top right, click on 'Settings'. Choose the settings that best suit your site design. Now click 'Submit'.

Step 13

Since the product name in the 'Split Component' will be our page title, we can hit the switch to 'Hide Page Title'.

Step 14

Your users can now checkout securely with Snipcart.

Coffee

Buy our test Snipcart product. Adding Snipcart Headless eCommerce to your uSkinned for Umbraco website really is this easy.

Thanks to the code supplied with Site Builder, your Snipcart cart & checkout will adopt the design options of your website.

Snipcart product shown in uSkinned website. Using Hoy theme design.

Snipcart product shown in uSkinned website. Using Wireframe theme design.

Snipcart mini checkout slide out in uSkinned for Umbraco. Using Hoy pro theme design.

Snipcart mini checkout slide out in uSkinned for Umbraco. Using Wireframe theme design.

Continue Snipcart checkout pages to complete order. Using Hoy pro theme design for Umbraco.

Continue Snipcart checkout pages to complete order. Using Wireframe theme design.

Don't stop there though, thanks to the uSkinned Site Builder's modular approach, you can add more components such as parallax banners of accordions for FAQs to really showcase your products.

You can even use the 'SEO & Share' tab to enhance the product's visibility and ranking on search engines like Google.

#h5yr

Sign up for Snipcart

Set up Snipcart in uSkinned

Create your Shop Listing

Create a product

Build your website