Ask a Question ?
Design & Publish Websites Faster

Use Ecwid’s Online Store in Breezi

Ecwid is a third party online store that you can integrate with our program. You can get an idea of how it will look on this site:

The Travel Almanac

In this article we’ll guide you through the process of creating an account and installing an Ecwid store on your site!

Sign Up

Visit the Ecwid website.

Ecwid's "Sign up now" button

Click on “Sign up now” to open an Ecwid account

If you don’t already have one, click on the “Sign up now” button to claim an account.

This will lead to a form where you’ll enter name, email and password.

Signup form for an Ecwid account

You only need a (full) name, email and password to register

Once you fill in your data and create your account, you’ll be presented with a Dashboard with several tools and options. The ones that interest us the most at this point are the widgets.

Widgets

Ecwid makes it easy to personalize how and where you want to present each of the components that conform the store.

All of the following widgets have a code snippet that you can copy and paste into an Embed HTML app in our program . And as any app, it can be installed in any Column of your layout.

  1. Product Browser
  2. Bag
  3. Categories Tab
  4. Categories Menu
  5. Search Box

Product Browser

The fundamental widget: it’s where your visitors will browse and add your products to their bag (cart).

All the other widgets are optional.

Sample items on the Product Browser

If you just installed Ecwid and haven’t customized your products, this is how it would look

Bag

The bag is a shortcut for adding items to checkout later. From the Ecwid site:

The Bag shows you if there are products in your shopping bag and allows your to drag and drop items into it. If you do not insert this widget, customers will still be able to buy products using the “Add to bag” button.

The Shopping Bag shows how many items your visitors have added and are ready to buy

The Shopping Bag shows how many items your visitors have added and are ready to buy

What Ecwid refers to as “Shopping Bag” others might call “Shopping Cart”. It’s purpose is to show how many items a visitor has added there.

The "Add to Bag" sample

Clicking this button will place this product on the Shopping Bag

The Shopping Bag has also a link to check out (“Open Bag”). There your customer can review the order, modify the quantity for each product, delete some, continue shopping or pay for the goods.

Categories Tab/Menu

Since you can organize your products into categories, you can display a menu or tabs of these above or beside the Product Browser.

The "Categories Tab" widget also includes the Shopping Bag

The Categories Tab widget, should be on top of the Product Browser

Either the tab or menu should be right above or beside the Product Browser. This is because selecting one category will update the Product Browser. If the categories are placed very far away from each other, say the Categories Tab at the top of the page (then a lot of content in between) and the Product Browser at the bottom, your visitor may not notice what happens when clicking on one of your categories.

Clicking one of them will show only the products available for that particular category.

Search Box

If you want to let your visitor search for products, this is the widget to use.

A search sample using the Search widget on top of the Product Browser

The Search widget shows the results on the Product Browser

Note that once a search term is entered, the results will be shown on the Product Browser widget. That’s why it’s very important to include the Product Browser widget, because all other widgets take advantage of it. If it’s not included, your visitor will be missing all the action.

Setting Store Front URL

An important step is to set your Store Front URL. Click on the “System Settings” link right next to the Dashboard.

System Settings link

Click on “System Settings” to set up your Store Front URL

There you’ll see several tabs and options to customize your store. What we’re interested is actually right there on the screen you’re presented with. Look for the field labeled “Store Front URL” and enter the URL of your store. Note that it can be different from the homepage, in case your “Product Browser” is contained in a different page.

For example: your site URL might be something like “mysite.breezi.com”, while the Product Browser is pasted in an Embed HTML app installed on a page called “Store”. In this case, the Store Front URL will be http://mysite.breezi.com/store

Paste your store's address on the Store Front URL field

The Store Front URL is the page that contains the Product Browser

Pasting Codes

Back in our editor, you must use the Embed HTML app to paste these codes. If you want to learn more about this app, check this article that explains how to use it.

Install (from the App Store) as many as you need, at least one for the Product Browser. Remember to place it in the right container (where you want each widget to show).

Then click on the pencil icon to edit the app’s content.

The "Edit Content" button for an Embed HTML app

The “Edit Content” button for an Embed HTML app

On the window that appears, you can delete all the code that’s currently there and paste the one from Ecwid.

Editing the Embed HTML app

Paste the widget code from Ecwid here

And that’s it! Once the store has been configured on Ecwid and your widgets code pasted, you’re done!

You can continue to update and modify products on Ecwid’s site, without needing to touch the code you’ve already pasted.

Set Up Your Store

Ecwid gets some sample data by default installed on your store. You’ll want to customize it with your own items, categories and pricing.

Catalog

To configure your products and categories, you’ll need to go to the “Catalog” tab on your Ecwid panel.

Click on the "Catalog" tab

The Catalog tab contains your Products, Categories and Product Types

When you click on this tab, the first page you’ll be presented with is “Products”.

Products

The main view will show the following fields of your products: SKU, Name, Category and Availability.

Product page with options to edit, add or remove products

These are the fields you can edit on the Product page

  • SKU means “Stock Keeping Unit” and it’s an identifier for a product.
  • Categories will need to be created first before you can use them here
  • Availability has the following possible values: Enabled, Out of Stock, Disabled

But you can add a lot more detail to each one. If you click on any of the current (sample) products, or add a new one, you’ll notice a screen with a lot of tabs that let you customize stuff like image, description, weight, colors, etc. You can customize it as much as needed.

Single product edit view

You have a ton of configuration options for each product

Categories

Categories can be customized too. You can add image and description to each one.

Editing a category on Ecwid

You can add as many categories for your products as needed

Product Types

Types of products describe similar products regardless of its category. Here’s a quote from Ecwid:

Product types are groups of products which share the same attributes. For example “Books”, “Apparel”, “Hand-made”, etc.

To learn more about modifying your products, categories and all about Ecwid, visit Ecwid’s help site.

Further Reading

You might also be interested in the Wazala integration article, or our own Mini Shop app.

Note that all of these shopping cart systems are completely independent, if you want to feature an online store, it’s advisable to use just one of them.

That’s All

Liked this how-to? Share your thoughts!

Menu