You can now create an online store for your website with Breezi . The Mini Shop app is one of the coolest and most interesting apps we have released recently.

It is very similar to the Projects app. The only difference being the shopping cart system.

Checkout the Video Below to get a Quick Overview of the Shop App

Please note that this shopping system is a light weight one (Mini Shop). If you have a very large volume of products or items, consider using a more advanced system. Take a look at this article about Shopify, for instance.

Learn How to Install The Shop App

Open the App Store and look for the Mini Shop app.

Drag the “Install New” button to a column in your layout to install it.

Edit your Products

For starters, you can edit the default items shown in your Mini Shop app. To edit one, double click on the image or product name.

The CMS panel will open with the “Edit Product” view. There you’ll be able to edit:

• Product name
• Price
• Subtitle
• Product picture
• Product details
• Category
• Availability (if it’s out of stock)

Once finished click on “Save”, either below or at the top right corner.

Add Products

In case you want to add more items (products) you’ll have to be on the CMS panel. If you’re not there already, enter it by clicking on the “Edit Content” button on the app toolbar.

When the panel opens, click on the “New Product” tab on the left side.

There you can fill all the details and an image for your product. When finish editing, click “Save”.

Manage Categories

You can organize your products by having categories to group them. You’ll find this field when you are editing an existing or creating a new product on the CMS panel.

To edit a category, click on the “Manage Categories” on the left side of the CMS panel.

There, you can select one of your current categories and click on the “Edit” button. You’ll be able to edit the title for each one.

If you want to create more categories, do so by clicking the “New Category” tab.

Settings

The Mini Shop app has one of the largest list of options to configure on its settings. To view them, click on the wrench icon on top of your app.

Here’s a list of available options (or group of options) for this app:

• URL Name
• General
• List View Settings
• Display Details on List View
• Image Rollover Effects
• Display Details on Entry View
• Product Page
• Checkout Panel
• Payment Options
• Paypal Information
• Amazon Information
• Google Information
• Currency
• Shipping Configuration
• Tax
• Propagate Style  to All Pages
• Propagate Geometry to All Pages

URL Name

The name used in this field will be displayed on the address bar of the browser when a visitor clicks on a single product. The URL of your visitor browser may look like the following:

yoursite.breezi.com/random-page/shop/category-1/product-name-1

General

Currently, the only option on the General section of the Mini Shop options panel is a checklist for showing/hiding your categories. It reads:

Show Categories Above List View

If you enable it, all your categories will be displayed on top of your Mini Shop app.

List View Settings

This section of the settings panel will allow you to customize how your list of products will look like. The list view is shown on the page where you installed the Mini Shop app.

• Number of Entries to Show per Page: If you have a lot of products, pages with your lists of items will be created. This option will set how many products you want to show in each page.
• Columns: You can select from 1 to 4 columns for showing your list of items.
• Show Product Info: This option allows you to set the position of the information for each product. It could either be above, below, on the left, on the right, or on top of the image.
• Show Product Info on: Possible values for this field: “Initial state” or “Rollover state”. If you select the second one, the product image will only be revealed when the visitor hovers over it. Otherwise it will be always visible.

Display Details on List View

Here you can select which options you want to be shown/hidden on the list view for each product.

• Show Thumbnail
• Show Name
• Show Subtitle
• Show Price
• Show Category

Image Rollover Effects

When your visitor hovers over your product images, you can select a color effect to take place on them.

You have 2 types of effects: “Colorize” and “Blend”. You can also select none. Then you have 4 levels of intensity, that go from lowest to high. And finally, you have a color picker to select a color for the effect.

Display Details on Entry View

The entry view opens when a visitor clicks on a single product. This section of the settings panel currently shows only one option: “Show Category on Single Entry View”. If enabled, the category of that product will be shown when a customer clicks on a product to view its details.

Product Page

In this section, you have an option for positioning the “Add to Cart” button. It can either be above the description of the product, below it, or both.

Checkout Panel

A checkout button appears at the top of the page whenever your visitors are on the “store page” (the page where you installed your Mini Shop app). These options customize the look of it.

• Checkout Style:  This affects the format of the checkout button. Available options are: “Button with number of items”, “Items + Button”, “Text with number of items” and “Items + Text”.
• Font Color: Picker to select a color for your text on the checkout button.
• Font Size: The size of the text that appears on the checkout button (small, medium or large).
• Checkout Button Color: Here you can select a background color for the checkout button.
• Checkout Panel Background Color: Change the background of the area where the checkout button appears.
• Checkout Panel Alignment: The placement of the checkout button. It’s always at the top of the browser but you can select it to be on the right, center, or left side.

Payment Options

Here you can select how you want your customers to pay for the items they buy in your shop.

It supports PayPal, Amazon Payments and Google Checkout.

The following options allow you to set up the information for either one of these accounts.

PayPal Information

If you selected PayPal on the former option (Checkout Method), here’s where you’ll enter your account related data:

• If it’s a Paypal Sandbox Account (for testing)
• Paypal Email (the one associated to your PayPal account)
• PayPal Success URL (a page to redirect the user if the purchase is successful)
• PayPal Cancel URL (a page to redirect the user if the purchase is canceled)

Amazon Payments Information

Data for your Amazon Payments account (if you selected it as your checkout method).

• If it’s an Amazon Payments Sandbox Account (for testing)
• Amazon Merchant Signature
• Amazon Merchant ID
• Amazon AWS Key

Google Checkout Information

Set here your Google Merchant ID in case you use this checkout method.

Currency

Select a currency for your product’s prices.

Shipping Configuration

The available options you can set in this section are:

• Shipping Rates: the kind of rates for which you’ll charge the shipping of the products bought. They could be flat, per quantity, or percentage.
• Flat Shipping Rate: enter a value here if your rate is flat (the same shipping rate for each order, regardless of number of items or total cost).
• Quantity Shipping Rate: if you’re charging a fixed rate per item. Rate will vary depending on the total number of items in the order.
• Percentage Shipping Rate: this percentage is based on the total cost of all the items on the cart.

Tax

The tax rate set here will be applied to the sub total of orders.

Propagation

There are two options here: “Propagate Style to All Pages” and “Propagate Geometry to All Pages“. The first one will share the styling with other versions of this app installed on other pages. The second one will share the size of images.

Buying Process

We’ll show you the process of a customer who is buying something in your store.

Browsing Products

When a visitor first enters your store, he’ll arrive to your product list. There he can browse your products for sale.

Single Entry View

When a customer clicks on a product, he will be taken to the single entry view. In this view, you can add your product to the cart. Every time they click the “Add to cart”, the total number of items on the cart will be updated.

Adding to Cart

When a visitor clicks on “Add to cart”, the checkout button is updated. This button is always at the top of the shop-related pages, such as the list view, the categories, and the individual products.

Checking Out

When your customer clicks on the checkout button, a modal window will appear to confirm your order. There you can check if the products and quantities are correct.

Once the customer is happy he can proceed and click “I’m Ready to Pay”. When they click it, a new page will be opened to process the payment. Depending on the payment method (PayPal, Amazon Payments, or Google Checkout) you set up in the options, is the service that will be opened.

FAQ

Does Breezi process the payments?

Breezi does not process any of the payments nor manages in any way your customers money. This is done through third party services.

Available methods for the processing of payments are: PayPal, Amazon Payments and Google Checkout.

Does Breezi gets a percentage out of payments made by my clients?

No, we do not touch any of your hard earned profits. 100% of payments go to your account.

Does it need to have its own page?

Yes, you should have only one Mini Shop app per page.

Can I have several stores?

Yes, you can have several different Mini Shop apps installed on the same Breezi site. It may be much easier to track and manage all your products from a single app though.

Can I track inventories of my products?

No, currently you can’t track how many products are available or in stock. You can set them to be “Out of stock” on a checkbox though. Refer to the “Edit your Products” section above.

Nothing happens when a visitor clicks on the “I’m Ready to Pay” button, is there something wrong?

There must be a payment method set on the Mini Shop app options. Your third party service data should also be entered before making payments.

After setting this up, if the problem persists, the browser’s cache may need clearance before proceeding.

My store is very complex, is this app for me?

If you manage a large amount of products, sells, or have special needs like inventory tracking or other advanced functionality, this app may not be for you.

It is targeted at smaller shops/businesses. You can try an alternative: Shopify.

Do you have any concerns or doubts? Let us know in the comments!