Ask a Question ?
Design & Publish Websites Faster

Build your Own Online Shop or eCommerce Store

You can now create an online store for your website with our platform. 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.

App Store with the Mini Shop app highlighted

Scroll down to the Mini Shop app on the App Store

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

A fresh installed Mini Shop app

The Mini Shop app when installed for the first time looks like this

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.

CMS panel for the Mini Shop app

In the CMS panel you can edit your product details

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.

The app toolbar on top of the Mini Shop app

To open the CMS panel, click on the “Edit Content” button on the app toolbar

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

To add a product, click on the "New Product" button

The CMS panel has a button for inserting items or products to your Mini Shop app

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.

Add a category to your products on the CMS panel

Group your products in categories

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

Manage the Mini Shop app categories

Click on the “Manage Categories” tab to edit them

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.

The "New Category" tab in the CMS Panel

Add categories for your products by clicking on this 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.

The "Edit Settings" button on the app toolbar

To access the options of the Mini Shop app, click on the wrench icon

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 of the path URL for individual product view

This will be your single product URL

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.

The General section on the settings for the Mini Shop app

Show or hide your categories on top of your list of products

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.
The second section of the settings panel: "List View Settings"

Configure the look of your product on the list

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
Fields to show on the list view

In this panel you can select what information (details) you want to show on the general list view of your products

Image Rollover Effects

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

Select an effect for "rollover" images

You can set a color effect to be applied when someone hovers over a product image

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.

Hovering over the sample image

This image shows how the “Blend” effect looks

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.

With this option you can show/hide the category of each product on entry view

Checkbox for showing the category on single entry view

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.

Product Page section of the settings panel for the Mini Shop app

Select the location of the “Add to Cart” button

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.

Select how do you want your customers to pay for your items

Here you must select a payment method for your customers to pay

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.

Select a currency for your store

In this section you can select the currency for the prices of your products

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.
Set the shipping rate costs

Select either flat, quantity or percentage rate for shipping

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.

List view of a Mini Shop app

The list view shows the products for sale. For more information, your visitor must click on any of them

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.

The single, entry view, is for individual products

On the individual (single) product page, a customer can read the full description and add that item to his/her cart

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.

The checkout button shown next to the "Add to cart" button

The checkout button is updated every time a customer clicks on “Add to cart”

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.

The shopping cart view

Here a customer can edit quantities of the chosen products and review their final order

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.

The PayPal screen for processing orders

A sample PayPal window for processing orders from your site

FAQ

Do you process the payments?

We do 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 your website design tool 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 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!

Menu