E-Commerce Gallery Tutorial

Welcome! This brief tutorial presents the basics of using EasySite's e-commerce gallery feature. This module can be used as a simple image gallery - for example to share your photos or artwork - or as a full-featured e-commerce system, to sell your products. When used as an e-commerce system, EasySite includes a powerful, integrated shopping cart and checkout system, which works with PayPal and 2CheckOut.com (more payment gateways are on the way!)

We're going to show you the basic steps that were taken to create the Michael Humphries online gallery. You can actually purchase Gliclee prints from this gallery (prints on canvas). Michael is my all-time favorite artist, and I highly recommend him if you're looking for quality fine art. He paints mainly scenes from the American landscape, but has a lot of still life and nautical prints as well.

First, you should use the Menu Manager to create a menu of your product gallery categories, as shown below. In the next step, we will link these menu items to categories in the gallery. Thus, for this step the menu items will not have links associated with them - they will remain as "no link". As you can see in the screenshot below, I have two menus in this system, a horizontal menu at the top, and a vertical menu for the product categories at the left.

Now, return to the Admin Index using the link at the top of the Menu Manager, then click on the "Product Gallery" module at the bottom of the screen. Use the "Manage" link. Depending on the version of EasySite that you are using, this might be labeled "Product Gallery 1.0" or "Product Gallery 2.0".

Then, click on the Categories link at the top. You should have a screen with the header "Product Gallery Categories". You add categories in exactly the same way that you add menu items... by using the asterisk (*) button. Name your categories so that they exactly match the menu item names that you created in the Menu Manager, as shown below. This isn't a requirement, but it will help you remember which menu item links to which category.

Now, return to the Menu Manager. We have to link our menu items to these new gallery categories. If you choose "new module category" from the "Link to" combo list, a popup window will appear from which you can choose the Product Gallery category to link to. Be sure to choose "Update All Items" after you're done to save the changes.

That's really the hardest part. The process of adding items to your online store is very simple and intuitive. In the Product Gallery management area, choose "Add Items" to add as many products as you would like to add. Be sure to specify the category that you wish to add to in the combo list at the top.

Since the process of adding items is very simple, we'll skip over it and just point out a few things which might be confusing to some users.

After adding some products to your gallery, you will see some controls below the images when viewing an particular category. These controls only appear when you are logged in to the Content Management tools. Try logging out of the system, then view the gallery by clicking on your menu. These controls should be gone. The controls allow you to quickly re-order, edit, and delete images from your gallery.

After you have added some images to your gallery, you will probably wish to customize the view of your gallery. You will find that EasySite includes dozens of options for gallery configuration, so you can probably make the gallery look any way that you want. For example, below are some of the display options for the "Thumbnail View" of the gallery. It's possible, for example, to hide the title, path bar, or navigation bar. You can also change the width x height layout of thumbnails, and adjust the default thumbnail width and height (in pixels). The best way to learn what these settings do is just to change them on your own and see the effect.

In the Michael Humphries Gallery, you may observe that the product display is much more advanced. For example, each image has multiple "Add to Cart" links, one for each product attribute. In addition, many of the images appear in mutiple categories. How was this done? Choose the Edit Images option to view the page shown below. If you want to configure a different price for every product option, then you should use the "Configure Price Based on Attributes" link. For example, the price of a print varies based on the size. If you are selling clothing, for example, you may wish to charge more for larger sizes of the same item.

Another thing that you will notice about the display of items in the Michael Humphries Gallery is that the Title is actually below the image, not above it. This was accomplished by clicking "Display Options" at the top of your screen, then choosing "Full Image/Product Page Options". By using the up/down blue arrows, you can re-order the display very quickly, hide display attributes, and change the orientation of display attributes relative to the primary image.

One important aspect of the Michael Humphries Gallery is that users directly enter a category by clicking on the left-side category menu. This actually is a bit of a shortcut, and if you prefer, you can display your categories in the page body, each category having its own "folder" image. This is the view that is presented to you when you click on "View Gallery", as shown below. You can change the default category image, default item price, and input meta information here for search engine optimization. This page is accessible by clicking on "Settings" in the gallery management toolbar.

Once your products have been added, you may wish to customize the layout and options of the checkout screen. Nearly every aspect of the EasySite product gallery is configurable using the Content Management tools, as you can see. These settings, as well as the Shopping Cart display settings, are accessible in the "Display Options" link at the top of the gallery management page.

Thanks for using EasySite, and good luck with your new e-commerce product gallery!
Darren