Adding and Editing Mini Shop App - Part 1

The shop app will allow your customers to shop online. 

Installation

To add a shop app into your site click on "Apps" in the bottom Shelf and look for "Mini Shop"

Drag and drop the app where you want to place it.

Editing

Click on "Edit"  in the top right corner of the app.

Now, you will see the name and description of the default products, and in the left panel, a list of the apps in that page. In this case, the last on the list is the Mini Shop. 

Categories

Here you can separate your products into categories, for example: Sweet bread, Sandwiches, Gifts, etc. To do this click on "Manage Categories" 

Click on "Edit", name your category, and then "Save". 

* If you don't have any category there's the option of hiding the categories' list but at least one category must be created. In part 2 of this tutorial you can learn how to do hide categories.

Products

Now that you have the categories set, let's add the products.

On the left panel, click on "Manage Products" and then on "Edit" 

Here, you have several fields: Product name, Subtitle, Description, Price, Edit Image and Category (marked with red squares on the image below). You can either fill out all the fields or just the required ones (Product Name, Category, Price). We recommend to add images of your products in the description and also in Edit Image, which is the one that will be displayed in the main Mini Shop's menu.

Once you have finished with the product's description and the rest of the fields, click on "Save" and "Exit" the app.

Using the dots you can edit the style of the letters (size, type, color etc.) and rollover color, as shown in the image below. This can be applied to the categories, product name, and price. 

Also, if you click on the products, you will be able to change the styles as well

That concludes the first part, in Part 2 we will learn how to adjust the general settings of the app, like Checkout Method and some other details.

For more information, also check:

• Adding and Editing Mini Shop App - Part 2
  
• Common Editor Icons
  
• Adding Links to Text