[Skip to main content](#vessel-content)

# Tutorials

##  [ Adding products in Joomla's articles ](/support/documentation/137-hikashop-product-insert)

Details    Written by: Majri    Category: [Tutorials](/support/documentation/hikashop/tutorials)     Published: 20 August 2012     Hits: 49396

| - [Description](#description) - [Enable / disable HikaShop product insert insertion and translation plugins](#enable) - [Inserting a product TAG](#insert) - [Different ways of setting up a product TAG](#ways) - [Conditional content tags](#conditional) - [Plugin settings](#settings) - [Customizing the display further](#custom) |  |
|---|---|

### <a name="description"></a>Description

Why products insertion/translation plugins?

HikaShop product insertion/translation plugins are functionalities which will allow you to display your HikaShop products through your Joomla articles. By this way, you'll be able to create Joomla articles about your "favorite/most popular/.." products and easily display them.

HikaShop product insertion: This plugin will be used through your Article creation page ("*Content -&gt; Articles -&gt; 'Your article'*") with the "Product" button. This "Product" button enables you to add "Product(s) TAG" to your article.

HikaShop product translation: This plugin will be automatically used through your front-end and will translate your "product(s) TAG".

This tutorial will explain how to add a HikaShop product TAG to Joomla articles and the different ways to display them.

First, we will see how to create and add them through the HikaShop product insertion plugin and how they can be translated by the HikaShop product translation plugin.

### <a name="enable"></a>Enable / disable HikaShop product insert insertion and translation plugins

By default, these plugins are disabled.

If you want to enable them, you'll have to do it through "*System -&gt; Manage -&gt; Plugins*" (or "*Extensions -&gt; Plugins*" on older Joomla versions).

![](/images/stories/pinsert-1.png)

### <a name="insert"></a>Inserting a product TAG

Through your Joomla article's configuration screen, you'll be able to add products through the Product button:

![](/images/stories/pinsert-2.png)

*Product insert button*

Then, you'll find this configuration screen showing your products and some options:

![](/images/stories/pinsert-3.png)

**Name:** Allows you to display the product's name (uses the `name` tag option)

**Description:** Allows you to display the product's description (uses the `description` tag option)

**Cart:** Allows you to display an add to cart button (uses the `cart` tag option)

**Quantity field:** Allows you to display a quantity field next to the add to cart button (uses the `quantityfield` tag option). Note: The quantity field won't be displayed if your products have variants.

**Image:** Allows you to display the product's image (uses the `picture` tag option)

**Link to the product page:** Allows you to add a link to the product page (uses the `link` tag option)

**Item box border:** Allows you to display a border around the products (uses the `border` tag option)

**Badge:** Allows you to display product badges on the product image (uses the `badge` tag option; requires the picture option to be enabled)

**Menu ID:** If you enter the **id** of a **HikaShop menu item**, the system will use the alias of that menu item instead of "**component/hikashop**" in the URL link (uses the `menuid:X` tag option where X is the menu item ID).

**Display price:** Allows you to display the product's price. Use `pricetax1` to show prices with tax only, `pricetax2` to show prices without tax only, or just `price` to use the HikaShop default setting.

**Show discounted price:** If HikaShop needs to apply discounts to the prices displayed, it can also show the price before the discount was applied as an incentive for your customers to buy the products or the discount amount

**Insert:** Will add the product TAG to your Joomla article editor

#### Quick Reference: Tag Options

| Option | Tag Syntax | Description |
|---|---|---|
| Name | `name` | Display product name |
| Description | `description` | Display product description |
| Cart button | `cart` | Display add to cart button |
| Quantity field | `quantityfield` | Display quantity input field |
| Image | `picture` | Display product image |
| Link | `link` | Link product elements to product page |
| Border | `border` | Display border around product |
| Badge | `badge` | Display product badges |
| Menu ID | `menuid:X` | Use menu item X for URLs |
| Price with tax | `pricetax1` | Show price with tax only |
| Price without tax | `pricetax2` | Show price without tax only |
| Price (default) | `price` | Use HikaShop default tax setting |
| Show discount | `pricedis1` | Show original price |
| Show discount amount | `pricedis2` | Show discount amount |
| Show both | `pricedis3` | Use HikaShop default setting |

**Tip:** You can display multiple products in a single tag by separating product IDs with the pipe character: `<div class="hikashop_inserted_product_1" id="hikashop_inserted_product_1" style="text-align:center;">				<span class="hikashop_product_price_full"><span class="hikashop_product_price hikashop_product_price_0">€ 60,00</span> <span class="hikashop_product_price_per_unit"></span></span>									<span class="hikashop_product_name">				HikaShop Essential			</span>			</div>`

Here is the product TAG that will be displayed:

![](/images/stories/pinsert-4.png)

### <a name="ways"></a>Different ways of setting up a product TAG

Here are different examples of product TAG configurations:

- **Product tag example 1:** `<div class="hikashop_inserted_product_1" id="hikashop_inserted_product_1" style="text-align:center;">				<span class="hikashop_product_price_full"><span class="hikashop_product_price hikashop_product_price_0">€ 60,00</span> <span class="hikashop_product_price_per_unit"></span></span>									<span class="hikashop_product_name">				HikaShop Essential			</span>			</div>`

![](/images/stories/pinsert-5.jpg)

- **Product tag example 2:** `<div class="hikashop_inserted_product_1" id="hikashop_inserted_product_1" style="text-align:center;">				<span class="hikashop_product_price_full"><span class="hikashop_product_price hikashop_product_price_0">€ 60,00</span> <span class="hikashop_product_price_per_unit"></span></span>									<span class="hikashop_product_name">				HikaShop Essential			</span>												<span class="hikashop_add_to_cart">			<span class="hikashop_product_stock_count"></span>	<form action="/component/hikashop/product/updatecart/add-1/cid-1?Itemid=253" class="" enctype="multipart/form-data" method="post" name="hikashop_product_form_1_hikashop_inserted_product_1">	<div class="hikashop_quantity_form">		<div class="hikashop_product_quantity_div hikashop_product_quantity_add_to_cart_div"></div>	</div><input name="add" type="hidden" value="1"></input>	<a class="hikabtn hikacart" data-addto-class="add_in_progress" data-addto-div="hikashop_inserted_product_1" data-addtocart="1" href="/component/hikashop/product/updatecart/add-1/cid-1?Itemid=253" id="hikashop_product_quantity_field_1_add_to_cart_button" onclick="if(window.hikashop.addToCart) { return window.hikashop.addToCart(this); }" rel="nofollow"><span>Add to cart</span></a>	</form>			</span>			</div>`

![](/images/stories/pinsert-6.jpg)

*The quantity field won't be displayed if your products have variants.*

- **Product tag example 3:** `<div class="hikashop_inserted_product_1" id="hikashop_inserted_product_1" style="text-align:center;">				<span class="hikashop_product_price_full"><span class="hikashop_product_price hikashop_product_price_0">€ 60,00</span> <span class="hikashop_product_price_per_unit"></span></span>									<span class="hikashop_product_name">									<a href="https://www.hikashop.com/hikashop-essential">				HikaShop Essential					</a>							</span>												<span class="hikashop_add_to_cart">			<span class="hikashop_product_stock_count"></span>	<form action="/component/hikashop/product/updatecart/add-1/cid-1?Itemid=253" class="" enctype="multipart/form-data" method="post" name="hikashop_product_form_1_hikashop_inserted_product_1">	<div class="hikashop_quantity_form">		<div class="hikashop_product_quantity_div hikashop_product_quantity_add_to_cart_div"></div>	</div><input name="add" type="hidden" value="1"></input>	<a class="hikabtn hikacart" data-addto-class="add_in_progress" data-addto-div="hikashop_inserted_product_1" data-addtocart="1" href="/component/hikashop/product/updatecart/add-1/cid-1?Itemid=253" id="hikashop_product_quantity_field_2_add_to_cart_button" onclick="if(window.hikashop.addToCart) { return window.hikashop.addToCart(this); }" rel="nofollow"><span>Add to cart</span></a>	</form>			</span>			</div>`

![](/images/stories/pinsert-7.jpg)

- **Product tag example 4:** `<div class="hikashop_inserted_product_1" id="hikashop_inserted_product_1" style="text-align:center;">						<div class="hikashop_product_image" style="position:relative;text-align:center;clear:both;width:200px;margin:auto;">										<a href="https://www.hikashop.com/hikashop-essential" title="HikaShop Essential">				<img alt="" class="hikashop_product_tag_image" src="/media/com_hikashop/upload/thumbnails/100x100/hikashop-essential.png" title=""></img>					</a>							</div>							<span class="hikashop_product_price_full"><span class="hikashop_product_price hikashop_product_price_0">€ 60,00</span> <span class="hikashop_product_price_per_unit"></span></span>									<span class="hikashop_product_name">									<a href="https://www.hikashop.com/hikashop-essential">				HikaShop Essential					</a>							</span>									<span class="hikashop_product_description"><p style="top: -150px;    left: 300px;">	<strong>HikaShop Essential </strong>includes all the features from <strong>HikaShop Starter</strong>.	* You can <a href="/index.php/extensions/compare-versions">compare all our versions here</a>.<br></br> 	* You can <a href="/index.php/extensions/upgrade-my-version.html">upgrade your version here</a>.</p><div class="hk-row-fluid">	<div class="hkc-md-6" style="    padding-left: 0px;"><div class="hk-compare-block">	<div class="panel panel-default">		<div class="panel-heading">			<h4>Features</h4>		</div>		<ul class="list-group">			<li class="list-group-item" style="background-color: #f8f8f8;padding: 3px;">				<img alt="products and sales" src="/images/productpage/icon_sales.png" style="padding-right: 10px;"></img>				<strong>PRODUCTS AND SALES</strong>			</li>			<li class="list-group-item">Custom fields for products and user information</li>			<li class="list-group-item">Customer invoice display</li>			<li class="list-group-item">Multilingual edition of the content</li>			<li class="list-group-item">Possibility of payment of an order later on</li>			<li class="list-group-item">Checkout without registration</li>			<li class="list-group-item">Contact us form on product pages</li>			<li class="list-group-item">Options for products</li>			<li class="list-group-item">Waiting list for products out of stock</li>			<li class="list-group-item" style="background-color: #f8f8f8;padding: 3px;">				<img alt="layout" src="/images/productpage/icon_layout.png" style="padding-right: 10px;"></img>				<strong>LAYOUT</strong>			</li>			<li class="list-group-item">Powerful dashboard customization</li>			<li class="list-group-item">More widgets on the dashboard</li>			<li class="list-group-item">Configurable products purchasing restrictions <br></br>(per period, per weight, per product categories, etc)</li>			<li class="list-group-item">Additional product listings item layouts</li>			<li class="list-group-item">Customization of order number format</li>			<li class="list-group-item" style="background-color: #f8f8f8;padding: 3px;">				<img alt="marketing tools" src="/images/productpage/icon_marketing.png" style="padding-right: 10px;"></img>				<strong>MARKETING TOOLS</strong>			</li>			<li class="list-group-item">Google Products integration</li>			<li class="list-group-item">Restrictions on coupons and discounts</li>		</ul>	</div></div>	</div>	<div class="hkc-md-6" style="    padding-right: 0px;"><div class="hk-compare-block">	<div class="panel panel-default">		<div class="panel-heading">			<h4>Usage</h4>		</div>		<ul class="list-group">			<li class="list-group-item">HikaShop is compatible with every recent versions of Joomla and WordPress. 				<div>					<span class="label" style="background-color:#eab31d;vertical-align:top">Joomla 3.x</span> 					<span class="label" style="background-color:#65ad82;vertical-align:top">Joomla 4.x</span> 					<span class="label" style="background-color:#3a87ad;vertical-align:top">Joomla 5.x</span> 					<span class="label" style="background-color:#ab3a3a;vertical-align:top">Joomla 6.x</span> 					<span class="label" style="background-color:#21759b;vertical-align:top">WordPress</span> 				</div>			</li>			<li class="list-group-item">GPL v3</li>			<li class="list-group-item">No limit of time</li>			<li class="list-group-item">1 year free updates</li>			<li class="list-group-item">1 year free HikaShop support for one website</li>			<li class="list-group-item">1 year web cron service for one website</li>			<li class="list-group-item">HikaShop only supports MySQL (no postGreSQL or Oracle or MSSQL support)</li>			<li class="list-group-item">Installation guaranteed! <small>If you have any problems installing HikaShop, we'll do it for you.</small></li>			<li class="list-group-item">30-day money-back guarantee</li>			<li class="list-group-item">Support and access to updates can be extended for 40€/year</li>		</ul>	</div>	<div class="panel panel-default" style="background-color: #fff;padding: 5px 5%;">		<div class="thumbnail">			<a href="/images/productpage/lightbox_essential/dashboard.png" rel="shadowbox[hikashop]" title="HikaShop dashboard"> 				<img alt="Powerful statistics" src="/images/productpage/lightbox_essential2/thumb_dashboard.png"></img>			</a>		</div>		<div class="thumbnail">				<a href="/images/productpage/lightbox_essential/editproduct.png" rel="shadowbox[hikashop]" title="Product configuration"> 					<img alt="Many effects" src="/images/productpage/lightbox_essential2/thumb_editproduct.png"></img>				</a>		</div>		<div class="thumbnail">			<a href="/images/productpage/lightbox_essential/checkout.png" rel="shadowbox[hikashop]" title="Checkout"> 				<img alt="Filters" src="/images/productpage/lightbox_essential2/thumb_checkout.png"></img>			</a>		</div>		<div class="thumbnail">			<a href="/images/productpage/lightbox_essential/layout.png" rel="shadowbox[hikashop]" title="Different layout">				<img alt="Affiliate system" src="/images/productpage/lightbox_essential2/thumb_layout.png"></img>			</a>		</div>		<div class="thumbnail">			<a href="/images/productpage/lightbox_essential/productpage.png" rel="shadowbox[hikashop]" title="Product listing and modules"> 				<img alt="Checkout workflow" src="/images/productpage/lightbox_essential2/thumb_productpage.png"></img>			</a>		</div>		<div class="thumbnail">			<a href="/images/productpage/lightbox_essential/multilingue.png" rel="shadowbox[hikashop]" title="Multilingue edition">				<img alt="Checkout workflow" src="/images/productpage/lightbox_essential2/thumb_multilingue.png"></img>			</a>		</div>	</div></div>	</div></div></span>												<span class="hikashop_add_to_cart">			<span class="hikashop_product_stock_count"></span>	<form action="/component/hikashop/product/updatecart/add-1/cid-1?Itemid=253" class="" enctype="multipart/form-data" method="post" name="hikashop_product_form_1_hikashop_inserted_product_1">	<div class="hikashop_quantity_form">		<div class="hikashop_product_quantity_div hikashop_product_quantity_add_to_cart_div"></div>	</div><input name="add" type="hidden" value="1"></input>	<a class="hikabtn hikacart" data-addto-class="add_in_progress" data-addto-div="hikashop_inserted_product_1" data-addtocart="1" href="/component/hikashop/product/updatecart/add-1/cid-1?Itemid=253" id="hikashop_product_quantity_field_3_add_to_cart_button" onclick="if(window.hikashop.addToCart) { return window.hikashop.addToCart(this); }" rel="nofollow"><span>Add to cart</span></a>	</form>			</span>			</div>`

![](/images/stories/pinsert-8.jpg)

### <a name="conditional"></a>Conditional content tags

In addition to the product insertion tags, the plugin also provides conditional content tags that allow you to show or hide content based on the customer's purchase history or current cart contents.

**Show/Hide based on purchase history:**

- - Shows content only if the user has bought any product
- - Shows content only if the user has bought a specific product (by code, name, or ID)
- `Content` - Shows content only if the user has never bought anything
- `Content` - Shows content only if the user has not bought a specific product
- `Content` - Hides content if the user has bought any product
- - Hides content if the user has not bought a specific product

**Show/Hide based on cart total:**

- - Shows content only if the cart total (with shipping) is at least 50
- `Content` - Shows content only if the cart total (with shipping) is at most 100
- - Shows content only if the products total (without shipping) is at least 30
- `Content` - Shows content only if the products total (without shipping) is at most 200

**Displaying the difference:**

You can use `{min}` or `{max}` placeholders inside the conditional content to display the formatted difference between the threshold and the current cart total:

-
- `You can add up to € 500,00 more before reaching the limit.`

**Combining conditions:**

Multiple conditions can be combined in a single tag (they work as AND conditions):

### <a name="settings"></a>Plugin settings

The HikaShop Product TAG translation plugin has configuration options available in the Joomla plugin manager (*System -&gt; Manage -&gt; Plugins -&gt; System - HikaShop Product TAG translation*):

**Menu:** A global default menu item ID to use for product links. This can be overridden per-tag using the `menuid:X` option.

**Load HikaShop on all frontend pages:** When enabled, HikaShop's JavaScript and plugins will be loaded on all frontend pages. This is useful if you want cart notification popups and other HikaShop features to work on pages where products are inserted.

**Order statuses for bought tag:** A comma-separated list of order statuses that count as "bought" for the conditional {hkshow bought} and {hkhide bought} tags. Default is "confirmed,shipped".

### <a name="custom"></a>Customizing the display further

If you want to go further in the customization of the inserted products display, you should copy the file plugins/system/hikashopproductinsert/hikashopproductinsert\_view.php to the folder templates/YOUR\_TEMPLATE/system/ via FTP and then edit the copied file. That way, your modifications won't be removed when you update HikaShop.

#### Alternative TAG syntax

Both of these syntaxes are supported and produce the same result:

- `<div class="hikashop_inserted_product_1" id="hikashop_inserted_product_1" style="text-align:center;">				<span class="hikashop_product_price_full"><span class="hikashop_product_price hikashop_product_price_0">€ 60,00</span> <span class="hikashop_product_price_per_unit"></span></span>									<span class="hikashop_product_name">				HikaShop Essential			</span>			</div>` - Opening and closing tags
- `<div class="hikashop_inserted_product_1" id="hikashop_inserted_product_1" style="text-align:center;">				<span class="hikashop_product_price_full"><span class="hikashop_product_price hikashop_product_price_0">€ 60,00</span> <span class="hikashop_product_price_per_unit"></span></span>									<span class="hikashop_product_name">				HikaShop Essential			</span>												<span class="hikashop_add_to_cart">			<span class="hikashop_product_stock_count"></span>	<form action="/component/hikashop/product/updatecart/add-1/cid-1?Itemid=253" class="" enctype="multipart/form-data" method="post" name="hikashop_product_form_1_hikashop_inserted_product_1">	<div class="hikashop_quantity_form">		<div class="hikashop_product_quantity_div hikashop_product_quantity_add_to_cart_div"></div>	</div><input name="add" type="hidden" value="1"></input>	<a class="hikabtn hikacart" data-addto-class="add_in_progress" data-addto-div="hikashop_inserted_product_1" data-addtocart="1" href="/component/hikashop/product/updatecart/add-1/cid-1?Itemid=253" id="hikashop_product_quantity_field_1_add_to_cart_button" onclick="if(window.hikashop.addToCart) { return window.hikashop.addToCart(this); }" rel="nofollow"><span>Add to cart</span></a>	</form>			</span>			</div>` - Self-closing style (shorter)

##  [ Filters listing ](/support/documentation/101-hikashop-filter-listing)

Details    Written by: Administrator    Category: [Tutorials](/support/documentation/hikashop/tutorials)     Published: 06 October 2011     Hits: 35078

| - [Description](#description) - [Toolbar](#toolbar) - [Column Headers](#columns) | ![Filters Management](/images/icon_doc/filter_listing_small.png) |
|---|---|

### <a name="description"></a>Description

This screen enables you to manage all your filters. In HikaShop, you will be able to create filters which will be displayed on products listings and potentially in the HikaShop filter module. That way, when you have lots of products and that the user only wants to see products with specific attributes, he can choose some filters and reduce the products listing to only the ones he is interested in. For example, in a computer shop he could select the quantity of RAM, and/or which kind of processor he would like in his computer.

Here is an example of what a simple filtering area can look like:

![filters example](/images/icon_doc/filter_type.png)

This screen can be accessed via the menu Display-&gt;Filters.

This feature is only available in the business edition of HikaShop.

You can also find additional display options for filters in the Display tab of the configuration of HikaShop.

And Finally, you can also display your filters as a module by configuring the HikaShop Filter module via the joomla module manager. In your filter module, don't forget to set the id of a HikaShop products listing menu id (there is already one created by default by HikaShop and called "products listing") in the "menu" option. And if you want to hide the filters at the top of the products listing, you can turn off the display filter option of your products listing menu item on the options page of your menu item that you can find via the Joomla menu manager when you edit the menu item.

### <a name="toolbar"></a>Toolbar

![Filters Toolbar](/images/icon_doc/limit_listing_toolbar.png)

- **New** : Enables you to create a new filter.
- **Edit** : Select a filter and then click on this button in order to edit it.
- **Delete** : Select one or several filters and click on this button in order to completely delete them.
- **Help** : This button enables you to turn ON/OFF the help section. This screen will appear or disappear.
- **Dashboard** : You can go back to the control panel using this button.

### <a name="columns"></a>Column Headers

![Filters Columns](/images/icon_doc/filter_listing_columns.png)

- **\#** : An indexing number automatically assigned for ease of reference.
- **Checkbox** : Check this box to select one or more items. To select all items, check the box in the column heading. After one or more boxes are checked, click on the delete button in order to delete the selected filters.
- **Name** : The name of the filter.
- **Apply on**: The type of information managed by your filter, like Custom Fields, Price, Category, Characteristics...
- **Type**: The type of the filter. That will enable you to decide how you want to show your filter (as a dropdown, or as an input box or as a text area, etc). Based on that, you might have additional options below the **Apply on** option.
- **Order** : The order will define the position of filters on forms.
- **Published** : If a filter is published it means that it will be used by the system, otherwise, it won't be taken into account.
- **ID** : This column indicates the ID of the filter.

##  [ Your first test sale ](/support/documentation/68-hikashop-first-test-sale)

Details    Written by: Administrator    Category: [Tutorials](/support/documentation/hikashop/tutorials)     Published: 06 October 2010     Hits: 56871

| - [Description](#description) - [Add a product](#product) - [Add a menu](#menu) - [Payment](#payment) - [Shipping](#shipping) - [Checkout](#checkout) | ![](/images/tutorials/tutorials_first_order.png) |
|---|---|

### <a name="description"></a>Description

This tutorial will explain you how to make your first order on your own store and have a feel of the HikaShop basic functionalities.

First, we will add a product to the store. Then, we will make it accessible on the front end with a Joomla menu. We will set a payment method and a shipping method and finally make an order.

### <a name="product"></a>Add a product

By default, a main product category already exists in HikaShop so if you're planning on selling only a few items, like we want to do in this tutorial, you don't need to add any category and you can directly start to add your products.

First, log in on the back-end and go to the menu Components-&gt;HikaShop-&gt;Products

![](/images/stories/tutorials/first_test_sale/first_test_sale_1.png)

Then, click on new to create a new product

![](/images/stories/tutorials/first_test_sale/first_test_sale_2.png)

You will have to write at least a name for your product. You can also write a description, add categories, related products, images, files, characteristics, etc

![](/images/stories/tutorials/first_test_sale/first_test_sale_3.png)

By default, the published currency is the euro. If you want to use others currencies please go to the currencies management screen ( HikaShop menu System-&gt;Currencies ) to do so.

Once you're done click on the save button.

### <a name="menu"></a>Add a menu

Now that you have your first product created, you can add a direct link to it via a Joomla menu on the front end.

Go to the menu "Menus" and click on one of your menu areas

Then, click on new to create a new menu

![](/images/stories/tutorials/first_test_sale/first_test_sale_5.png)

You will have to click on the menu Item Type HikaShop in order to display the list of menu types of HikaShop. Then, click on the Product "Product page" link.

![](/images/stories/tutorials/first_test_sale/first_test_sale_6.png)

You will be able to set standard Joomla options for the menu as well as select a product to display on the right part of the screen

![](/images/stories/tutorials/first_test_sale/first_test_sale_7.png)

You're done. If your menu area is already displayed on your front end, you should already see the new menu linking to your product. If you don't see it, you might need to purge your Joomla cache before seeing it.

### <a name="payment"></a>Payment

Now you need to configure at least one payment method so that you can display it on the checkout process when someone makes an order on your shop.

Go to the Component-&gt;HikaShop menu if you're not already in HikaShop and then go to the System-&gt;Payment methods HikaShop menu in order to access the payment management screen.

![](/images/stories/tutorials/first_test_sale/first_test_sale_8.png) ![](/images/stories/tutorials/first_test_sale/first_test_sale_9.png)

Once there you have to click on "New" in the toolbar and you should see a list of payment methods which are all unpublished. Publish one AND click on its name to edit its information. For the purpose of this tutorial we will use the payment method "bank transfer" which is easy to setup as it doesn't connect to any external payment system and thus doesn't require you to create an account on such system.

![](/images/stories/tutorials/first_test_sale/first_test_sale_10.png)

When you finish to change the default information, don't forget to enable the option "Publish" and please click on the save button. You're done with the configuration of your first payment method.

![](/images/stories/tutorials/first_test_sale/first_test_sale_11.png)

### <a name="shipping"></a>Shipping

Now you need to configure a shipping method so that you can display it on the checkout process when someone makes an order on your shop. If your products are virtual ( the weight of the products is 0), then shipping information won't be asked to the user.

Go to the Component-&gt;HikaShop menu if you're not already in HikaShop and then go to the System-&gt;Shipping methods HikaShop menu in order to access the shipping management screen.

![](/images/stories/tutorials/first_test_sale/first_test_sale_4.png) ![](/images/stories/tutorials/first_test_sale/first_test_sale_12.png)

Once there you have to click on "New" in the toolbar and you should see a list of shipping methods which are all unpublished. Publish one AND click on its name to edit its information.

![](/images/stories/tutorials/first_test_sale/first_test_sale_13.png)

On this screen, you can enter the information of one shipping method and then click on the save button. Our demo website provides an example of shipping methods you could use on your store.

![](/images/stories/tutorials/first_test_sale/first_test_sale_14.png)

You're done with the configuration of your first shipping method

### <a name="checkout"></a>Checkout

Now, you're ready to order your first product on your store !

Go to the front end and click on the menu you created. The product page will be displayed.

![](/images/stories/tutorials/first_test_sale/first_test_sale_15.png)

There, click on the "add to cart" button (provided that you product isn't free) which will redirect you to the first step of the checkout process unless you have the cart module displayed (in which case it might update the cart instead of directing you to the checkout based on your HikaShop configuration).

![](/images/stories/tutorials/first_test_sale/first_test_sale_16.png)

If you're not logged in, you will be asked to login or create an account. If you register, you will have to enter your address here as well which will make you skip next step.

![](/images/stories/tutorials/first_test_sale/first_test_sale_17.png)

Then, you will be asked to enter an address. You can click on the new button if you don't have one already and a popup will open asking you your address information.

![](/images/stories/tutorials/first_test_sale/first_test_sale_19.png)

Then, you will be able to choose the payment and shipping option.

![](/images/stories/tutorials/first_test_sale/first_test_sale_20.png)

Then, you will be able to finish your order and an information screen will be displayed explaining you how to make your bank transfer if you chose this payment method.

![Main menu](/images/stories/tutorials/first_test_sale/tuto_product_checkout_end.png)

You should receive an email shortly after with the detail of the order.

Note that this workflow of the checkout can be changed to suit your shop needs and that each view of the process can be completely customized, first by editing the CSS in the configuration page of HikaShop , or also by customizing the php code of each view (require some PHP knowledge).

##  [ Import ](/support/documentation/73-hikashop-import)

Details    Written by: Administrator    Category: [Tutorials](/support/documentation/hikashop/tutorials)     Published: 06 October 2010     Hits: 119109

| - [Description](#description) - [Import from another shop](#shops) - [Import from a CSV or from the text area](#csv)     - [General information about the CSV format](#general)     - [Column Mapping](#mapping)     - [Importing images and files](#image)     - [Related products](#related)     - [Product categories](#category)     - [Products with variants](#variant)     - [Products with translations](#trans)     - [Other import options](#otherinfo) - [Import orders](#orders) - [Import automatically from a CSV file](#cron) - [Shipping and payment methods](#shippingpayment) - [Third party migration services](#thirdparty) - [Generate products from a folder](#generate) | [![Import screen](/images/doc/hk/interface/import/import_show_small.png)](/images/doc/hk/interface/import/import_show_small.png) |
|---|---|

### <a name="description"></a>Description

The HikaShop import system allows you to:

- **Move your shop to HikaShop** from VirtueMart, WooCommerce, J2Store / J2Commerce, OpenCart, PrestaShop, Magento, Shopify, Wix, Squarespace, Shopware, Sylius, EC-CUBE or another HikaShop: catalog, customers, addresses, coupons and orders.
- **Import products and categories** from CSV files or by pasting data directly into a text area.
- **Import orders** from the backend orders listing.
- **Import shipping and payment methods** from CSV files.
- **Generate products automatically** from a folder of images or files (Business edition).
- **Automatically import/update products** via a cron-triggered CSV import (Essential and Business editions).

You can access the import screen from the HikaShop backend via **Products &gt; Import**.

### <a name="shops"></a>Import from another shop

HikaShop reads the database of another shop (or the files it exports) and creates its catalog, customers and orders in HikaShop, on Joomla or on WordPress. Choose the shop you are leaving to see its page: what is imported, the settings, screenshots and what to check afterwards.

[**VirtueMart**The Joomla shopping cart. Catalog, customers, orders and reviews.](/support/documentation/609-migrate-from-virtuemart-to-hikashop)[**WooCommerce**The WordPress shopping cart. Products, variations, customers and orders.](/support/documentation/611-migrate-from-woocommerce-to-hikashop)[**J2Store and J2Commerce**Joomla based carts. Options, custom fields and uploads included.](/support/documentation/601-migrate-from-j2store-or-j2commerce-to-hikashop)[**OpenCart**Catalog, customers, orders, coupons and downloads.](/support/documentation/603-migrate-from-opencart-to-hikashop)[**Magento**Magento 2 and Mage-OS: catalog with configurable options, customers, orders.](/support/documentation/602-migrate-from-magento-to-hikashop)[**PrestaShop**Catalog with combinations, customers, orders and coupons.](/support/documentation/604-migrate-from-prestashop-to-hikashop)[**Shopify**From the CSV files its admin exports: products, customers, orders.](/support/documentation/605-migrate-from-shopify-to-hikashop)[**Wix**From the product CSV file of Wix Stores: products, variants, images.](/support/documentation/610-migrate-from-wix-to-hikashop)[**Squarespace**From the product CSV file of its store: products, variants, images, old addresses.](/support/documentation/607-migrate-from-squarespace-to-hikashop)[**Shopware**Shopware 6: catalog with variants, customers with their password, orders.](/support/documentation/606-migrate-from-shopware-to-hikashop)[**Sylius**Products with variants, customers with their password, orders.](/support/documentation/608-migrate-from-sylius-to-hikashop)[**Another HikaShop**Between Joomla and WordPress, with the whole configuration.](/support/documentation/600-migrate-from-hikashop-to-hikashop)[**EC-CUBE**The Japanese shopping cart. Catalog, customers and orders.](/support/documentation/599-migrate-from-ec-cube-to-hikashop)

On the import page, open the **Import from another shop** tab, pick the shop in the list, tick what to import (taxes, catalog, customers, coupons, orders, downloads: orders also need the customers and the catalog), fill in the settings and start. The import runs on the page with its progress; a step which fails stops there and can be tried again or skipped. You can run it again later: what was already imported is recognised and left as it is.

[![The import is finished](/images/doc/hk/interface/import/shop_progress_done.png)](/images/doc/hk/interface/import/shop_progress_done.png)

The payment and shipping methods of the other shops are not moved (only the "HikaShop to HikaShop" import brings them): set them up in HikaShop. Developers can add a shop to the list with the `onHikashopImportSources` event, see the [developer documentation](/support/documentation/62-hikashop-developer-documentation).

### <a name="csv"></a>Import from a CSV or from the text area

[![Import screen](/images/doc/hk/interface/import/import_show_main.png)](/images/doc/hk/interface/import/import_show_main.png)

Each way to import is a tab of the import page, with its options and its own Import button below them. You can import data in two ways:

- **Import from CSV file**: upload a CSV or text file containing your data.
- **Import from text area**: copy and paste your data directly into the input box.

<a name="general"></a>

#### General information about the CSV format

The first line of your CSV file must contain the column names. These correspond to the database column names of the `#__hikashop_product` and `#__hikashop_price` tables (always in English). For example:

```
product_name,product_code,price_value
My Product,PROD001,29.99
```

**Key points:**

- HikaShop auto-detects the CSV separator (comma, semicolon, tab, pipe). No specific format is imposed.
- Multi-line field values (e.g. product descriptions) are supported when enclosed in double quotes.
- You only need one line per product. Do not split a product across multiple lines.
- For `price_currency_id`, you can use the currency code (e.g. "EUR") instead of the numeric ID. If omitted, the store's main currency is used.
- If `product_code` is not specified, it will be generated from `product_name`.
- Specify your file's character encoding so HikaShop can convert it to UTF-8. If unsure, leave it as "Unknown".

**Updating existing products:** set the option "Update products information if the product\_code already exists" to "Yes". HikaShop will match products by their `product_code` and update the fields present in your CSV.

**Tip:** if you are unsure about column names, upload a file with only the header line or enter random text in the text area and click Import. HikaShop will display the list of valid column names.

<a name="mapping"></a>

#### Column Mapping

If the columns in your CSV file do not match HikaShop's column names, a mapping interface will appear. This allows you to visually map your CSV headers to HikaShop fields, eliminating the need to rename columns in your file manually.

[![CSV column mapping](/images/blog/hikashop-6-3-0/CSV_import_column_mapping.png)](/images/blog/hikashop-6-3-0/CSV_import_column_mapping.png)

<a name="image"></a>

#### Importing images and files

To import images or files along with your products, first place them in the upload folder configured in **System &gt; Configuration &gt; Files**. Then add an `images` or `files` column to your CSV with the filenames separated by a secondary separator (different from your main CSV separator).

Examples:

```
product_name,images
My product,"image_front.jpg,image_back.jpg"
```

or:

```
product_name,images
My product,image_front.jpg;image_back.jpg
```

<a name="related"></a>

#### Related products

Add a `related` column with the `product_code` values of related products (they must already exist or appear earlier in the same CSV file):

```
product_code,product_name,related
my_product_1,My first product,""
my_product_2,My second product,""
my_product_3,My third product,"my_product_1,my_product_2"
```

<a name="category"></a>

#### Product categories

Use a `categories` column with category IDs or category namekeys:

```
product_code,product_name,categories
my_product_1,My first product,"2,13"
```

You can find category IDs in the category listing under the ID column.

To create a category tree automatically, enable "Create automatically missing categories" and use a `parent_category` column:

```
parent_category,categories
product category,main category 1;main category 2;main category 3
main category 1,sub category 1;sub category 2
```

You can also mix products and categories in the same CSV:

```
product_code,parent_category,categories
,main category 1,sub category 2
my_product_1,main category 1,sub category 2
```

<a name="variant"></a>

#### Products with variants

To import variants, use the `product_parent_id` column with the `product_code` of the main product (which must appear before the variants in the file). The main product line must include the default characteristic value. Characteristics and their values must be created beforehand via **Products &gt; Characteristics**.

Example with a "size" characteristic:

```
product_code,product_parent_id,size,price_value
main_product,,big,
first_variant,main_product,big,15
second_variant,main_product,small,10
```

The default price will be 15 (for "big"). When the customer selects "small", the price changes to 10.

<a name="trans"></a>

#### Products with translations

To import translations, append the language code after a pipe (`|`) to the column name. You must first have the corresponding languages set up in Joomla.

Example with English (main), French and Japanese translations:

```
product_code,product_name,product_name|fr-FR,product_name|ja-JP
my_product_1,My first product,Mon premier produit,私の初めての商品
```

This works for all translatable fields: `product_name`, `product_description`, and custom fields.

<a name="otherinfo"></a>

#### Other import options

If you have an Excel file, add a header row with the column names and save the file as CSV (Save As &gt; CSV). You can open the file with a text editor to verify the format before importing.

[![Options of the CSV import](/images/doc/hk/interface/import/import_show_csv.png)](/images/doc/hk/interface/import/import_show_csv.png)

**File Charset**: we recommend importing UTF-8 files. If your file uses a different encoding, select it so HikaShop can convert it properly.

**Store images locally**: if set to "No", only the URL of the image is stored. If set to "Yes", the image is downloaded and stored on your server.

**Store files locally**: same as above, but for downloadable files.

**Keep other variants**: when updating a product that already has variants:

- "Yes": existing variants not in the CSV are kept (new variants are added).
- "No": existing variants not in the CSV are removed (only the variants in the CSV remain).

[![Template product](/images/doc/hk/interface/import/import_show_template.png)](/images/doc/hk/interface/import/import_show_template.png)

**Template product** (Business edition): select a product to use as a template. All fields not specified in the CSV will be automatically filled from the template product. This is useful when importing many products with the same price, tax category, or images.

You can also use the text area option to import CSV-compatible data directly without uploading a file.

[![Import from the text area](/images/doc/hk/interface/import/import_show_textarea.png)](/images/doc/hk/interface/import/import_show_textarea.png)

### <a name="orders"></a>Import orders

HikaShop supports importing orders from the backend. You can find the **Import** button on the **Orders** listing page in the toolbar.

The order import accepts a CSV file with columns corresponding to the `#__hikashop_order` and `#__hikashop_order_product` tables. Common columns include:

- `order_number`: the order reference number.
- `order_user_id` or `user_email`: identifies the customer. If `user_email` is used, HikaShop will look up or create the user.
- `order_status`: the order status (e.g. "confirmed", "shipped").
- `order_created`: the order date (Unix timestamp or date string).
- `product_code`: the product code for each order line.
- `order_product_quantity`: quantity for each order line.
- `order_product_price`: unit price for each order line.
- `order_full_price`: total order amount.
- `order_currency_id`: currency code (e.g. "EUR").

This is particularly useful when migrating from another system where you want to preserve order history, or when bulk-loading historical orders.

### <a name="cron"></a>Import automatically from a CSV file

HikaShop Essential and Business editions include a plugin called "HikaShop Products Cron Update Plugin" that you can configure via the Joomla plugins manager. It allows you to import or update products automatically from a CSV file on a schedule.

To use it:

1. Configure your [HikaShop cron task](https://www.hikashop.com/support/documentation/55-hikashop-cron-task.html).
2. Go to the Joomla plugins manager, find and enable "HikaShop Products Cron Update".
3. Configure the plugin settings:

- **File**: enter a local file path or a URL to the CSV. If a URL is provided, the plugin downloads the file each time before importing.
- **Column names**: map your CSV column names to HikaShop column names. For example, if your CSV uses "name" and "code" instead of "product\_name" and "product\_code", enter: `name:product_name;code:product_code`
- **Charset**: select the character encoding of your file.
- **Frequency**: the import interval in seconds (e.g. 3600 for once per hour). Note that the actual frequency depends on your cron trigger interval.
- **Delete products not in CSV**: removes products not present in the CSV. Use this option with extreme caution and only after the import works correctly without it.

### <a name="shippingpayment"></a>Import shipping and payment methods

You can import shipping and payment methods from CSV files. On the **System &gt; Shipping methods** or **System &gt; Payment methods** listing page, click the **Import** button in the toolbar.

This opens an import dialog where you can upload a CSV file or paste CSV data. The import uses a column mapping interface (similar to the product import) that lets you map your CSV columns to HikaShop's shipping or payment method fields.

Common columns for shipping methods include: `shipping_name`, `shipping_type`, `shipping_price`, `shipping_published`, `shipping_currency_id`, and zone/weight restrictions. The `shipping_type` value corresponds to the plugin's folder name under `plugins/hikashopshipping/` (e.g. `manual` for the manual shipping plugin).

Common columns for payment methods include: `payment_name`, `payment_type`, `payment_price`, `payment_published`, `payment_currency_id`, and zone/amount restrictions. The `payment_type` value corresponds to the plugin's folder name under `plugins/hikashoppayment/` (e.g. `banktransfer` for the bank transfer plugin, `paypalcheckout` for PayPal Checkout).

This is useful when setting up a new store with many shipping zones or payment options, or when migrating method configurations from one site to another via CSV export/import.

### <a name="thirdparty"></a>Third party migration services

In addition to the built-in migration tools, several third-party services support HikaShop:

- [LitExtension](https://litextension.com/hikashop-migration/virtuemart-to-hikashop-migration.html): migration services supporting many shopping carts. They also offer a [CSV import tool for HikaShop](https://litextension.com/hikashop-migration/csv-to-hikashop-migration.html).
- [Cart2Cart](https://www.shopping-cart-migration.com/supported-carts/hikashop): automated migration from various shopping carts.
- [RO CSVI](https://rolandd.com/products/ro-csvi): a Joomla extension specialized in CSV import and export with HikaShop integration.

### <a name="generate"></a>Generate products from a folder

This feature is available in the Business edition of HikaShop.

[![Import from a folder](/images/doc/hk/interface/import/import_show_folder.png)](/images/doc/hk/interface/import/import_show_folder.png)

You can generate one product per file or image in a folder using the "Import products from folder" option. This is useful for shops selling images, music, or downloadable files.

Enter the path to the folder (relative to your site root or absolute). Each file in the folder will become a product, with the filename used as `product_code` and `product_name`. A copy of each file is placed in the appropriate upload folder.

You can optionally select a template product to fill in default values (price, tax category, description, etc.) for all generated products.

[![Template product](/images/doc/hk/interface/import/import_show_template.png)](/images/doc/hk/interface/import/import_show_template.png)

You can choose whether to delete the original files from the source folder after generation.

##  [ Entries ](/support/documentation/75-hikashop-entry-listing)

Details    Written by: Administrator    Category: [Tutorials](/support/documentation/hikashop/tutorials)     Published: 06 October 2010     Hits: 66658

| - [Description](#description) - [Add products](#product) - [Add entry custom fields](#fields) - [Add a link to the entry form](#menu) - [Tweak the cart and the checkout](#cart) | ![](/images/stories/tutorials/tutorials_event.png) |
|---|---|

### <a name="description"></a>Description

This tutorial will explain you how to allow your users to register to something on your website with the HikaShop entry form using the entry custom fields. This feature is only available in the Business version of HikaShop.

That is useful for example if you are building a website for an event, and you have several options available with different prices and you want your users to be able to enter several persons to the event in one order.

That's the case we are going to present below. You will create a form for an event which will be held on a week end for two days. The persons will be able to enter one or two days based on what they want to do and each day will be priced separately. They will also be able to select the conferences they want to attend on each day.

You will find the result of that tutorial on [our demo website](http://www.demo.hikashop.com/index.php?option=com_hikashop&view=entry&layout=form&Itemid=98&lang=en).

### <a name="product"></a>Add products

We will first create some products which will be added to the cart automatically based on the choices of the user when entering his information.

![](/images/stories/tutorials/first_test_sale/first_test_sale_1.png)

Then, click on new to create a new product

![](/images/stories/tutorials/first_test_sale/first_test_sale_2.png)

You will have to write at least a name for your product and a price for the product. You might also want to add the product to a special category which won't be displayed in your normal store listing, if any.

![](/images/stories/tutorials/first_test_sale/first_test_sale_3.png)

Once you're done click on the save button. You can repeat the operation several times.

We added three products. One which is called Saturday (30€) and one which is called Sunday (50€).  We also want to propose a lunch box on site on Sunday at 15€.

### <a name="fields"></a>Add entry custom fields

Now that you created the products you need you will create the form elements using the custom fields.

Go in the HikaShop menu Display-&gt;Custom fields.

![](/images/stories/tutorials/entries/entries_1.png)

Then, click on the new button to create a new custom field.

![](/images/stories/tutorials/entries/entries_2.png)

Enter a label for the field, select the table "entry" and set the type of your custom field. Based on the type, you will be able to select additional information like the values and labels of each options for dropdowns.

![](/images/stories/tutorials/entries/entries_3.png)

Then, upon clicking on the apply button, you will see additional options on the right side of the screen which are only displayed for entries.

You will be able to limit the display of a field based on the value of another field. That enables to to build conditions in your form. For example, in our case, the Sunday lunch will be proposed only if the user selected yes to the Sunday conference dropdown.

You will also be able to attach a product to a field. The product will be added to the cart automatically once you validate the form if the value entered by the user matches the value you selected there.

![](/images/stories/tutorials/entries/entries_4.png)

We added 10 custom fields:

A name custom field where the user can enter the name of the person (type text). The name field is required.

An email custom field where the user can enter the email address of the person (type text).

A Sunday field of type single dropdown with three values:  '' and 'Please select', '0' and 'No', '1' and 'Yes'. The field is required. This field is attached to the product Sunday for the value 'Yes'. The default value is 'Please select'.

A 'Lunch box on Sunday' field of type single dropdown with three values:  '' and 'Please select', '0' and 'No', '1' and 'Yes'. The field is required. This field is attached to the product 'lunch box' for the value 'Yes'. The default value is 'Please select'. The field display is limited to the field Sunday with the value 'Yes'.

A 'Conference 1 on Sunday (10h-12h)' field of type single dropdown with four values:  '' and 'Please select', 'templates' and 'Templates', 'joomla16' and 'Joomla 1.6', 'ecommerce' and 'E-Commerce'. The field is required. The default value is 'Please select'. The field display is limited to the field Sunday with the value 'Yes'.

A 'Conference 2 on Sunday (14h-16h)' field of type single dropdown with four values:  '' and 'Please select', 'sef' and 'SEF', 'cck' and 'CCK', 'communities' and 'Communities'. The field is required. The default value is 'Please select'. The field display is limited to the field Sunday with the value 'Yes'.

A Saturday field of type single dropdown with three values:  '' and 'Please select', '0' and 'No', '1' and 'Yes'. The field is required. This field is attached to the product Saturday for the value 'Yes'. The default value is 'Please select'.

A 'Conference 1 on Saturday (10h-12h)' field of type single dropdown with four values:  '' and 'Please select', 'backup' and 'Backup', 'security' and 'Security', 'newsletters' and 'Newsletters'. The field is required. The default value is 'Please select'. The field display is limited to the field Saturday with the value 'Yes'.

A 'Conference 2 on Saturday (14h-16h)' field of type single dropdown with four values:  '' and 'Please select', 'forum' and 'Forum', 'events' and 'Events', 'acl' and 'ACL'. The field is required. The default value is 'Please select'. The field display is limited to the field Saturday with the value 'Yes'.

### <a name="menu"></a>Add a link to the entry form

Go to the menu "Menus" and click on one of your menu areas

![](/images/stories/tutorials/content_display/content_display_1.png)

Then, click on new to create a new menu

![](/images/stories/tutorials/content_display/content_display_2.png)

You will have to click on the menu Item Type HikaShop in order to display the list of menu types of HikaShop. Then, click on the Entries registration link.

![](/images/stories/tutorials/content_display/content_display_3.png)

You will be able to set standard Joomla options for the menu.

You're done. If your menu area is already displayed on your front end, you should already see the new menu linking to your form. If you don't see it, you might need to purge your Joomla cache before seeing it.

![](/images/stories/tutorials/entries/entries_5.png)

### <a name="cart"></a>Tweak the cart and the checkout

As you will see on the checkout, your users can click on the products name and go to the product page. In most cases, you will want to disable those links. To do so, you can go to the configuration's Display tab ("*Hikashop-&gt;System-&gt;Configuration-&gt;Display*") and turn off the "link to the product page" option.

1. [ Product Add/Edit](/support/documentation/19-hikashop-product-form)
2. [ Custom fields listing](/support/documentation/41-hikashop-field-listing)

Page 8 of 9
