SEARCH
Newsletter
Subscribe to get design tips, latest trends, free stuff and more.
It doesn't look like an e-mail address

hosting

  CMS Joomla HikaShop - Ecommerce for Joomla

HikaShop - Ecommerce for Joomla

ostraining.com Joomla Jan 17, 2012

In this tutorial we used the Business Edition, which has all the features and plugins installed. The free version does not let you create product options, and we wanted to be able to demonstrate them. You won't be able to do the options section with the Starter. Since adding options is just like adding products, if you follow this tutorial, you will have the skills to do so if you upgrade.

Step 1. Download and install

img

You can download the various versions from here http://www.hikashop.com/en/hikashop.html

After downloading go to the Extension Manager, browse for your file, and click Upload & Install.

img

You can access it from your Components menu.

Step 2. Add a product

img

Go to Products > Categories on the HikaShop dashboard.

If you don't need categories, you don't need to create them. There is a default, top level called Product Categories and you can add all your products there. If you are going to have a more complex cart, you should probably create the categories first.

img

Highlight the category you want to put the product in.

You can add the product to other categories or change it to another one later. If Root is highlighted, it will go into root without being in a particular category. Your choice here becomes more critical in light of how you connect the menu item to the display. We aren't going to cover that here, we're sticking to product entry, so for our purposes the defaults are ok.

You can change the name "Product category". As you will see in subsequent screen shots, I have changed it to Joomla Products, and added Drupal and WordPress categories as well.

img

Click Add a product from the Products tab drop down menu.

Alternatively, you can click the New icon in the administration menu bar.

Step 3. Add product details

img

Enter the Name. This field is required.

You will see the Main Information panel on the left, and you have all the same editing capability you would have for a normal Joomla article. You also have meta input for SEO on your products. Fill it out and create dazzling display for your product.. Scroll down the page for more important information you need to add.

img

Enter the Code. This field is required. The rest of the fields depend on the product type and specifications, and are optional

The Access Level and User group panels won't be available in the free version. By default the product is viewable by all. After purchase, you can change this to none or have special products available to custom defined groups.

Now move to the right side of the screen.

Step 4. Add product categories and prices

img

Click the Add button on the Categories panel.

Categories - When you save the product it will be assigned to category you had highlighted when you clicked "Add Product." or you can add it or assign it to different categories with the "Add" control. You will also be able to delete unwanted categories on existing products after they are added.

Add this product to the category called "Product categories" or whatever you might have named it to. In this exampe Joomla Products is the default "Product categories" renamed.

img

Navigate to the proper level using the Explorer and double clicking. Check one or more categories and then click OK.

The Explorer is a little confusing. Notice that the Root category is highlighted. You need to highlight the category one step higher than the category you want to use in order to get the proper list of check boxes. If I highlighted Joomla Products, the list would be blank. Clicking on OK would give me a message asking me to select a category.

So highlight the parent category in the left pane, so you can choose the category in the right.

img

The categories selected now show below the Categories panel. (You can select more than one.)

The next panel in line on the product entry page is for Related Products. The operation of the Related Products panel is identical. Since this is our first product, you won't be able to create any related products.

You use the Options panel until you have more than one product saved. We'll skip ahead to Prices for now.

Prices

img

Click the Add button. You can add a price row by clicking on this button. If you want to remove a price row, just set its price to 0. Those modifications will be applied only after you saved the product.

In HikaShop, a product or a variant can have several prices.

  • First, you can set prices for each of the currencies published on your store.
  • Second, you can set prices based on minimum quantity so that people buying several times the same product in the same order will get a lower price per unit.
  • Finally, if you don't set any prices for a product, it will be considered as a free product. For a variant, that will result in the system using automatically the main product prices and thus, it can only be free if the main product is free.

You cannot use the system to limit the user to order at least x items.
When the product is not free, you need to have a minimum quantity of 0.

Business Edition Only - Access level: With the Business edition of HikaShop, you will have an additional column named "Access level" where you will be able to limit a price to a group of users.

Step 5. Variants and options

img

Before you proceed, be sure you save your work. If you haven't entered anything yet, when you click on the next step you will get a message telling you to enter at least the name and the code number.

Before configuring the variant of your product, you need first to create one or several characteristics with the menu Products->Characteristics, and then add one or several characteristics to your product

img

Click Add to add a Characteristic after you've navigated to the correct section.

Shopping cart software developers often use the term "variant" to describe things like colors and sizes. Most people refer to these as options, but in shopping cart talk, options and variants aren't exactly the same thing. This is most easily explained with an example.

Suppose you sell a T-shirt which has 3 sizes and 3 colors. You have different amounts of stock for each for each, for the . Each one will have different weights, images, etc. But you want one shirt to be listed when your customers browse your shop. They get to choose several variants of the shirt when they get to the product page. Small and Red, for example might be some choices.

You need to create that list of variations here, then you can apply them to products as needed.

img

Start by entering the name of the variation

img

Click the Add button

img

Add a possible value for this variant. In this case Red then click OK.

img

Repeat the process until you have Red, Green and Blue defined.

Save and close.

Then repeat this step for Size and create three values for size - small, medium and large.

img

Do the same for any variants you might have. You'll have a list. You'll be able to apply the same color and size variants to any t-shirt in your store. You'll see them all listed in the Characteristics section.

If you are doing a large number of products, it would probably be wise to add all possible variants at the same time, so they will be available as you start entering products. Otherwise you'll have to stop and do this for every product you enter.

We've just created several characteristics with the menu Products > Characteristics, and now want to add one or several characteristics to your product.

img

Return to the product page for this product. Click Add in Characteristics.

img

Check all the ones you want to add and then click OK. In this case we are adding both color and size.

img

You can now see them added to the Characteristics panel. When the customer purchases, they will need to make a choice of both color and size before they can place the order.

If you want different prices for different quantities, you can set that in the price panel. But what if you want some options. For example No Logo, Printed Logo or Embossed Logo, and each option is a different price?

You've just learned the basics how to go about this. To create an option you go back to the beginning and create a new product with the name of the option. It will have it's own prices, variants, pictures and be a complete product on it's own. You can hide it from the users by putting it in an unpublished category.

Step 6. Add categories

img

On the Hika Shop dashboard go to Products > Categories to start adding.

Create an unpublished category

img
  1. Click the New icon.
  2. Create a category called "T-shirt logos"
img
  1. Return to the product page and go to the Options panel.
  2. Click Add.
  3. Add the two options to the product.

Here's what you'll get on the front end.

img

Before you save it choose No for Published. Save it.

img

Now return to your Products section and create two new products called Printed Logo and Embroidered Logo and put them in the T-shirt Logo category. You are now ready to add them as options to your basic t-shirt.

  1. Price - I added a discount for buying 20 or more shirts
  2. Variants - three colors three sizes
  3. Options - two options with an up charge for each.

You now have all the skills you need to start populating your store with products. All shopping carts are complicated and everybody seems to have some requirement that the developers haven't anticipated. You may find that with HikaShop as well as any product. But for now, you know enough to get products on line. HikaShop has context sensitive help available. check there first if you get stuck.

subscribe to newsletter