Wix Learning Center

With the Wix Online Store you can turn your Wix website into an online shop in minutes. It's simple, the results are beautiful and we don't take a cent of your sales!

Please note: This is a Premium eCommerce package feature. You can try it out for free in the Wix Editor but to start selling you'll need to upgrade to the Wix eCommerce package. For upgrading instructions, click here.

Please note that if you created an eCommerce store before May 23rd 2011 and you want to add the new options to your products (see the below section, Adding Product Options, for details), you will have to delete your store and add a new product gallery.

To add the Wix Online Store:

1. From the toolbar to the left of your Editor, go to Add, then go to eCommerce. Click Online Store.
2. From the Online Store Gallery that opens, click on a Store design.

Your Online Store appears on your site.

You can add individual pieces of the Wix online store to your site. To do so, from the Online Store gallery, click on one of the tabs on the left to add a gallery, shopping cart, Checkout button or Add to Cart button.

When a user clicks on a product in your shopping cart, a product page will open. On your product page, you can provide your users with detailed product descriptions as well as add up to ten pictures or videos!

Adding a Product

To add a product:

1. Click on your product gallery to select it.
2. From the Product Gallery property panel to the right of the Editor, click Manage.

3. From the Manage Products window, click Add Product.
4. To the right of the products list, under the fields, edit Title, Overview, Details, Price, Retail Price and Ribbon.

Overview and Details appear as tabs on the product page that opens when a user clicks on a product.

The Overview and Details tabs as well as the Retail Price and Ribbon will only be displayed if you add content to them. To hide one of these fields, simply delete the content!

A new product is added to your shop.

Currently, some special characters cannot be used in some sections of your Online Store. For example, in the Title field of a product, the characters #, &, / and ? will not work.

Adding Product Pictures

Current product galleries are best suited to display portrait images with 4:3 proportion. We recommend maintaining this proportion as it is used by most Smart Phones and digital cameras. For more image quality tips, click here.

To add a product picture:

1. Click on your eCommerce gallery to select it.
2. From the Product Gallery property panel to the right of the Editor, click Manage.

3. On the left of the Manage Products window, click on a product to select it.
4. On the right of the Manage Products window, under Photos and Videos, click Add Photo.

5. From the Pics Gallery, click on a picture.

You can add more than one picture to a product at once by clicking on multiple pictures in the Pics Gallery.

Click Upload to add a new picture to your Pics Gallery.

6. Click X and then click OK.

A new picture is added to your product.

To delete a picture, click on the picture under Photos and Videos to select it and then click on the trash can icon at the bottom of the Photos and Videos field.

You cannot replace a picture. To replace a picture you will have to delete the old picture and then add a new picture.

To change the order of your pictures or videos, click on the left and right arrows at the bottom of the Photos and Videos field.

Adding Product Videos

To add a product video:

1. Click on your eCommerce gallery to select it.
2. From the Product Gallery property panel to the right of the Editor, click Manage.

3. On the left of the Manage Products window, click on a product to select it.
4. On the right of the Manage Products window, under Photos and Videos, click Add Video.

5. From the Replace Video window, type the name of your YouTube video in the search field and press enter on your keyboard.

To add a product video, you must first upload your video to the third party video stream, YouTube.com.

6. Click on a video to select it.
You can add more than one video to a product at once by clicking on multiple videos in the Replace Video window.
7. Click X and then click OK.

A new video is added to your product.

To delete a video, click on the video under Photos and Videos to select it and then click on the trash can icon at the bottom of the Photos and Videos field.

You cannot replace a video. To replace a video you will have to delete the old video and then add a new video.
To change the order of your pictures or videos, click on the left and right arrows at the bottom of the Photos and Videos field.

Adding Product Options

When selling items that include different options (various sizes or colors, for example) you can set up customization options for your item that will appear on the item's Product Page. Your customers will then be able to choose from the various options when purchasing the item from your online store. When a customer clicks on an item in your product gallery, a product page that includes all of your item details opens. The product page also includes any customization options that you have made available for that particular item. Your customer can choose from the different options and then add the customized item to the shopping cart.

You can add any two of the following four product options:

    Size Buttons: Small buttons that can display up to four characters each. These are perfect for displaying available product sizes!
    Color Buttons: Buttons that display any colors of your choosing.
    Drop-Down Menu: A drop-down menu of options for your customers to choose from.
    Message Box: A text box that allows customers to write a short message to you when making a purchase.

Adding Size Buttons

If your store has items that have several size options available, you can add size buttons to your product pages that allow your customers to choose from the different sizes. You can also set a price variation for each of the size selections.

To add size buttons:

1. Click on your eCommerce gallery to select it.
2. From the Product Gallery property panel to the right of the Editor, click Manage.
3. On the left of the Manage Products window, click on a product to select it.
4. On the right of the Manage Products window, under Product Options, click Add Option.

5. From the Product Options window, under Size Buttons, click Continue.

6. Under Title, type short instructions for your customers (for example: Choose a size).

The Title will be displayed on the product page next to your size buttons. It will also be displayed next to your customer's choice in the shopping cart and during the checkout process.

7. Click Add Selection.
8. Under Button, type a name for your button.

Each button can display up to four characters.

9. Under Tooltip, type a description for your button.

The Tooltip appears when a user rolls over a button. For example, if you name your button S and name your tooltip Small, when a user rolls over the S, a tooltip will appear with the word Small, indicating to the user that the S stands for Small. The Tooltip of the button that your customer chooses will also be displayed in the shopping cart and during the checkout process.

Important! The Tooltip appears in your merchant account and lets you know which option your customer chose. Therefore it is highly recommended that you add a Tooltip!

10. Under Surcharge, type the difference in price for this product option.

Your surcharge value indicates whether or not the price of the product will change when a customer selects a particular option. For example, if you are selling shirts for $12.99 and you would like to charge an additional 50 cents for a large size, you will set the surcharge value at $0.50 for the Large option. Similarly, you can set a discount for a particular option by setting the surcharge value to $ - 0.50. The change in price will appear when your customer adds the customized product to the shopping cart.

Tip: If you set a Surcharge, you may want to indicate this in the Tooltip (e.g., Large (+$0.50))

11. To add another option, click Add Selection.
12. Repeat Steps 6-9 until you have added all of your options. Click OK.

You can add up to ten selections per product option.
To delete an option from the list, click on the trashcan icon to the right of the listed option.

Your item has size options.

You can add up to two product options to each item.

Adding Color Buttons

If your store has items that have several color options available, you can add color buttons to your product pages that allow your customers to choose from the different colors. You can also set a price variation for each of the color selections.

To add color buttons:

1. Click on your eCommerce gallery to select it.
2. From the Product Gallery property panel to the right of the Editor, click Manage.
3. On the left of the Manage Products window, click on a product to select it.
4. On the right of the Manage Products window, under Product Options , click Add Option.

5. From the Product Options window, under Color Buttons, click Continue.

6. Under Title, type short instructions for your customers (for example: Choose a color).

The Title will be displayed on the product page next to your color buttons. It will also be displayed next to your customer's choice in the shopping cart and during the checkout process.

7. Click Add Selection.
8. Under your title, click on the color button. From the Fill Picker, click a color. Click OK.

9. Under Tooltip, type a description for your button.

The Tooltip appears when a user rolls over a button. For example, if your color button is blue and your tooltip description is Midnight Blue, when a user rolls over the color button, a tooltip will appear with the words Midnight Blue, indicating to the user that the color button stands for Midnight Blue. The Tooltip of the button that your customer chooses will also be displayed in the shopping cart and during the checkout process.

Important! The Tooltip appears in your merchant account and lets you know which option your customer chose. Therefore it is highly recommended that you add a Tooltip!

10. Under Surcharge, type the difference in price for this product option.

Your surcharge value indicates whether or not the price of the product will change when a customer selects a particular option. For example, if you are selling shirts for $12.99 and you would like to charge an additional 50 cents for a blue shirt, you will set the surcharge value at $0.50 for the Blue option. Similarly, you can set a discount for a particular option by setting the surcharge value to $ - 0.50. The change in price will appear when your customer adds the customized product to the shopping cart.

Tip: If you set a Surcharge, you may want to indicate this in the Tooltip (e.g., Blue (+$0.50))

11. To add another option, click Add Selection.
12. Repeat Steps 6-9 until you have added all of your options. Click OK.

You can add up to ten selections per product option.
To delete an option from the list, click on the trashcan icon to the right of the listed option.

Your item has color options.

You can add up to two product options to each item.

Adding a Drop-Down Menu

You can add a drop-down menu of available options to your product page. Your drop-down menu can contain up to ten selections for your customer to choose from. You can also set a price variation for each of the selections.

To add a drop-down menu:

1. Click on your eCommerce gallery to select it.
2. From the Product Gallery property panel to the right of the Editor, click Manage.
3. On the left of the Manage Products window, click on a product to select it.
4. On the right of the Manage Products window, under Product Options , click Add Option.

5. From the Product Options window, under Drop Down Menu, click Continue.

6. Under Title, type short instructions for your customers (for example: Choose an option).

The Title will be displayed on the product page next to your drop-down menu. It will also be displayed next to your customer's choice in the shopping cart and during the checkout process.

7. Click Add Selection.
8. Under Drop Down Selection, type a name for your drop-down menu item.

You can add up to ten choices to your drop-down menu. Your customer will be able to choose one.

9. Under Surcharge, type the difference in price for this product option.

Your surcharge value indicates whether or not the price of the product will change when a customer selects a particular option. For example, if you are selling shirts for $12.99 and you would like to charge an additional 50 cents for a large size, you will set the surcharge value at $0.50 for the Large option. Similarly, you can set a discount for a particular option by setting the surcharge value to $ - 0.50. The change in price will appear when your customer adds the customized product to the shopping cart.

Tip: If you set a Surcharge, you may want to indicate this in the Drop Down Selection (e.g., Large (+$0.50))

10. To add another option, click Add Selection.
11. Repeat Steps 6-8 until you have added all of the menu items. Click OK.

To delete an option from the list, click on the trashcan icon to the right of the listed option.

Your item has a drop-down menu.

You can add up to two product options to each item.

Adding a Message Box

You can add a message box to your product page if you would like your customers to add a short message to their order regarding a specific item.

To add a message box:

1. Click on your eCommerce gallery to select it.
2. From the Product Gallery property panel to the right of the Editor, click Manage.
3. From the Manage Products window, under Product Options , click Add Option.

4. From the Product Options window, under Message Box, click Continue.

5. Under Title, type short instructions for your message box.

Your customers can add a message of up to 200 characters.

6. Next to Mandatory, click the box to make writing in the message box a requirement.
7. Click OK.

Your item has a message box.

You can add up to two product options to each item.

Hiding a Product

To hide a product:

1. Click on your eCommerce gallery to select it.
2. From the Product Gallery property panel to the right of the Editor, click Manage.

3. On the left of the Manage Products window, click on a product to select it.
4. Above your list of products, click on the eye icon to hide the product from your Product Gallery.

Your product is hidden.

To show your product, repeat the steps above.

Duplicating a Product

To duplicate a product:

1. Click on your eCommerce gallery to select it.
2. From the Product Gallery property panel to the right of the Editor, click Manage.

3. On the left of the Manage Products window, click on a product to select it.
4. Above your list of products, click on the duplicate icon to duplicate the product in your Product Gallery.

Your product is duplicated.

Deleting a Product

To delete a product:

1. Click on your eCommerce gallery to select it.
2. From the Product Gallery property panel to the right of the Editor, click Manage.

3. On the left of the Manage Products window, click on a product to select it.
4. Above your list of products, click on the trash can icon to delete the product from your Product Gallery.

Your product is deleted.

Reordering Your Products

To reorder your products:

1. Click on your eCommerce gallery to select it.
2. From the Product Gallery property panel to the right of the Editor, click Manage.

3. On the left of the Manage Products window, click on a product to select it.
4. Above your list of products, click on the up or down arrows to move your product.

Your product is reordered.

Customizing Product Gallery Colors

You can change almost all of the colors on your product gallery and product pages.

For a color guide, see the image and table located below.

To customize product gallery colors:

1. Click on the product gallery to select it.
2. From the Product Gallery property panel to the right of the Editor, click Color.
3. From the Fill Picker, click an element and then click a color.

For a color guide, see the image and table located below.

4. Click OK.

Your product gallery colors change.

Some of the color squares next to your layer list on the left may appear as a white box with a red slash within it. Please be assured that your color choice has been stored and will color correctly! Every time that you return to the color picker these color squares will appear white with a red slash inside. If you click on the color square, your color choice will change to black. In the near future, this will be changed and the color squares will display the correct color.

Color Guide

 

#	Layer	Description
1		the color of the background of your product and product page.
2		the color of the Add to Cart button.
3		the color of the Add to Cart text.
4		the border of the product image.
5		the border around the headings for Overview and Details.
6		the color of the Overview and Details text and headers.
7		the color of the price.
8		the border of the product box and product page.
9		the background behind your product page.
10		the color of the retail price.
11		the color of the ribbon background.
12		the color of the ribbon text.
13		the color of the product box when a user rolls over it.
14		the color of the strikethrough line on the retail price.
15		the color of the product title.

 

The new View Cart button provides your users with a sleeker and much more professional buying experience. By using the View Cart button on your shop pages, whenever a product is added to the shopping cart, the View Cart button immediately displays to your customers the number of items and/or the total cost of the items in their shopping cart.

In addition, you can – and should! – link the View Cart button directly to the page of your site that contains your shopping cart. This way, when your customers click on the View Cart button, they are taken directly to the shopping cart to begin the Checkout process.

Adding a View Cart Button

You can add a view cart button to every page of your online store to make your customers aware of how many items they currently have in their shopping cart.

To add a View Cart button:

1. From the toolbar to the left of your editor, roll over Add, then go to eCommerce. Click Online Store.
2. From the Online Store gallery, from the tabs on the left, click View Cart.

3. From the View Cart gallery, click a button.

The View Cart button appears on your site.

Linking Your View Cart Button to Your Shopping Cart Page

You can link the View Cart button directly to the page of your site that contains your shopping cart. This way, when your customers click on the View Cart button, they are taken directly to the shopping cart to begin the Checkout process.

To connect your View Cart button to your shopping cart:

1. Click on the View Cart button to select it.
2. From the View Cart property panel to the right of the editor, click Link.

3. From the Link to page window, click on the page that contains your shopping cart.

Your View Cart button is now connected to your shopping cart page.

Changing the View Cart Icon

In some of the View Cart skins, you can change the shopping cart icon of your View Cart button.

To change your View Cart icon:

1. Click on the View Cart button to select it.
2. From the View Cart property panel to the right of the editor, click Settings.

3. Under Adjust icon properties, click Replace icon.
4. From the Replace icon window, click an icon.

Your icon changes.

Editing the View Cart Text

You can edit the textual element of your View Cart button by following the below steps.

To edit your View Cart text:

1. Click on the View Cart button to select it.
2. From the View Cart property panel to the right of the editor, click Checkout Settings.
3. From the bottom of the Checkout Settings window, click Edit Texts.
4. In the Text Fields window, under View Cart, edit the text in the View Cart Text field.

Your text is updated.

Connecting your Online Store to your PayPal account is easy! Once you have connected your Store to PayPal, payments will be made directly into your PayPal account.

You need a Premier or Business PayPal account. Don't have a PayPal account? Get one here!

To connect your Online Store to PayPal:

1. Click outside of the Online Store to unselect its various parts.
2. Click on the Checkout button to select it.
3. On the right, from the Checkout button property panel, click Checkout Settings.
4. From the Checkout Settings window, in the PayPal Account field, type the email address that you sign into your PayPal Account with.

5. From the Currency field, click on the drop-down menu to choose your currency.
6. Click OK.

Your Online Store is now connected to your PayPal account.

Connecting your Online Store to your Google Checkout account is easy! Once you have connected your Store to Google Checkout, payments will be made directly into your Google Checkout account.

You'll first need to sign up for a Google Checkout account. Don't have one? Get one here!

Your customers can purchase your products with Google Checkout using the following credit, debit or gift cards: American Express (US only), Discover (US only), MasterCard, Visa or Visa Electron (outside US only). The types of cards accepted are based on the seller's location.

For more information about Google Checkout, click here.

To connect your Online Store to Google Checkout:

1. Click outside of the Online Store to unselect its various parts.
2. Click on the Checkout button to select it.
3. On the right, from the Checkout Button property panel, click Checkout Settings.
4. From the Checkout Settings window, next to Choose service provider, select Google Checkout from the drop-down menu.

5. Next to Merchant ID, type your Merchant ID.
6. Next to Currency, select a currency from the drop-down menu.

Currently, only US Dollars and Pounds Sterling are available currencies with Google Checkout.

7. Click OK.

Your Online Store is now connected to your Google Checkout account.

You will have to enable your Google Checkout Merchant account to work with Wix. To do so, click here to sign into your Google Checkout account and uncheck My company will only post digitally signed carts.

You can edit the fields of your product gallery and shopping cart.

To edit the text fields of your shopping cart:

1. Click on your shopping cart’s Checkout Button.
2. From the property panel on the right, click Checkout Settings.

3. From Checkout Settings, click Edit Texts.

4. Fill in the fields in the window that opens. Click OK.
5. From Checkout Settings, click OK.

The text fields of your cart change.

If the text fields don’t change on your shopping cart, try refreshing your shopping cart’s skin. To refresh a skin, select the shopping cart or product gallery and click Skins. Choose any skin.

Three elements make up the Online Store: the Product Gallery, the Shopping Cart and the Checkout button. You can customize each element separately and create a look and feel for your Shop that caters to your specific needs.

Customizing Your Product Gallery

The property panel at the bottom of the Editor gives you many other options for customizing your Product Gallery! Below you will find a list of these options. Feel free to experiment with these Product Gallery options to find the look that suits you!

Checkout Settings – connect your Online Store to a merchant account and Edit Texts.
Manage – Add or Delete products and update the Title, Overview, Details, Price and Ribbon of each product. Also add multiple photos and videos for your product.
Skins – change the design of the Skin of your Product Gallery.
Product Page – set the look of the product page that opens when a customer clicks on an item in your store.
Add Menu – add a navigation bar so that customers can scroll through your products.
Color – change the colors of your Product Gallery’s Background, Buttons, Labels and Title.
Settings – set the Item Size, Margins, RollOver Settings and Image Mode.
Effects – add various Effects to your Product Gallery.

Customizing Your Shopping Cart

The property panel at the bottom of the Editor gives you many other options for customizing your Shopping Cart! Below you will find a list of these options. Feel free to experiment with these Shopping Cart options to find the look that suits you!

Checkout Settings – connect your Online Store to a merchant account and Edit Texts.
Skins – change the design of the Skin of your Shopping Cart.
Color – change the colors of your Shopping Cart’s Background, Outline and Title.
Effects – add various Effects to your Shopping Cart.

Customizing Your Checkout Button

The property panel at the bottom of the Editor gives you many other options for customizing your Checkout button! Below you will find a list of these options. Feel free to experiment with these Checkout button options to find the look that suits you!

Checkout Settings – connect your Online Store to a merchant account and Edit Texts.
Icon – add an Icon to your Checkout button. (Note: Be sure to go to Settings and checkmark the Show Icon box.)
Skins – change the design of the Skin of your Checkout button.
Color – change the color of your Checkout button.
Settings – allows you to Show Icon, set Alignment, Icon Size and Margins.
Effects and Animations – add various special effects to your Checkout button.

 

What currencies can I sell in?

Currently Wix eCommerce supports all of the currencies that PayPal and Google Checkout support. This includes: US Dollars, Euros, British Pounds, Australian Dollars and Canadian Dollars.
Google Checkout currently only supports US Dollars and Pounds Sterling. You can find a full list of supported PayPal currencies here.
Note: PayPal also supports Brazilian Real but only for in-country PayPal accounts.

Can I add options such as colors and sizes to my shopping cart?

Yes! Simply follow the steps provided above in the section, Adding Product Options.

Can I add a third party shopping cart to my Wix site?

You can try to add an external shopping cart with our HTML feature.
You can find all the information here.

Note: If you are using the HTML to make a direct profit, you must upgrade to at least a Combo package in our Premium upgrades.

How can I convert my old gallery to a new gallery?

To copy your products from an old gallery to a new gallery, try our StoreConverter tool. Please note that this tool is in Beta and let us know here if you encounter any issues!

To copy your products from your old gallery to a new gallery:

1. In the Editor, open a new gallery and place it near your old gallery.
2. From the toolbar on the left, go to Add, then go to eCommerce, click Online Store.
3. In the Online Store window, click More. Under More, click StoreConverter to add it to your Editor.
4. Click on the old gallery.
5. Click on the new gallery.

The products in your old gallery are copied into your new gallery.

Delete the StoreConverter when you are finished.

You may have to go into the Manage Products window of your new gallery at least once before you can see your images on the product pages of your site. Simply click Manage Products and then click OK.

Is there a limit to the number of products that I can add to a product gallery?

Currently the product limit for the Matrix Gallery is 99 and the product limit for the Slideshow Gallery is 30. But don't worry; you can always add additional galleries to your page if you reach the limit and all of your galleries will be linked to the same cart.