Adding e-commerce to your website

Introduction

There are a number of widgets that you can use to add to your website and allow your users to purchase goods and services. A number of these widgets can be found within the Content Catalogue and easily inserted into your website. In this article, we're going to explain how to implement them and add e-commerce to your site.

Xara doesn't provide any e-commerce abilities natively, this functionality is provided by third-party widgets.

PayPal Buttons

PayPal is one of the most common e-commerce providers as it's very easy to customise, insert and use within website. The PayPal widget in the Content Catalogue is only available for Designer Pro & Web Designer Premium however we'll show you how to also insert it manually into Web Designer classic.

The PayPal button can be found under File > New from Content Catalogue > Components > Print & Web Components > eCommerce

There are three PayPal buttons within the Content Catalogue - "Add to Cart", "Buy Now" & "View Cart". "Buy Now" will take the user to the checkout screen straight away to purchase that individual item, and "Add to Cart" is used alongside "View Cart" to allow users to purchase multiple items.

Hover over the widget and click on Insert.

This will open up a form from PayPal and allow you to set your item's details. Once you are finished, click "Create Button" at the bottom of the form (not insert at the bottom of the window)

This will generate the code for your button. Click on Select Code and then Insert at the bottom of the window. This will generate a placeholder and insert the code for your button into the page.

Known Issues

If you try to re-edit your button, you might find that the settings or values would be lost and a new blank form is present. This is because Xara doesn't send the information of the button back to PayPal.

The optimal workflow would be to log into PayPal's website, generate the buttons there and copy the code into a placeholder. When you need to change the parameters of a button, edit it on the website and then right-click on your button > Web Properties > Placeholder > HTML Code Body and select all > Paste.

This is also the method you can use if you are using Web Designer classic and don't have access to the PayPal widgets within the Content Catalogue.