E-Commerce in Weebly

Weebly's E-Commerce addon is available for $2.99/month. For more information on how to upgrade, please see:

While E-Commerce in Weebly is easy to understand and use, it is complex enough to ensure that you will be able to provide your customers with an attractive and secure shopping environment. This article will show you how to:


E-Commerce Elements

The Weebly E-Commerce elements area has a single item, the Products element. This element has four different configurations: Block, Small, Regular, and Large. To add a Product element to your site:

  1. Click the Build tab.
  2. Click the $ icon to view the E-Commerce elements.
  3. Drag the Product element to the desired place on your site.
You can find the E-Commerce elements in the Elements tab under Revenue
  • Block- This is the default element style. The product details are compact, and it is ideal for creating a page with multiple products.
  • Small - This element takes up little vertical space, but stretches to fill whatever horizontal space is allowed.
  • Regular - This element is compact, but also formatted to look nice in a full page scope. It has a large title, and all parts of the element are left aligned.
  • Large - This element is designed with style in mind. It has a border around the entire element, a large title and a separate border around the price and purchase button. It is ideal for a featured product listing.

To select the style of your Product element:

  1. Click in an empty space on your element.
    Product Style Select Step 1
  2. Select the desired style from the drop down menu.
    You can find the E-Commerce elements in the Elements tab under Revenue

Create a Store

To create a store on your website:

  1. Drag and drop one of the E-Commerce elements to your page's content area. You can change the element type later without losing any of the product data you've setup.
  2. You will be prompted to select either the Google Checkout or PayPal option. You will want to ensure that you have your merchant information ready. Picture of the popup dialog box asking which store type to setup
    Note: Google has announced the discontinuation of their checkout service effective November 20, 2013. Google has stated that they will continue to offer merchant services through Google Wallet; however, this will only apply to the delivery of digital products and services. If you intend to sell physical products using Weebly, PayPal may be a better payment solution.
  3. Once you have selected your merchant provider, you will be able to add additional elements to the page or change the one you added originally.

Configure Your Store

Once you have placed an element, you can edit it by clicking the information you would like to edit or by clicking the sample image to upload a product image. These elements work in the same way as text and image elements in Weebly.

You will also be able to make changes to the element through the toolbar that appears directly below the main Weebly Toolbar.


The toolbar allows you to make several changes to your product element:

  • Display Style - Allows you to change the element type to one of the other four available elements
  • Button Style - Allows you to change the button in the element to either "Add to Cart" or "Buy Now"
  • Hide Image - Allows you to select whether or not your product image will be displayed in this element
  • Hide Description - Allows you to select whether or not your product description will show in this element
  • Position of Product Block - (for full page elements) Allows you to select the alignment of the element on the page

Once you publish your changes, the elements will start to function, and the buttons in the elements will allow your customers to add products to a cart or purchase immediately.

Sell Multiple Products on the Same Page

If you want to use Weebly to sell several products on the same page, you can configure your pages to do so. Weebly is very flexible and allows you to organize your page in several ways using the various available page elements. Here are a few examples:

  • Setup a grid using product blocks and multiple columns
  • Provide extended product descriptions with paragraph elements and multiple columns
  • Provide additional product images with multiple columns and image or gallery elements
  • Create and use custom PayPal buttons instead of the standard E-Commerce elements

Configure Sitewide E-Commerce Settings

In some cases, you may find that you need to change your payment solution or merchant email address. You may even run into a situation where you need to be able to accept a different form of currency. You can do all of these things in Weebly through the Settings tab.

Taxes and Shipping Costs

If you need to make changes to the calculation of taxes and shipping costs, you can do so through your Google Checkout or PayPal account.

  • For Google Checkout, you can change these settings under Settings in your Google Wallet account by either clicking on Shipping Setup or Tax Setup.
    Note: The above options show how to set up flat-rate shipping.  If you would like different shipping costs for each item, you will want to create custom payment buttons through PayPal instead of using Weebly's built-in E-Commerce elements.
  • For PayPal, you can learn more about what you'll need to do on PayPal's website.

Currency

You can also choose other currencies to accept from the Weebly Settings tab.

  • For PayPal, you will see a drop-down menu that will allow you to select from several other currencies.
  • For Google Checkout, unfortunately only US Dollar is accepted; you will need to select PayPal if you wish to accept other currencies.

Once you have finished making changes in the Settings tab, click Save before you proceed with editing your site.