E-commerce

In Xara Designer Pro 6 and Web Designer 6 you can use our set of e-commerce widgets to add your own online store to your website, or to provide access to popular online shopping sites such as eBay. We're going to show you how to do this using PayPal and eBay To Go.

Using PayPal buttons you can let your customers buy one item at a time by simply adding a Buy Now button on your website, or you can allow multiple items with an Add To Cart button. The credit cards are processed by PayPal, you just have to deliver the goods!

eBay widgets give you up-to-the-minute detailed information on any eBay items for sale, from an individual product to the online stock of an entire eBay store.

PayPal Add to Cart

Using a PayPal Add To Cart button, your customers can buy multiple items from your website.

 

1

Drag the PayPal Add To Cart widget from the Ecommerce Widgets section of the Designs Gallery on to your Designer Pro 6 or Web Designer 6 web page.

PayPal opens in the Create New Widget: PayPal Add to Cart Button window.

 

2

Click Create Your Button Now next to the image of a PayPal Add to Cart button.

The Create PayPal Payment Button page opens in the Create New Widget window.

 

3

We recommend that at this stage you log in to your PayPal account or create a new account if you're not already registered.

Click one of the Log In links below the boxes in the Step 1 panel to open the PayPal Log Into Your PayPal Account or Sign Up page.

Once you're logged in or signed up, you are returned to Step 1 of the Create PayPal Payment Button page.

4

In the Step 1 panel, do the following:

  • Choose Shopping Cart from the button type drop-down list (this should be selected by default) 
  • Enter a name for the product you want the user to be able to add to the cart using your Add To Cart button
  • Enter an Item ID for the product (optional)
  • Enter a price and currency for the product
  • If you would like to give your customers a selection of options when buying a product, such as a range of sizes or colors, add one or more drop-down menus displaying the available options in the Customize Button panel. 
  • Click Customize Text or Appearance in the Customize Button panel to create a smaller version of the standard PayPal Add To Cart button or to use your own button image.
  • Click Done to view a preview of your customized button and any drop-down menus you added in the Your Customer's View panel.
  • Add shipping and tax costs
  • Choose whether to receive alerts via your merchant ID (if you have one) or your email address.
5

Do one of the following:

  • If you would like to track inventory, profit and loss for your Add To Cart button, click Step 2: Track Inventory, Profit and Loss (Optional) at the bottom of the Step 1 panel. Note: You have to upgrade to a PayPal Business Account to configure this optional step.
  • If you would like to customize advanced features for your Add To Cart button, click Step 3: Customize Advanced Features (Optional) at the bottom of the Step 1 panel. Note: You have to upgrade to a PayPal Business Account to configure this optional step.
  • If you're happy with your Add To Cart button without upgrading to use the optional extras, click the Create Button button at the bottom of the Step 1 panel. 
6

PayPal displays the HTML code for your button.

Click the Select Code button to select and copy the code.

 

7

Click Insert in the Create New Widget window.

Designer Pro 6 or Web Designer 6 displays a placeholder for the Add To Cart button. 

Click and drag the placeholder to the location on the web page where you want the button to appear.

You cannot change the button's height without truncating it (if you reduce it) or creating white space at the top or bottom (if you enlarge it).

To resize the button, create your button again and in the Customize Button panel of step 1, click Customize Text or Appearance. You can choose to use a smaller version of the standard Add To Cart button or use your own button design instead. Reimport the button into Designer Pro 6 or Web Designer 6 by repeating steps 4-6.

Click Preview to view your button.

When a customer clicks your Add To Cart button, PayPal automatically adds the related product and quantity to their shopping cart. 

If you also add a PayPal View Cart button to your website, PayPal displays all item costs and associated shipping and tax costs within a customer's shopping cart when the View Cart button is clicked.

When the customer clicks Proceed to Checkout in their shopping cart, PayPal automatically records billing information such as customer contact details and processes payment via the customer's chosen method.

PayPal Buy Now

Using a PayPal Buy Now button, your customers can buy an individual item from your website.

1

Drag the PayPal Buy Now widget from the Ecommerce Widgets section of the Designs Gallery on to your Designer Pro 6 or Web Designer 6 web page.

PayPal opens in the Create New Widget: PayPal Buy Now Button window.

 

2

Click Create Your Button Now next to the image of a PayPal Buy Now button.

The Create PayPal Payment Button page opens in the Create New Widget window.

 

3

We recommend that at this stage you log in to your PayPal account or create a new account if you're not already registered.

Click one of the Log In links below the boxes in the Step 1 panel to open the PayPal Log Into Your PayPal Account or Sign Up page.

Once you're logged in or signed up, you are returned to Step 1 of the Create PayPal Payment Button page.

 

4

In the Step 1 panel, do the following:

  • Choose Buy Now from the button type drop-down list (this should be selected by default) 
  • Enter a name for the product you want the user to be able to add to the cart using your Buy Now button
  • Enter an Item ID for the product (optional)
  • Enter a price and currency for the product
  • If you would like to give your customers a selection of options when buying a product, such as a range of sizes or colors, add one or more drop-down menus displaying the available options in the Customize Button panel. 
  • Click Customize Text or Appearance in the Customize Button panel to create a smaller version of the standard PayPal Buy Now button or to use your own button image.
  • Click Done to view a preview of your customized button and any drop-down menus you added in the Your Customer's View panel.
  • Add shipping and tax costs
  • Choose whether to receive alerts via your merchant ID (if you have one) or your email address.

 

5

Do one of the following:

  • If you would like to track inventory, profit and loss for your Buy Now button, click Step 2: Track Inventory, Profit and Loss (Optional) at the bottom of the Step 1 panel. Note: You have to upgrade to a PayPal Business Account to configure this optional step.
  • If you would like to customize advanced features for your Buy Now button, click Step 3: Customize Advanced Features (Optional) at the bottom of the Step 1 panel. Note: You have to upgrade to a PayPal Business Account to configure this optional step.
  • If you're happy with your Buy Now button without upgrading to use the optional extras, click the Create Button button at the bottom of the Step 1 panel. 

 

6

PayPal displays the HTML code for your button.

Click the Select Code button to select and copy the code.

 

7

Click Insert in the Create New Widget window.

Designer Pro 6 or Web Designer 6 displays a placeholder for the Buy Now button. 

Click and drag the placeholder to the location on the web page where you want the button to appear.

You cannot change the button's height without truncating it (if you reduce it) or creating white space at the top or bottom (if you enlarge it).

To resize the button, create your button again and in the Customize Button panel of step 1, click Customize Text or Appearance. You can choose to use a smaller version of the standard Buy Now button or use your own button design instead. Reimport the button into Designer Pro 6 or Web Designer 6 by repeating steps 4-6.

Click Preview to view your button.

When a customer clicks your Buy Now button, PayPal automatically adds associated shipping and tax costs to the product price. PayPal then records billing information such as customer contact details and processes payment via the customer's chosen method.

 

PayPal View Cart

A PayPal View Cart button allows your customers to see exactly what they've put in their shopping cart for multiple purchases, including associated costs such as shipping and tax.

Ensure that the website you are adding the View Cart button to already has at least one PayPal Add To Cart button.

1

Drag the PayPal View Cart widget from the Ecommerce Widgets section of the Designs Gallery on to your Designer Pro 6 or Web Designer 6 web page.

The PayPal View Cart page opens in the Create New Widget: PayPal View Cart Button window.

 

2

Type in your email address, ensuring it's the same email address you used when adding your Add to Cart buttons to your website previously.

 

3

Click Insert in the Create New Widget window. 

Designer Pro 6 or Web Designer 6 displays a placeholder for the View Cart button. 

Click and drag the placeholder to the location on the web page where you want the button to appear.

You cannot change the button's height without truncating it (if you reduce it) or creating white space at the top or bottom (if you enlarge it).

Click Preview to view your button.

When a customer clicks your Add To Cart button(s), PayPal automatically adds the related product(s) and quantity to their shopping cart. All item costs, and associated shipping and tax costs within a customer's shopping cart, are displayed when the View Cart button is clicked.

When the customer clicks Proceed to Checkout in their shopping cart, PayPal automatically records billing information such as customer contact details and processes payment via the customer's chosen method.

 

eBay To Go

eBay To Go widgets give your customers live auction information and allow them to access eBay to view and bid for items on sale.

The example shown here is a Search widget displaying all current items for sale associated with the search term 'T-shirt'.

1

Drag the eBay To Go widget from the Ecommerce Widgets section of the Designs Gallery on to your Designer Pro 6 or Web Designer 6 web page.

eBay opens in the Create New Widget: eBay To Go window.

 

2

In the Welcome to eBay To Go window, click the OK Let's Go! button.

3

In the Step 1: Select Your Version panel of the eBay To Go page, do one of the following to create a widget that displays items for sale on eBay:

  • Click Single Item to display a selected individual item
  • Click Multiple Items to display selected multiple items
  • Click Search to displays items relevant to your particular search term
  • Click Seller to displays items from a selected seller
  • Click Store to display items a selected eBay store

All widgets display information in real time, so eBay will ask you to also supply substitute items to display as your initially chosen items are sold, depending on the widget you are building.

4

When you click on a widget type, a sample preview is shown to the right of the window.

If you want to create a selected widget, click the I Want This One button.

5

For Single and Multiple Item widgets: go to step 6 in this procedure.

For Seller and Store widgets: go to step 7 in this procedure.

For Search widgets, do the following:

In the Step 2: Enter a Search panel, type in a search term for the items you want to display in your widget and click Next.

In the Step 3: Set It Free panel, click in the Code box to select the code.

Copy the code by clicking the Copy button or pressing Ctrl + C on your keyboard.

Click Insert in the Create New Widget window. 

Go to step 9 in this procedure.

6

For single and multiple item widgets, in the Step 2: Select Items panel, type the item ID in the box if you know it and click Add, or click Browse to search for the item.

In the eBay To Go search bar, enter a search term relevant to your item(s).

eBay displays all possible matches. 

Scroll down the list to locate the item(s) you want. Click an item to display an item preview with viewing, bidding and seller information.

Click the Select This Item button to select it for your widget.

For the Multiple Item widget, continue to click Add or Browse until you have selected all the items you want to appear in your widget.

The preview pane displays your widget as you build it.

When you’re finished selecting items, click Next.

In the Step 3: Make It Last panel, enter a search term that eBay can use to populate your widget once your initially selected items expire or are sold.

Click the Next button.

Go to step 8 in this procedure.

 

7

For Seller and Store widgets, in the Step 2: Enter a Seller/Store panel, type in the seller/store ID if you know it, or type in a search term such as the seller/store name.

Click Search.

eBay suggests a list of possible matches.

Click on a seller/store in the list. The preview pane displays the items the seller/store currently has for sale.

When you have clicked on the store/seller you want, click the Next button.

In the Step 3: Select Items panel (seller only), you can choose to display all items the seller has for sale, or only 10 selected items.

If you choose to display selected items, type in an item ID if you know it, or enter a search term and click Browse to locate it. Repeat for all other selected items you want in your widget, up to a maximum of 10.

In the Step 3: Enter a Search panel (store only), type in a search term to display only the store’s items that meet your search terms in your widget.

Click the Next button.

Go to step 8 in this procedure.

8

In the Step 4: Set It Free panel, click in the Code box to select the code.

Copy the code by clicking the Copy button or pressing Ctrl + C on your keyboard.

Click Insert in the Create New Widget window. 

 

9

Designer Pro 6 or Web Designer 6 displays a placeholder for your eBay widget. 

Click and drag the placeholder to the location on the web page where you want it to appear.

However, you cannot resize the placeholder by dragging on its selection handles, because making it smaller than its actual size will truncate it, and enlarging it will create excess surrounding white space.

To resize your eBay widget, choose Web Properties from the Utilities menu and click the Placeholder tab.

In the Replace with HTML box, edit the width and height parameters wherever they appear in the HTML code and click Apply. The placeholder is resized accordingly.

Click Preview to view your eBay widget in action.

When visitors to your website click on a displayed item in your widget, they can view eBay sales information such as time remaining, number of bids, highest bid and seller details. If they click on the View & Bid button in the widget, eBay opens in a separate browser window, giving your visitors the opportunity to purchase the item, as shown in this example.