How to create eCommerce ready product pages with Foxy.io

Create a modern product page layout with the uSkinned Site Builder for Umbraco and Foxy.io — previously known as Foxy Cart.

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

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

Step 1

Go to your Foxy.io admin dashboard. If you do not have an account you can sign up for a Foxy.io account here.

We need to copy the Foxy.io javascript code highlighted — this will live at a Global level.

<script data-cfasync="false" src="https://cdn.foxycart.com/uskinned/loader.js" async defer></script>

Foxy.io javascript code.

In the field 'Before closing body scripts' paste in the javascript code provided by Foxy.io.

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

Foxy.io script added to the global level of uSkinned website.

Step 2

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

Create a Foxy.io product page in uSkinned for Umbraco.

Step 3

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

Step 4

At this point, thanks to the flexibility of Foxy.io, we have two options on how to proceed.

Step 4 a

Return to the Foxy.io dashboard and copy only the product URL.

https://uskinned.foxycart.com/cart?name=Product%20Name&price=10

Step 4 b

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

Step 4 c

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

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

At the label 'Buttons', click 'Add'.

Step 4 d

In the slide-out panel, at the label 'Link' paste the URL that you copied from Foxy.io in step 4 a.

At the label, 'Link title', enter "Add to cart" (or whatever you'd like the button to say).

In the bottom right, click 'Submit'.

Step 4 a

Return to the Foxy.io dashboard and copy <form> code provided.

<div class="form">

<!-- form example -->
<form action="https://uskinned.foxycart.com/cart" method="post" accept-charset="utf-8">
<input type="hidden" name="name" value="Cool Example" />
<input type="hidden" name="price" value="10" />
<input type="hidden" name="code" value="sku123" />

<fieldset>

<div class="form-group dropdown">
<label class="label_left">Size</label>
<select class="form-control" name="size">
    <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="large">Large</option>
</select>
</div>

</fieldset>

<fieldset class="buttons">
<input class="btn btn-block c1-btn-bg c1-btn-text c1-btn-borders" type="submit" value="Add to cart" class="submit" />
</fieldset>
</form>

</div>

Step 4 b

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

Step 4 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 4 d

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

Step 4 e

In the Embed Code field, paste your Foxy.io <form> code.

Then, at the bottom right click 'Submit'.

Step 6

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 7

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 8

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 9

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 10

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 11

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

Step 12

Finally, hit 'Save and Publish'. You can now view your awesome and modern product page on the front end of the website.

Step 12 a

Foxy.io Link approach result.

Step 12 a

Foxy.io Form approach result.

Your users can now checkout securely using the hosted Foxy.io checkout page. You can customise this checkout page to suit your own brand and requirements via the Foxy.io dashboard.

FoxyCart hosted checkout page.

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