Web Designer+

Photo & Graphic Designer+

Page & Layout Designer 11

Designer Pro+

3D Maker 7

Widget Guide : Version 8

E-commerce

(Pro & Premium Only)

In Xara Designer Pro X and Web Designer MX Premium you can use our set of e-commerce widgets to add your own online store to your website. We're going to show you how to do this using PayPal, 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.

Find the e-commerce widgets in the Page Elements section of the Designs Gallery.  

EcwidWazalaPayPal Add to CartPayPal Buy NowPayPal View Cart

Ecwid

(DesignerPro/Web Designer MX 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 MX 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 Page Elements folder in 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 MX 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 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

Drag the Wazala! widget from the E-commerce Widgets section of the Page Elements folder in 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 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

Drag the PayPal Add To Cart widget from the E-commerce Widgets section of the Page Elements folder in 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. 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

Drag the PayPal Buy Now widget from the E-commerce Widgets section in the Page Elements folder in 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 Page Elements folder in 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.

 

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