Ecwid is a third party online store that you can integrate with Breezi. 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 Breezi site!

Sign Up

Visit the Ecwid website.

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.

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

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.

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

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.

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.

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

Pasting Codes

Back in Breezi, 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.

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

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.

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.

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

Categories

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

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 Breezi’s 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!