Web Designer+

Photo & Graphic Designer+

Page & Layout Designer 11

Designer Pro+

3D Maker 7

Widget Guide : 365

E-commerce

In Xara Web Designer and Designer Pro 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 Wazala.

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!

Wazala is one of an exciting new breed of shopping cart widgets. Using these widgets, you can easily build an online store quickly and easily, with no programming knowledge required

Find the e-Commerce widgets in the Content Catalog under Components > Print & Web Components > eCommerce. 

WazalaPayPal Add to CartPayPal Buy NowPayPal View Cart

Wazala

Wazala enables you to easily and rapidly build an online store for your website. You can sell physical and digital goods from the same store, so that downloadable products such as designs, music or pictures are available straight away.

Your customers can also access your Wazala online store from their mobile phones, as every Wazala subscription includes a mobile web browser optimized store, complete with touch and gesture-based product browsing and shopping.

You can add your Wazala store to your Facebook fan or business pages, or your blog, and Wazala also offers a wide range of payment options, including PayPal, Google Checkout, Authorize and credit cards.

For more information on these and other features, visit www.wazala.com/features or go to www.wazala.com to create an account. There's also a 'how to' movie and guide here.

Wazala offers two types of online store: embedded or overlaid on the web page. The 'overlay' type gives you a red store button that when clicked, opens your store in a pop-up window while the rest of the web page is dimmed.

We recommend that you use the embed method for Web Designer MX Premium/Designer Pro - see below for an example of an embedded store - but you will need to subscribe to a paid account first to create this type of store. Without a paid account, only the overlay method is available. You can create a free account at www.wazala.com/samples - just click on the 'Sign up now' button at the bottom.

Adding a Wazala Online Store to your Web Designer MX Premium/Designer Pro takes minutes - just follow these simple steps.
http://www.wazala.com/start/help/wazala-store-on-xara/
1

If you don't already have a Wazala account, go to www.wazala.com to create a new account.
2

Import the Wazala! widget from the Content Catalog. 

Wazala opens in the Create New Widget: Wazala window.
3
Click Signin and type your email and Wazala password to sign in to your account.
4
Your dashboard is displayed, showing a summary of account information such as orders, sales total and number of store views. You can also add and edit store details here such as products, customers and available shipping and delivery options. For help on these and other configuration options, see the Wazala support pages at: http://support.wazala.com/home

To configure how your store will be displayed, click Get Widget in the dashboard.
5
In the Type box, choose Embed to embed your store within a web page (premium accounts only) or Overlay to display your store in a pop-up window on top of your web page.

We recommend that Web Designer MX Premium/Designer Pro users choose the Embed option.
6
If you chose Embed, Language is the only other widget option now displayed. Choose your store's default language from this drop-down list. Go to step 9.
7
If you chose Overlay, there are a few more options to choose to configure your store's display.

In the Location list, choose where you would like the Wazala red button to appear at the top of the customer's screen.

If you choose Hidden, you need to create your own button to open the store. You can find out how to do this at: http://support.wazala.com/home.

In the Label list, choose the text you want to be displayed on your store button. You can either choose Store, Shop or Cart, or choose Custom to type in your own text - Buy Now is a popular alternative.

Click the Fixed Page Width check box and type in your web page width if you want the store width to be the same. We recommend that you enable this option.

Choose Floating or Minimized from the Wazala Touch Button list to configure how mobile phone users will see your store button. Go to wazala.com on your mobile phone to experience Wazala Touch.
8
Scroll down the Create New Widget: Wazala! window to view a preview of your store button in the Preview pane. You can also preview your store by typing your website URL into the Preview on Your Website pane and clicking Click to Preview.
9
Scroll down further to see the widget code displayed in the Script Code box.


Click Insert at the bottom of the Create New Widget: Wazala! window.
10

The program displays one of the following placeholders:

  • A placeholder for the store (if you chose Embed), which you can click and drag to reposition on your web page. You cannot, however, resize the store placeholder as this will result in truncating it (if you reduce it) or creating white space at the top or bottom (if you enlarge it).
  • A 1x1 pixel placeholder for the store button (if you chose Overlay). This placeholder does not need to be positioned anywhere in particular but must at least be within the page area and not on the pasteboard, otherwise the widget will not display. You cannot change the size of the button by dragging on the placeholder. To resize an overlay store, repeat steps 2-7 and enter a value in the Fixed Page Width box. Note: We recommend that you set this value to the same size as your page width.

Click Preview to view your button or store.

The preview will look similar to one of the examples below, the store button and store, accessed by clicking the store button (created with the Overlay method, top) or the store (created with the Embed method, bottom).

 

PayPal Add to Cart

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

 

1

Import the PayPal Add To Cart widget from the Content Catalog. 

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.

The program 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 by double clicking the placeholder 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. Re-import the button into the program 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

Import the PayPal Buy Now widget from the Content Catalog.

 

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.

The program 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, double click the placeholder to be directed back to PayPal 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 the program 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

Import the PayPal View Cart widget from the Content Catalog. 

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. 

The program 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). To resize the button, double click the placeholder and repeat steps 2 and 3.

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.

 

About Xara | Press | News | Logos & Graphics | Resellers | Jobs at Xara | Contact Xara | Imprint | Privacy & Cookie Statement | EULA

Copyright © 2024 XARA GmbH. Xara® is a registered Trademark of Xara GmbH..