Our extensions

play HikaShop is an e-commerce solution for Joomla !
Built for simplicity and flexibility. 


Have your users purchase your products efficiently, facilitate the management of your store, increase your sales thanks to built-in marketing tools and so much more !
Quik and easy to configure, let starts your shop online today !

All features     Download

What's new ?

Main features

INTERNATIONAL
SALES


HikaShop provides an interface for handling languages, currencies, zones and advanced taxes to sell anywhere in the world.

POWERFUL
STATISTICS


Easily manage your store using the built-in dashboard and its powerful statistics capabilities.

RESPONSIVE
LAYOUT


HikaShop works on every device (laptop, tablet, smartphone..). Your shop will fit to each user's screen.

MARKETING
TOOLS


Increase your sales thanks to affiliate program support, coupons, discounts and email marketing integration.

EASY TO
CONFIGURE


User-friendly and flexible, our component is easy to use and configure. Create your own shop online in a minute !

FULLY
INTEGRATED


HikaShop is integrated with many other components and includes a lots of plugins...

ADVANCED
CUSTOMIZATION


Personalize your store: views, checkout, information fields, emails, and more to fit your website design

MULTI
VENDOR


Adding HikaMarket to HikaShop, create a multi-vendor website. Manage in one shop several sales from different people.

Our Company

BUSINESS
PARTNER

HikaShop is a complete e-commerce solution that allows you to easily create and manage your online store but also take it to the highest level.

GREAT
SUPPORT

The whole team is working to provide you with quality support. Documentation and forum are there to guide you step by step. Each issue finds an answer !

ALWAYS
ON TOP

HikaShop is constantly improving. We ensure compatibility with each new version of Joomla! And new features are added frequently.

RECEIVE
OUR NEWS

Good deals and novelties, it's here!

 

 

Presentation

With HikaShop 3.4.0 release, we added a new checkout workflow edition interface. We worked hard on this evolution in order to allow you more liberty in the way you can setup your checkout. We'll present in this tutorial how all this works and what you can do with it.

Reach Checkout Workflow

To reach and configure the checkout, follow this step by step process :

  • In the Components dropdown, select HikaShop, then Configuration

  • Click on the Checkout tab and have a look at the Checkout Workflow part

Description

Let's now detail the new interface parts, as a legend :

  • Classic HikaShop part
  • New Checkout Workflow
  • Step 1
  • Step 2
  • Step 3, (End)
  • Add a new Step
  • Step Views
  • Add a new view

Essentials points about workflow parts

Let's precise some points in order to better understand workflow parts :
See this frontend view that respect the previous color legend

Thanks to the progress bar you can see the different steps, and in purple 2 views (here, Cart and Login).
So on a checkout, you can have one or several steps (pages of the checkout). And on each step, you can have one or several views (blocks on the same page), one below the other on the page.

Views Details

New view options

As you can expect from this view, the aim is to add a new view block and define its type. That's why you will find a dropdown to select the type. And so, select the view type, and click on "Add view"

Address options

  • Read only : Select "Yes" if you want only display the selected address(es) without allowing the user to do modifications in that view.
  • Address selector : Define how to display the address selection (dropdown or list).
    Note : This option won't be available if the Read only option is activated.
  • Type : Select here if you want to display only the billing area or only the shipping area or both.

Shipping options

  • Read only : Click "Yes" if you want to only display the (pre)selected shipping method without any possibility for the user to change it.
  • Show Title : Select if you want display the title of the view or not on top of it.
  • Multiple group product display : Select "Yes" if you want display the products thumbnail for each shipping group (when you have different vendors with different shipping methods, or warehouses).

Payment options

  • Read only : Click "Yes"if you want to only display the (pre)selected payment method without any possibility for the user to change it.
  • Show title : Select if you want display the title of the view or not on top of it.

Cart options

  • Read only : Click "Yes" if you want to display the content of your cart without any possibility to modify it.
  • Show Image : You can choose here to display the product images or not.
    Or you can select "Inherit" to use instead the option of the main HikaShop Options section of the configuration.
  • Link to the product page : Select if you want to allow the customer to go to the product page or not.
    Or you can select "Inherit" to use instead the option of the main HikaShop Options section of the configuration.
  • Display product code : Choose to display the product code in the cart view or not.
    Or you can select "Inherit" to use instead the option of the main HikaShop Options section of the configuration.
  • Display price : Display or not the prices in the cart view.
  • Price with tax : Display the product prices with taxes or not.
    Or you can select "Inherit" to use instead the option of the main HikaShop Options section of the configuration.
  • Show delete icons in the cart : Display or not the delete icon to remove products from the Cart.
    Note : This option won't be available if the Read only option is activated.

Fields options

  • Read only : Click "Yes" if you want only display the selected values in the custom order fields without possibility for the user to modify them.
  • Show title : Select if you want display the title of the view or not on top of it.
  • Show submit button : Display or not the submit button to allow the user to send the custom fields value ithout submitting the whole checkout step.
    Note : This option won't be available if the Read only option is activated.
  • Custom fields : With this input you can select which custom fields you want display in your view. If you don't select anything, it will display all the custom order fields possible.
    This option can allow you to separate your fields form in separate steps by having it in different steps with different fields selected in each step.

Terms and Conditions options

  • Terms and Conditions : Select here the Joomla article that will become your Terms and Conditions.
    Note that you can add this view several times to your checkout with different Joomla articles if you want several checkboxes to be checked by the customer.
    Also, if you don't select any article, the checkbox will still appear but its label won't be clickable.
  • Terms & Conditions popup size : Define here the popup size which will display your Terms and Conditions Joomla article.
  • Label : Type here the message you want to display in order to invite your customer to validate your Terms and Conditions.

Text View

The text view will allow you to write some text to add legend to guide customers, or separate the different views, etc.
Plus, it's also possible to use html code, inline css,javascript code blocks, or even use tag to insert tags from other plugins (modules anywhere, content anywhere, and the likes...).

Login View

  • Show submit : If you deactivate that option the "Register" (for the registration form) or "Next" (for the guest form) button won't be displayed for that view

Generic View

For the other default types of views there is no specific option, and so views will be displayed like this :

This will be the same kind of display for these views :

  • Coupon
  • Status
  • HikaShop user points

Note: Plugins and other extensions can add their own views to the checkout workflow using our "Checkout API". So you might see more view types with possibly their own options.

How to move Views

In order to move a view in your workflow you have some arrow buttons that will appear when you hover the view, all around the border of your view.

For example, let's swap it with the previous view.

Or to move it to the next step.

Manage steps

Steps options :

  • Text Input : Here, you can see the default title that will be used (by default it's the title of the first view of the step), but you can type your own text in the input field.
    You can also enter a translation key in it so that you can have a different title in each language of your website.
  • Trash icon button : This button enables you to delete the step

    Note : All steps can be deleted except the last one, the "End" step. That step is not a real step of your checkout. That's the page the customer will see after clicking on the "Finish" button of your checkout, which in most cases will redirect him to the payment gateway automatically so that he can pay his order.

Concrete example

Let's see here some typical configuration with 2 concrete examples.

One page Checkout

Backend configuration :

First, let's consider that all the views are needed (except the second cart view), but we have to move them all to the first step

Now, we have to remove the second cart view, like shown on this screenshot :

Then, you can see that the step 2 is now empty, no need to delete it with the little trash icon, because when you will save your new configuration, the step 2 will be automatically removed and you will get this :

Frontend result :

As result and as expected you have now a one page checkout :

Several pages checkout

Backend configuration :
From this kind of configuration we will now move to a step by step checkout.

Move the Address view, to the next step :

Delete the Cart view in Step 2 thanks to the delete icon on the top right corner of the view.

Move Shipping and Address to Step 3.

Create a new view => Coupon

In the Step 3 : As you did for Coupon, create a Field view

Add, in the same way, Cart and Text views

Edit your Text view with this Html code :
<div style="color:red; font-weight:bold;">Please, don't forget to read our Terms and conditions</div>

Last but not least, do not forget to edit your step title in order to fit with your Checkout workflow.

Your checkout workflow is now like this, don't forget to save :

Frontend result :

As expected you have now checkout in several steps :

Note : Each step has its own title that will announces what will be displayed :

 

 

Description

This screen enables you to create or edit mass actions. These mass actions will allow you to process almost everything in Hikashop, directly from this screen or based on a specific trigger. Thanks to this system, you can edit multiple products in one click as well as categories, orders, addresses or Hikashop users, avoiding long hours of repetitive work doing it element by element. Mass actions will for example help you move thousands of products from one category to another or change the order status for every orders of a specific customer in a few clicks. In addition to these one time processes, you will also be able to create tasks executed periodically or on a specific triggers like at the order creation or when a product is deleted, etc.

Beware that these actions may have irreversible consequences so be careful when you configure them as you could easily wipe out all your orders or products or users in a few clicks ! If unsure, please make sure that you do a backup of the website before or try first on a copy of your website.

Mass Actions are available for all HikaShop versions and available via the menu System>Mass actions.

Reach Mass Actions

Go to "Components -> HikaShop -> Configuration".

 

Then, click on "System", and "Mass actions".

 

You can now, see "Mass action" screen, here for example, as no Mass actions have been configured, the listing is empty.

 

And so, here you can see configuration screen.

 

Toolbar

 

  • Process : This button will execute the actions you defined in this view after filtering the elements as your configured.
  • Save & Close : Save the mass action and return to the Management screen.
  • Save & New : Save the current mass action and create a new one, redirecting you to an empty form.
  • Save : Apply the modifications to the mass action and stay on the same screen.
  • Cancel : Return to the previous screen without saving the modifications.
  • Help : This button enables you to turn ON/OFF the help section, this screen will appear or disappear.

 

Set the main informations

  • Name : Here you have to define the name of your mass action.
  • Description : A short description of your mass action.
  • Published : Publish or not the mass action. If a mass action is not published, it will not be processed on the selected trigger.

 

Additional Information

  • Data : These buttons allow you to choose the type of data you want to work on. Each data has specific triggers, filters and actions available, enabling you to do different combinations.
  • Triggers : Triggers allows you to specify when the mass action should be processed. You can either use it to execute your mass action on a regular frequency (for example you can import a csv with your products every day, updating your data according to the modification you made in the file), or execute the defined action on a given trigger like after a product is created. This way, you will be able to define for example a weight for a newly created product if you didn't specified any, avoiding shipping method errors. If you use a time trigger or click on the process button, the system will use all the data available but if you choose a trigger like "after a product is create", the mass action will run only on the data of the trigger, so only on that product in that case.
  • Filters : Here you can add filters to your mass action. For instance, you can specifically select products which belong to a category or customers living in Europe. Thus, you can process actions only on the selected data. Note that the number of elements filtered will be displayed next to the dropdown, letting you know how for example much products will effectively be processed in the given category.
  • Actions : This is the main part of the mass action system since it define what kind of action will be processed on the selected and filtered data. Here, you can choose to modify the data, export it as a csv, and even display the results on the current page. This last option will display the selected information in a table and give you the possibility to dynamically change the displayed values. 

 

Detailed options

  •  Filters

    • Generic

      • Columns : This option allow you to filter on any column of the selected table. This take the values in the database directly.
      • Limit : To have only a defined number of results, you can use this option. It is often useful when you want to export data or display them.
    • Product

      • Product type : The product type option allow you to filter only the main products or the variants.
      • CSV product : You can give a csv file as filter, the mass actions will take the content of the file, and filter on the given products.
      • Characteristics : To filter on the characteristics, it display only the available characteristics.
      • Access level : The access level filter restrict the results of the search to the defined access level.
    • Category

      • Category type : Allow to filter only the selected category type, for example only the product categories.
      • Access level : The access level filter restrict the results of the search to the defined access level.
    • Order

      • Order status : Restrict the results to the selected order status.
      • User with ACL : To get the orders where the users have the group defined.
    • User

      • Don't have : Return the users which don't have the value set.
      • User with ACL : To get the users with the group defined.
    • Address

      • User with ACL : To get the addresses where the users have the group defined.
  • Actions

    • Generic

      • Display the results : This option will display the elements previously filtered in a dynamic table, when this table is displayed a simple click on a row allow you to change the value of the selected element.
      • Export a CSV file : You can export the elements in a CSV or XLS file. Besides, you can define or not a path for this file. When a path is set, the file will automatically be saved in the specified folder. If you let the path empty, it will display the browser download bos to let you select an action, display, or save.
      • Update the values : This will allow you to change a value on all the elements returned, be careful when using this option because it is irreversible.
      • Delete the elements : As indicated, you can delete the filtered elements, as the previous optionit is irreversible.
    • Product

      • Update the categories : This will update the categories of the product, two choices are present, add to only add new categories to the product or replace, to remove the previously set categories and add the selected one. To remove all the categories, you can let the field empty and use the option "replace".
      • Update the product relateds : As the categories, you can add or replace one or many related product(s) to the filtered products.
      • Update the product options : This option will do the same thing as the previous one, but it is applying on the options.
    • Category

    • Order

      • Change status : Easily change your order status by selecting a new one, it will change it to the triggered and/or filtered one.
      • Add an existing product : To add a product, for example a gift on an order, you can do that automatically or manually with this action. You can select one or many products to add.
    • User

      • Change the user group : Simply select the user group to set to the selected user(s). You can add a group or replace the current group(s) to the selected one.
    • Address

 

Tutorials

Passed this overview on the different options available in the mass action system, here are two short tutorials giving you an example of what can be achieved with this function.

Create a massaction

First, to use the mass actions you have to click on the menu "System" then "Mass actions".

When you arrive in the mass action page, you have to click on the "New" button in the toolbar in order to create a new Mass action.

 

 

Once you are in the Mass action form, you can enter the main information relative to the mass action you're creating. The following fields allows you to set a name and a description to your mass action.

We recommend to set meaningful information, it will be easier for you to find back a mass action in the future.

 

As all the other features, you can publish or not the mass action. It's useful when you are using one or many triggers in the mass action. 

The triggers are called generally before or after an action. For example, when you create a product, it calls the two triggers "onBeforeProductCreate", which is called before the save of the created product, and "onAfterProductCreate", which is called after the save.

 

 

A mass action can be applied to one data type. You have to select the desired data on which you want to apply a mass action. The default possibilities are Product, Category, Order, User and Address.

If you want to create a mass action on another data type and you have some Php skills, you can code your own mass action plugin by following our developer documentation on that.

When the data is selected, you can choose one or many triggers, filters, actions. To add one of these elements, you just have to click on the corresponding "Add a ..." dropdown and to remove one of them click on the remove icon.

 

First example: change the category of a product

 

As an example of the use of the mass action system, we will see how to move all the out of stock products into the category "Out of stock".

To do that, you can configure your mass action as the following screen shot:

 

 

With this configuration, the mass action will be called when a product is updated and every day. The every days trigger is not required here but it can be more secure to add a check on all the products once a day like that.

This mass action will modify the categories of the product being updated when called on the "After a product is updated" trigger, and will affect all the products when called by the "Every days" trigger. Note that the first trigger passes an element to the mass action, processing only this element. At the opposite, the second trigger, since it's not applied on a specific element, will be based on all the elements.

The action will be executed on elements, but the elements must correspond to the filters. In this case, if the product(s) are in stock and/or are variants, the action will not be executed on them.

If we have at least one product which is out of stock, the action "Update the categories" will be executed on it/them. As you can see, there is a dropdown on the left of the action, it allow you to select "Add" or "Replace".

We wanted to change the category so we selected "Replace" here. To add a category beside the current categories of the product, just choose the "Add" option.

Don't forget to save the mass action. Otherwise, it will not be triggered. If you click on "Process" it will execute the mass action on all the elements corresponding to the filter but only at that moment.

Second example: Display all the product categories

This second example will show you how to display all the product categories. First, you have to select the data "Category" and configure it as the following screen shot:

 

 

To display the products categories, you have to use the filter "Category type" and select "Product category".

Then, in the action, simply select "Display the results" and you will see the elements to display. By default, nothing is selected and you can check all the columns by clicking on "Select all".

To display the results, just click on the "Process" button and the process will execute the selected action(s), and save the current mass action.

 

Here is the display of a "Display the results" action:

 

As you can see, when clicking on a cell, it becomes editable. Just edit the value and click on the save icon.

The display of the row edition change depending on the type, you can find textarea, dropdown, datepickers...

 

Third example: Modify several products prices through categories

Here, we will show you how to use the Massaction to increase several product price from a define category. Let's imagine, that you want increase by 10% some products price from specific category.

 

 

  • First target in Data to apply your Massactions on Product.
  • For the purpose of this example, ignore the Triggers part.
  • In the Filters define required Category, and so select the Category columns.
  • On this example, we select Category by his category_id.
  • And so, if you have to select several category, just click on the Add a filter button.
  • Like for the Triggers, ignore the Limitations part.
  • And for Action, we will set the operation on the price_value in Operation, then the operation itself.
  • We type : price.price_value * 1.1, let's explain this :
    • price : Allow to select the table price in the Data Base
    • price_value : Allow to select the column price_value in the price table
    • *1.1 : Corresponds to a multiplication of 1.1, for the 10% addition.

And to finalize your Massaction, as we didn't set a specific trigger, clic on the Process button.

As result, your concerned products have their prices change for an 10% addition.

 

 

Here is a video webinar which explains how to use HikaShop with Nicolas by OSTraining.

 

Description



Thanks to this tutorial, you will learn how to manage shipping manual price plugin, and how create several AND specific shipping method per product.
Then, we will create a concrete examples to have a specific shipping method price for just ONE product and after this several specific shipping price for this same product.



Shipping prices per product configuration


First of all, reach your shipping manual price plugin and so, go to

Components => HikaShop => Configuration.



There, click on "Plugins" tab.


Now, you have a view on all your plugins screen, and so click on his name "HikaShop Shipping manual - Prices per product plugin".



Let's discover its options :


  • Frontend position : Here, you can define the position where the product specific shipping prices will display on the product page.
  • Display on frontend shipping with minimum quantity : Define if you want to display on the product page the shipping prices with a minimum quantity restriction.


Concrete examples


First of all, to define a shipping price per product, we will go to the shipping method configuration and allow the shipping per product prices :

Go to Components => HikaShop => Configuration.



Continue to System => Shipping methods.



Here, select the Shipping method for which you want shipping prices per product.



In your shipping configuration page, looks for the "Use price per product" setting and set it to "Yes".


  • Note : This option is required for your HikaShop Shipping manual - Price per product plugin processing, but has its own aim. As a quick explanation, this option enables you to add a shipping cost for each products and for all products in your cart, thanks to the "Price per product" input value.

    Example : In your cart, you have two products and you set 1 in your "Price per product" input value.

    As a result, your shipping cost : 2 x 1$ , plus if you configured it, the shipping price of the shipping method itself (here, Price : 7$) = 9$.



Now, we will go to your products listing page :

"Components" => "HikaShop" => "Products".



Here, edit the product for which you want to define a specific shipping price and click on its name.



In your product configuration page, look for the "Shipping prices" area.



Here, you can create several specific shipping prices for your product, you can see displayed here your shipping method with its price.

Here will be displayed only published shipping methods where you have set the "Use price per product" setting to "Yes" .


  • Note : If you your "Shipping prices" area isn't displayed while you have enabled the required plugin and set the price per product setting to "Yes" in your shipping method, check if you have set a warehouse for your product that doesn't match with the shipping method's warehouse setting.



Let's go and create your first product shipping price by clicking on the "+" icon.


As a result, a new line will be displayed in order to set different elements of your product shipping price.


Let's explain these different inputs :


  • Min Qty : The aim of this option is to only use the product shipping price when the quantity of the product in the cart is above that value


    Example : You want to add 2$ to the shipping price ONLY for customers buying 2 or more of the this product, and thus, you fill the input with a "2".


    You can also let this field empty, if you don't want to use this condition.


  • Price : Define here your specific shipping product price.


    Note : This price will be applied for each product added in the cart.


    Example : If your customer adds in his cart 2 of this product, then the price here will be multiplied by 2.



  • Fee : Same idea than above, but for your shipping fee cost.


    Note : Unlike the Price calculation, the shipping Fee won't be multiplied by the quantity product.



  • Blocked: This a way to blocked the use of a shipping method if a product is in the cart.

    It is often used to block the sale of some products of the store to some places of the world.

    One example that comes to mind is a website selling military supply and based in the USA. The shop can sell any product outside of the USA, except for firearms. So in that case, the owner will configure two sets of shipping methods, all of them with the "shipping price per product" activated. One set with a zone restriction for the USA country zone, one other set with a zone restriction for a shipping zone with all the other countries as sub zones. Then, in the firearm products, the owner will check the blocked checkbox for the international shipping methods.

    That way, when firearms will be in the cart and the customer address will be outside of the USA, no shipping method will be available and an error message explaining the situation will be provided to the customer on the checkout.


  • Actions : Here, you can use the "+" icon to add a line or the "" icon to delete it.

Let's define a Min Qty, a Price and a Fee.

And save these parameters



On the product page and in the checkout process you can see that, as expected, your specific shipping price is displayed.



Let's check this price 9,5 Euro :



You can see that from the start the Shipping method used as base has already a price of 7,00 Euros

Then, add to it your specific price : 2,00 Euro

And finally, the specific fee : 0,50 Euro


Note : If the customer add in the cart the product a second time,the shipping price will be :

Shipping method : 7 Euro + Specific shipping price : 4 Euro (2 quantity products x 2 Euro) + Fee : 0.50 Euro = 11.50 Euro



Repeat the previous configuration to create another line, and so a second specific shipping price to your product, like you can see on screen below.



And of course, save your configuration.


Let's explain the settings for this second specific shipping price :


  • Min Qty : With this setting of 2, your specific shipping price will only be displayed if the customer order at least 2 items of this product.

  • Price : Here your specific shipping product price is 0.50 Euro.
  • Fee : And the fee is 0.50 Euro.

Let's see the result in several checkout cases.


With that configuration, 2 different shipping prices will be displayed and the shipping price will change based on how much of that product the customer put in the cart :


  • the customer adds in the cart only one product : the shipping price in checkout process will be :

    Shipping method : 7 Euro + Specific shipping price : 2 Euro + Fee : 0.50 Euro = 9.50 Euro



  • The customer adds in the cart 2 products : the shipping price in checkout process will be :

    Shipping method : 7 Euros + Specific shipping price : 1 Euro (2 quantity products x 0.50 Euros) + Fee : 0.50 Euros = 8.50 Euros



  • Like before, the shipping price that fit the customer quantity's choice is automatically displayed and used for the global shipping fee.




For this part of the tutorial, you must have configured at least 2 shipping methods. In this example, we have already one we configured earlier and we configured a second with a percentage instead of a price.



Note : You can have several shipping methods created from one shipping plugin!

A shipping methods is a way to configure your shipping plugin, and so you can configure shipping plugin with different restrictions, through several shipping methods.

Here, for example the 2 shipping methods are created from the Manual shipping methods plugin.



Caution : Don't forget to published your shipping methods and activate the "Use price per product" setting or you won't be able to configure shipping prices in your product configuration page.



Back to your product configuration page, you will discover in your "shipping prices" area a second possible shipping price, from your second shipping method.



Let's add parameters for this new shipping price. Click on + icon to display a new line.



And don't forget to Save.


Let's see the results on the frontend :

Shipping method : 3 Euros (10% of 30 Euros) + Specific shipping price : 0.20 Euros (1 product x 0.20 Euros) + Fee : 0.50 Euros = 3.70 Euros



An other case :

Shipping method : 6 Euros(10% of 2 x 30 = 60 Euros) + Specific shipping price : 0.40 Euros (2 products x 0.20 Euros) + Fee : 0.50 Euros = 6.90 Euros

So, you can see that the shipping price displayed on product page is the shipping price for 1 product since HikaShop doesn't know how many products will be added in the cart.




This concludes our tutorial on the matter of shipping prices per product.

Description

This tutorial will explain different ways to easily display different content (products and categories essentially) on your front end.

Content, will be displayed using two elements : Menus and Modules. There is an extensive documentation on Joomla about menus and modules, so we highly invite you to understand these key concepts before reading this tutorial AND take time to read the "Difference between Menus and Modules" chapter, that will avoid a classic misunderstanding.

Note : You can find information about Joomla! elements anywhere like this :

Content on front end

Difference between Menus and Modules

An Item Menu is display on the front end in order to create a new link with the Title Item Menu, and leads to content.

Here for this example, the content is the categories listing (Shoes and Computer).

Content on front end

And a module, is display on the front end with by default a border AND its own sub element, each displayed element is a link to access itself.

Here like an above, the content is the categories listing (Shoes and Computer) too.

Here, we click on the sub element "Shoes".

Content on front end

Menus Item Options

  • HikaShop default menus

    In this chapter, we will discover how to deal with HikaShop default item menu, they will allow you to display quickly and easily all most common HikaShop content.

    Let's see this by taking example of one of them : "Categories listing", as said above, this is a default Menus Item and so it will automatically display your created Categories on the front end in this case.

    Note : The HikaShop default menu item are automatically created when you install HikaShop. They are define by default with minimum parameters, that's why just publish them can be enough.

    And so, all works in the same way if you published, "Products listing" Menus Items and of course if you have created products or categories...

    Let's start to reach the "Menu principal".

    Content on front end

    On this screen, you can see all Menu Items, here : "Accueil", "Categories listing" and "Products listing".

    Note : "Menus" and "Menus Items" are a Joomla! Menu to switch between them, just click it.

    Content on front end

    Note : Menus aren't display on the front end, it's just a structural link, whereas Menus Item are display on the front end, see the screenshot below which show you the Menus Items.

    Content on front end

    In this screen parameter, you can change almost everything about your selected Menu Item AND all elements inside itself.

    Content on front end

    Note : You can learn a lot more about all these parameters here

    Let's just make an simple example : and so click on "Categories Options".

    Content on front end

    We will take time to explain what we see here :

    • A new tab is displayed just below the previous, which able you to reach options for different display type among Div, List and Inherit.

      Content on front end

    • Here by default we arrived in Div options.

      You can see different sub elements, grouped by their kind of effects.

      Content on front end

    And now, we will change one of this parameters, let's focus on this part : "Items".

    Content on front end

    Just by clicking on this little square, like on the second picture, you will create a column type display.

    Content on front end

    As usual, don't forget to save!

    Content on front end

    Results : In front end.

    With this change in the "Items" part, your products are now displayed in column.

    Content on front end

    Let's discover other parameters and his effect :

    For example to only displayed categories image (without title).

    In this part : "Item Layout".

    Content on front end

    In the Item Layout part, click on "Layout type".

    Content on front end

    And define, on "Image" instead of "Image and title".

    Content on front end

    As usual, don't forget to save.

    Content on front end

    Results : Let's see the differences on the front end with this last change :

    Content on front end

    As expected, the title isn't displayed any more.

    Last example with an other HikaShop default Menus item the "Products listing".

    Like before, to reach Products listing options, go to "Menus" -> "Menu principal".

    Content on front end

    But this time select "Products listing".

    Content on front end

    Go in "Products options".

    Content on front end

    Focus on "Data display" part.

    Content on front end

    We while change, "Sub elements filter"-> "Grouped by category" .

    This option define how to filter your elements (here : your products).

    Content on front end

    As usual, don't forget to save!

    Content on front end

    Results :

    Content on front end

    Now, your Products are displayed through their categories, and title categories is added.

  • Create your own menus

    In this part, we will create a new Item Menu from "nothing", that will be useful if you want to create a new kind of menu, meaning different from HikaShop installed menu items.

    Note : If you just need to have only classical Menu, we advice you to go, here.

    First, go to Menu Principal -> Add New Menu Item.

    Content on front end

    Type your Menu Title and define your Menu Item Type by clicking on Select.

    Content on front end

    A new pop up window will be display with all your Menu Item Type grouped by different categories.

    Here, for example select HikaShop categories.

    Content on front end

    And you will see all Hikashop Menu Item Type, and so select here for example Products listing.

    "Products listing"

    Content on front end

    In this case, your new item menu will display by default ALL your products.

    After add the Menu Item Type, you will notice that the Link will be automatically created in Link input (1).

    AND new tab called "Products options" have appear after add the Menu Item Type, just beside tab "Details" (2).

    Content on front end

    Note : Don't be surprised it this configuration page is different in some.

    Options aren't displayed if their is no logical link with, more precisely if you choose another a different Item Type some options won't be required.

    Just below the link, an option called Target Window able you to define how the link will works.

    Content on front end

    Target Window :

    • Parent : To display in the same navigator window.
    • New window with navigation : To display in an other navigator window AND with Navigation.
    • New window without navigation : To display in an other navigator window AND without Navigation.

    And Template Style which allow you to define, maybe a different template just for this page.

    Now, click on "Products options".

    Content on front end

    You will see your Item Menu HikaShop options.

    Note : You can learn a lot more about all these options here

    Content on front end

    Focus on "Data display" part.

    Content on front end

    We while change, "Sub elements filter"-> "All sub elements" .

    Content on front end

    As usual, don't forget to save!

    Content on front end

    Results : Like expected all your products is display after clicking on your new menu item, here "Test Menu".

    Content on front end

    Maybe, you have already understand than like this you can create almost everything, let's make an other quick example for create a customer account page :

    Go to Menu Principal -> Add New Menu Item.

    Content on front end

    Define your title, for thios example : Your account, and choose your "Menu Item Type".

    Content on front end

    select HikaShop categories.

    Content on front end

    And select "Registration form".

    Content on front end

    As usual, don't forget to save!

    Content on front end

    View of this page on the front end : Your user can now manage their own account just by clicking on "Your account".

    Content on front end

  • Menus options Index

  • Note guide :

    Button and Inherit :

    Here, you have a button switch on "Inherit", and you can note that, here the "Yes" button is darker grey than "No" one.

    Content on front end

    It means is that the "Add to cart" parameter inherit the "Yes" value from higher hierarchy element.

    Namebox system :

    The aim is to pick among different elements maybe grouped by categories, and so link or to define, which Category listing, which Products listing, or Brand listing etc etc will be selected.

    Content on front end

    Here, in this example, we select IN the product category the computer product category.

  • Item Menu Tabs :

    We will start from this page, it's the first you see when you reach Menu options.

    Content on front end

    You can see here, different tab to navigate through different options, and so just click to access all menu options.

    Content on front end

    Note : Take care about one point, these tab pages collect parameters from Joomla! and so you can learn all about these options by reaching Joomla! help like this :

    Content on front end

  • Zoom on Products options tab

    Let's talk about the Products options, these option is reach by clicking on this tab.

    Content on front end

    New tabs will be displayed just below the next one.

    Content on front end

    These tabs enable you to select between the different display modes.

    Content on front end

    Content on front end

    Note : The Products options screen is dynamic and options will be displayed/hidden based on other selected options so that only the relevant ones are displayed to you.

    This preview below shows the different views for "Div", "Table" and "List".

    Content on front end

  • Products option tab

    Here, you will find options that enable you to define the way your products are displayed in your Item Menu listing.

    This page is organized with several parts :


    • Items
    • Item Layout
    • Item Box configuration
    • Data display
    • Product data display
    • Product features display


  • Items

    Content on front end

    The Items part is different based on whether you selected "Div", "Table" or "List".

    Note : Inherit, take parameters from an higher hierarchy and send this parameters in sub element.

    Content on front end

    This can be configure just by clicking on it to define the way to display the menu, let's make an example with the Div version.

    Just by clicking on this little square, like on the second picture, you will create a column type display.

    Content on front end

    As usual, don't forget to save!

    Content on front end

  • UL settings



    Content on front end

    • UL class name :

      Type here your UL class you want add to your listing.

  • Item Layout



    Content on front end

    • Layout type : Choose among different options, the way to display the different information of each element and which information will be displayed. You wil find options like, Image, Image and title, Image and description etc...
    • Image width : Define the image width by typing directly a number only, please note that this dimension use the pixel unit.
    • Image height : Same idea than above but for your image height.
    • Pane height : Set here the height of the overflowing panel with the product name/price which you're using the "pane" layout type.
    • Text centered : Set it to yes if you want the text inside each item box to be centered.
  • Item Box configuration :



    Content on front end

    • Background color : The color of the background of each item box.
    • Margin : The margin of the each item box.
    • Border : Display or not a border around your item. The thumbnail option will use the "thumbnails" system of bootstrap in order to add the borders.
    • Rounded corners : Set it to yes if you want each item box to have rounded corners. With the thumbnail borders, the corners and always rounded regardless of what you put here.
  • Data display


    Content on front end

    • Show image : Show the image of the main category at the top of the listing.
    • Show description : Show the description of the main category at the top of the listing.
    • Main category : Use this field to select which product category will be used in your menu item. The elements displayed in it will be the children of that category.

      Content on front end



    • Ordering field : You can select a field on which the products will be ordered. By default, the products will be ordered using the ordering field which enables you to set a specific order of display between all the products directly linked to a category. You can configure that ordering by changing the "all sub elmenets" dropdown of the products listing to "direct sub elements" and then use the input box of each product on the listing to change the ordering of the products.
    • Ordering direction : You can set a direction for the ordering. For example, if you are loading categories based on their category_created column, if you set the direction to ascending, you will get the products created first to be displayed first in the listing, whereas if you set the direction to descending, you will get the latest products displayed first.
    • Random items : If you want, you can have your products randomly selected among all the products. That is useful when you have more items possible than what you are displaying. This will first fetch all the ids of the possible products, select randomly some ids based on the number of items to be displayed, and then retrieve their full data.
    • Sub elements filter : For categories, you can choose to only display direct sub categories of the current category or all sub categories regardless of their depth. For products, you choose to only display products in the current category or in all the sub categories of the current category regardless of their depth.
    • Use the menu name as title : Set it to yes if you want use menu name as title of the pages of the listing. Otherwise, it will use the name of the main category as title.
  • Product data display



    Content on front end



    • Out of stock : Select "Yes" if you want display the products with a stock/quantity of 0 on your Menu Item.
    • Recently viewed : For product listings, this option will make it so that only the products that you already saw recently will be displayed. In most case, you want to keep that option turned off.
    • Link to detail page : If activated, each element of the listing will be clikable so that you can access its own page.
    • Display price : You can (de)activate the display of the prices alltogether on the listing with that option.
    • Which price : When you have several prices in the same currency for the same product, the system needs to decide what to display. That will be the case for prices based on the quantity. Show you will either be able to display the lowest of all the prices, or display the price for buying only one item, or the lowest and highest prices as a range of prices.
    • Show taxed prices : This option enables you to display either the prices without taxes, or the prices with taxes, or both.
    • Original currency : Based on how you configured your store, HikaShop might have to convert prices dynamically between the different currencies. When doing so, it can add the display of the original price next to the converted price.
    • Discount : You can either display the prices with the discounts applied, with either, the dicount amount or the price before the discount crossed.
  • Product features display



    Content on front end

    • Add to cart : Enable or disable the add to cart button for the products of this listing.
    • Add to wishlist : Enable or disable the add to wishlist button for the products of this listing.
    • Quantity field : Display or not the quantity input box next to the add to cart buttons.
    • Vote : Enable or disable the votes for the products displayed on this listing.
    • Custom item fields : Choose if you want to display or not the item custom fields on the listing. If the option is turned off and the product has custom item fields configured for it, the add to cart button will be replaced by a "choose options" button in order to access the product page.
    • Filters : Display or not the filters at the top of the page. Filters can also be displayed with a HikaShop Filters module that you can configure via the Joomla modules manager.
    • Badge : Display or not the badges on the images of your product elements.
  • Carousel options & Additional carousel options

    Note : Be aware that the carousel is only available on HikaShop Business.

    Content on front end

    Carousel options :

    You can learn a lot about this HikaShop feature on our demo website.

    Note : Please, beware that right now the HikaShop carousel isn't responsive.

Modules Options

  • HikaShop and Joomla! default modules

    Like HikaShop default menus and menus items, Joomla! has its own default modules, plus when you install HikaShop some HikaShop default modules are created.

    To reach them, go to "Extension" -> "Modules" .

    Content on front end

    Now, you can see all modules, published and unpublished.

    Note : Here, you will find different module types, some from Joomla! and other from HikaShop. And so, to understand how each module belongs to Joomla! or Hikashop, juste havea look on "Type" column.

    Content on front end

    We will discover a classic example of an HikaShop default module : the HikaShop Cart Module, so first, look for it in the modules listing and click on it.

    Content on front end

    Published it.

    Content on front end

    And save.

    Content on front end

    Note : You can directly publish modules by clicking here :

    Content on front end

    And now, go to the front end to see your cart module.

    Content on front end

    And now, you have a Cart module displayed on the side of the website.

    We will discover some parameters of the HikaShop Cart Module.

    For this, click on "Hikashop Options" tab.

    Content on front end

    We will add some elements to your cart module.

    Content on front end

    1 : click "Yes" to "Proceed button" and 2 : click "Yes" on "Delete button".

    Content on front end

    As always, don't forget to save!

    Content on front end

    Result on the front end :

    Content on front end

    Two buttons are now added, one to delete directly a product from the cart, and the other to proceed to the checkout.

    Let's see an other kind of effect to apply on your cart module.

    Content on front end

    Note : Please beware than we reset previous settings. Here, we start from the default parameters.

    Go on "Mini cart" and click on "Yes" and save.

    Content on front end

    Note : When you click on "Yes" , you'll see many options disappear as they are not relevant to the mini cart mode.

    Result :

    Before :

    Content on front end

    After :

    Content on front end

  • Create your own modules

    Here, we will create our own module :

    Go to "Extension" -> "Modules" .

    Content on front end

    Now, to create a new module click on "New".

    Content on front end

    You will see all the possible Module Types, and so, for this example, we will create a module to display the products from a "best sales" category.

    Content on front end

    So, select for this purpose "HikaShop Content Module".

    Content on front end

    You then reach a settings page to configure your new module.

    Content on front end

    Let's start by enter a name for your new module like in our example : "Our best products".

    Content on front end

    Here, we define the position on the front end right side (poistion-7).

    Content on front end

    Now, we will select the content to display in this new module, so click on "HikaShop Options".

    Content on front end

    You will reach a page that will allow you to define how display your content module.

    Content on front end

    Note : Most of the parameters there are similar to the products/categories listing menu items.

    To learn more about these parameters here.

    First, in "Data Display" -> "Main category" click to define the category to display, here "best sales".

    Content on front end

    And in the Items part, change the way the products will be displayed on the module.

    Content on front end

    And Save all your settings.

    Content on front end

    Result on the front end :

    Content on front end

    Let's go further and let's display only the products image. Go in the Item Layout part, and change the Layout type to Image.

    Content on front end

    After, go in the "Product data display" part and in the Product features display" part, change following parameters :

    • In the "Product data display" part, switch "Display price" to "No".
    • And in the "Product features display" part, switch "Vote" to "No".

    Content on front end

    As usual, save all your settings.

    Content on front end

    Result:

    Content on front end

    There are no more title, price or vote stars, only the image remains for each product.

  • Modules options Index

    The modules options are roughly the same as the options for the menu items so we invite you to check the Menus options Index section.