Web Designer+

Photo & Graphic Designer+

Page & Layout Designer 11

Designer Pro+

3D Maker 7

Widget Guide : Version 7

E-commerce

(Pro & Premium Only)

In Xara Designer Pro 7 and Web Designer 7 Premium 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, Google Store Gadget, Ecwid, eBay To Go, Ecwid 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!

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

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.

EcwidWazalaPayPal Add to CartPayPal Buy NowPayPal View CarteBay To Go

Ecwid

(DesignerPro/Web Designer Premium only) Ecwid provides all you need for a one-stop online shop, including a built-in 'drag and drop' shopping cart, the recording of customer registration details, destination zone and shipping configuration, automatic tax adjustments for purchases from defined zones, and payment processing.

Before dragging the Ecwid Product Browser on to your web document page, first you have to register and create an account at Ecwid (http://www.ecwid.com/getting-started.html).

After registration, Ecwid sends you a verification email informing you of your unique store ID. You need this to log in and generate your store code. When you first log in, Ecwid displays your store’s dashboard (used to manage your store), already populated with a dummy shop, customers and products.

We recommend that you do not copy any of the code in the Dashboard yet. Instead if you configure some system settings and add products, product categories and customers first, you can generate new widget code to insert directly into Designer Pro/Web Designer Premium. This new code will allow you to resize your Ecwid widget once it’s on your web page.

We recommend you configure the following system settings first, as some values that you specify during configuration will be required when adding products and categories.

  • General - Store and mobile store profile, currency and units, language and shopping cart options.  
  • Destination zones and shipping costs
  • Taxes on purchases depending on destination zone
  • Payment methods and processing
  • Store design
  • Automatic email notifications
Once these settings are defined, you can then add:
  • Product categories
  • Products and product options such as price, size, color and quantity.
You can refer to the Using Ecwid to Build an Online Store PDF for more information. The procedure below assumes that you have already configured the above settings when dragging the Ecwid Product Browser widget onto your Web Designer Premium page.
1

Drag the Ecwid Product Browser widget from the Ecommerce Widgets section of the Designs Gallery on to your web document page.

Ecwid Ecommerce Widgets opens in the Create New Widget: Ecwid Product Browser Widget Code window.
2

Now that you have set up and customized your store and have a store name and ID, you can skip the instructions at the top of the window. Scroll to the bottom of the Create New Widget: Ecwid Product Browser Widget Code window to the Product Browser Widget Code section, which explains why we recommend that you use our method of generating widget code, rather than using that initially supplied by Ecwid.

In the Required Fields section of the window, enter your Store ID and Store Name.

Click Generate code. An alert message is displayed telling you that you can either click the Insert button (in the Create New Widget window) to generate your store code, or you can scroll down further to customize your store some more.

If you don't want to further customize your store, click Insert. If you do, go to Step 3.
3
Type in values for the following to customize your store display:
  • Product categories per row
  • Number of rows per page in grid view
  • Number of columns per page in grid view
  • Number of items per page in list view
  • Number of items per page in table view
Click Generate Code then Insert in the Create New Widget window.
4
Designer Pro/Web Designer Premium displays a placeholder for your Ecwid store widget. 

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

To resize the store, click on the placeholder then drag on the selection handles using the Select tool. The program resizes the store accordingly.

You may need to test using your online store to ensure it’s the right size to display your shopping bag and billing information in full when these are used/selected during the purchasing process.

Click Preview to view your store.

Note: The store name will only be displayed if you are viewing the web page in a browser that has JavaScript disabled.

You can double click the placeholder to return to the Create New Widget window and customize store display. Log in to Ecwid by clicking the Ecwid 'register' link under the Create a Shopping Cart at Ecwid heading.

Ecwid opens in a separate browser window. Click Access Ecwid to log in to your store's Dashboard. From here you can add additional features to your website, including code for a shopping bag, product categories tabs or a product categories menu, and a search box. Copy the code provided and return to the Create New Widget window. Click Insert and the program displays a placeholder for the new feature.

Using the Dashboard you can also configure your store front URL, add customers, add more products and product categories, configure promotions (silver membership only) and edit any system settings from your Ecwid store's Dashboard.

See the Using Ecwid to Build an Online Store PDF for more information.

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 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 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

Drag the Wazala widget from the Widgets, Forms and More - Ecommerce Widgets section of the Designs Gallery on to your web document page.

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 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

Drag the PayPal Add To Cart widget from the Ecommerce Widgets section of the Designs Gallery on to your web document 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.

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. Reimport 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

Drag the PayPal Buy Now widget from the Ecommerce Widgets section of the Designs Gallery on to your web document 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.

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

Drag the PayPal View Cart widget from the Ecommerce Widgets section of the Designs Gallery on to your web document 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. 

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.

 

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 web document 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

The program 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.

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..