Search The Hostwinds Guides Knowledge Base

How To Build E-commerce in Weebly

Weebly makes adding eCommerce to your website easy and effortlessly using the e-commerce option.  If you are not familiar with how to access your Weebly service, please review How To Access Weebly Website Builder.


Weebly E-commerce Section

Once you are logged into your Weebly account, select the Build tab at the top of the page.


Weebly Build Tab Location Image


Now look for the E-commerce column.  Each of the available options are available by dragging and dropping into the location you would like within your web page.


Weebly e-commerce section image


Products – Use this feature to start a products column on your webpage


Weebly Products Button Image


While dragging the Products element onto your web page, it will prompt you to enter a New Product if you have not done so already.


Weebly Select Product Image


Selecting Add Products will take you to a separate product page where you can create your product(s), including imagery, pricing, and description.  Once a product is created, your product availability will be available when selecting products.  However, you can select an uncategorized box to insert a product with no current information if desired.  When any check boxes are selected, Add Products will change to “Select (insert number here) Products”.  Clicking on either of these options will produce the next step Choose Layout.


If you have already created or just created Products for your Storefront, these will show in the position you drag this element to and can be shown anywhere you choose on the page you are editing.  Also, feel free to select Select the layout you would like your website to display and your product(s) will be displayed as such.


Product Layout Weebly Image


  • Grid: Products display in rows and columns. All images are the same size.
  • Masonry: The products are laid out based on the size of the image – usually alternating smaller and larger. Pagination displays at the bottom if needed.
  • Multi-Image: All the images you’ve uploaded for a product are displayed.
  • Single Row: The products display in a single row and the user can scroll to the left or right, similar to a slideshow.


Categories – Use this option to drag and place categorized products from your Weebly store


Categories Weebly Image


Unlike Products, which can include many generic items (belonging to many different categories), Categories allows you to promote your products.  For example, you can use this feature to promote “candy” Items or “on-sale” type items you are trying to get rid of.  While dragging the Categories element to the position that you choose, this will be shown on that page.  Each category you have created within your store will be an option to select and include within your website.


Weebly Select Category Image


After selecting your categories, you will be prompted to choose your layout prior to applying.


Category Layout Option Image


For information on how to create categories, or edit current ones, please review our article Weebly Store Overview


Product – Place individual products using this option.


Weebly Product Image


While dragging the Product element to the page location, this will prompt you to search for a current product that you have already created.  For testing purposes, we have created a product within Weebly’s Store called Car for $500.00.  For more information about Weebly’s Products, please review Managing Products With The Weebly Store.


Weebly Product Pop up Image


When selected, the individual product will be displayed where you dragged, along with the information describing the product and price.


Weebly Product Drag Example Image


Editing E-Commerce Options

You can edit the text within each Product or Categorie Box by selecting any text within.  These options would include changing what is textually there, appear as bold or italicized, add links, etc.


Edit Text Of Product Image


You can also change advanced features from within these areas by clicking any area within.  When done, a option similar to below will be displayed.


Advanced Options For Products Weebly Image


  • Edit Product – Change the product or the current features of the current product within the Weebly Product interface
  • Button Type – Gives other textual options displayed on the button
  • Button Size – Change the button size to small or large
  • Spacing – Change the margins of the current category within the web-page
  • Advanced – Choose to display or not to display certain properties of your product


Options within the advanced editing section may differ from which area you are attempting to edit.


Deleting An E-Commerce Area

Deleting any section within Weebly is easy.  Simply hover over the area you wish to delete and select the X icon in the top right.  This will effectively delete the selected box.


Weebly Deleting Category Image


Helpful Related Articles