Create ecommerce ready product pages in Umbraco with Foxy + uSkinned

Overview

This article walks through building a product page in Umbraco using the uSkinned Site Builder and adding Foxy checkout to it. uSkinned’s Split Component and Pods blocks let you lay out a product page (images, description, gallery) and drop in either a simple add-to-cart link or a full add-to-cart form with product options.

Add the Foxy Code Snippet

1. 1

   In the Foxy admin, go to Settings > Website & Products.

2. 2

   Copy the Foxy loader.js code snippet.

3. 3

   In Umbraco, go to the Global node in the content tree, click Settings, then Scripts.

4. 4

   Paste the snippet into the Before closing body scripts field.

5. 5

   Click Save and publish.

Create the Product Page

1. 1

   Under Home, create a new page and select the Full layout.

2. 2

   Click Add Content and choose the Split Component.

3. 3

   On one side of the split, add your product images using the Gallery block (supports multiple images, YouTube, or Vimeo).

4. 4

   On the other side, add either an add-to-cart link or an add-to-cart form, depending on whether your product needs options like size or color (see below).

Option A: Add-to-Cart Link (no product options)

1. 1

   In the Foxy admin, use the Link & Form Builder to generate a product URL.

2. 2

   In Umbraco, add a Text block to the split section.

3. 3

   Set the Heading to your product name and Text to your product description.

4. 4

   Add a Button, paste the Foxy product URL into the Link field, and set the Link title to “Add to Cart.”

Option B: Add-to-Cart Form (with product options)

1. 1

   In the Foxy admin, use the Link & Form Builder to generate a product form with the options you need (size, color, etc.).

2. 2

   In Umbraco, add a Pods block to the split section.

3. 3

   Enable the Intro section and set a heading and description.

4. 4

   Add an Embed Code pod and paste your Foxy form code into it.

Test It

Publish the page and open it on your live site. Click the add-to-cart button or submit the form — the Foxy cart should open with your product added, and checkout proceeds through Foxy’s hosted checkout page.