Slideshow Examples
The demos below are based on our simple tag system. Simply add the tag calls for the content in your own custom html to get the following design!
<a href="{product_page}"> <div class="npslideshow1"> <img src="{original_image_url}"> <div class="npslideshow1_txt"> <h2>{product_name}</h2> <p>{description}</p> </div> </div> </a>
Featured Slideshow Example : Fade Effect
The JoomlaXTC HikaShop Product Wall can create mutli-effect slideshows.
Featured Slideshow No Text Example : Slide Effect
Create multi-page slides with CSS styled control with the {pages} tag.
 |
Slide Demos 2
Slideshows with Buttons
Create multi-page slides with buttons by using the {leftbutton} {rightbutton} tags. HikaShop Product Wall offers over 50 different button styles.
Slide Demos 3
Featured Slideshow 2 Example : Slide Effect
Content slideshows for full width sites or large areasStatic Text Slideshow Example
Create slideshows with static text overlays.
 |
Slider Demos
Slider One Example: Auto Scroll
Create multi-page slides with buttons by using the {leftbutton} {rightbutton} tags. HikaShop Product Wall offers over 50 different button styles.
Slider Two Example: Click for Scroll
Slider Three Example
Add CSS3 effects to the slides for a friendly interactive design.
Slider Four Example
Add styled pages with a little css and the {pages} tag.
Grid Examples
Grid One Example
Grid Two Example
Grid Three Example
Grid Four Example
Blog Examples
Blog One Example
Single column blog with CSS styled text overlays and date badge
Blog Two Example
The {language} tag uses the core Joomla read more for multi language sites.
Sample Product 4
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien si
Womens Product 3
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien si
Blog Three Example
Multiple columns and rows example with CSS styled date badges.
Blog Four Example
Create cutting edge blog posts with your own custom HTML and CSS or use these pre-packaged template designs
Womens Product 3
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien si
Women Product 4
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien si
Womens Product 1
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien si
Womens Product 2
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien si
Blog Five Example
Multiple columns and rows example.
Sample Product 2
12,09 €Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien si
Sample Product 5
12,99 €Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien si
Sample Product 6
10,00 €Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien si
Sample Product 2
12,09 €Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien si
News Examples
News One Example
Use the {mainarea} and {morearea} to create two different layouts at once.
Womens Product 3
Womens Product 3
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien si
Womens Product 2
Womens Product 2
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien si
Mens Product 2
Mens Product 2
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien si
Sample Product 2
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien si
Mens Product 4
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien si
Sample Product 7
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien si
Womens Product 1
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien si
Sample Product 6
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien si
Sample Product 4
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien si
News Two Example
Multiple columns and rows example.
Sample Product 7
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien si
Womens Product 3
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien si
Sample Product 3
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien si
Womens Product 2
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien si
News Three Example
Multiple columns and rows example with CSS article wraps.
Mens Product 3
10,00 €
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien si
Sample Product 6
10,00 €
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien si
Sample Product 5
12,99 €
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien si
News Ticker Example
Use the mult-page slider in a single column and row to create newtickers and more.
Tooltip Examples
Tooltip One Example
Top tooltip using the {title} tag to display the article title in the tooltip.
Tooltip Two Example
Right tooltip using the {title} tag to display the article title in the tooltip.
Tooltip Three Example
Left tooltip using the {title} tag to display the article title in the tooltip.
Tooltip Four Example
Bottom tooltip using the {title} tag to display the article title in the tooltip.
PopUp One Example
Create Modal pop ups using the core Bootstrap modal to open the article intro in a modal.
List Examples
List 1 Example
A CSS3 styled list
List 2 Example
A CSS3 styled list with gutters.
List 3 Example
A standard article list with title and intro text, perfect for side bars.
List 4 Example
Create ordered lists using the {index} tag to display the numbered order.
Hero Examples
Hero Example
Hero Example 2
Creative Examples
Hexagon Example
Use CSS3 to create unique image styling and layouts.
Category Example
Use the {mainarea} and {morearea} to create featured layouts.
Category Example 2
A tabbed filtering layout. Simply add the category ID's for the categories in the mark up and CSS.
Timeline Example
A CSS3 styled timeline using content
Tabbed Example
Use the {mainarea} and {morearea} to create multiple layouts per tab.
Sample Product 3
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, te
Read moreAccordion Example
Use the {mainarea} and {morearea} to create multiple layouts per tab.
Womens Product 3 Sample Product 5 Sample Product 4 Sample Product 2Bootstrap Examples
Hero Example
Thumbnail Example
Sample Product 3
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, te
Sample Product 1
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, te
Sample Product 4
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, te
Mens Product 4
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, te
Womens Product 3
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, te
Sample Product 6
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, te
Sample Product 2
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, te
Hover Examples
Hover Example 1
Hover Example 2
Sample Product 4
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien sit amet lacinia congue, leo mi consequat felis, vitae ornare nunc sem eu sem. Curabitur congue. Cras magna augue, ullamcorper ac, tincidunt nec, pulvinar faucibus, leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Sample Product 2
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien sit amet lacinia congue, leo mi consequat felis, vitae ornare nunc sem eu sem. Curabitur congue. Cras magna augue, ullamcorper ac, tincidunt nec, pulvinar faucibus, leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Hover Example 3
Sample Product 2
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien sit amet lacinia congue, leo mi consequat felis, vitae ornare nunc sem eu sem. Curabitur congue. Cras magna augue, ullamcorper ac, tincidunt nec, pulvinar faucibus, leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Sample Product 6
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien sit amet lacinia congue, leo mi consequat felis, vitae ornare nunc sem eu sem. Curabitur congue. Cras magna augue, ullamcorper ac, tincidunt nec, pulvinar faucibus, leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Hover Example 4
Sample Product 1
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien sit amet lacinia congue, leo mi consequat felis, vitae ornare nunc sem eu sem. Curabitur congue. Cras magna augue, ullamcorper ac, tincidunt nec, pulvinar faucibus, leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Womens Product 1
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien sit amet lacinia congue, leo mi consequat felis, vitae ornare nunc sem eu sem. Curabitur congue. Cras magna augue, ullamcorper ac, tincidunt nec, pulvinar faucibus, leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Hover Example 5
Sample Product 5
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien sit amet lacinia congue, leo mi consequat felis, vitae ornare nunc sem eu sem. Curabitur congue. Cras magna augue, ullamcorper ac, tincidunt nec, pulvinar faucibus, leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Sample Product 4
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien sit amet lacinia congue, leo mi consequat felis, vitae ornare nunc sem eu sem. Curabitur congue. Cras magna augue, ullamcorper ac, tincidunt nec, pulvinar faucibus, leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Hover Example 6
Sample Product 3
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien sit amet lacinia congue, leo mi consequat felis, vitae ornare nunc sem eu sem. Curabitur congue. Cras magna augue, ullamcorper ac, tincidunt nec, pulvinar faucibus, leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Mens Product 1
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien sit amet lacinia congue, leo mi consequat felis, vitae ornare nunc sem eu sem. Curabitur congue. Cras magna augue, ullamcorper ac, tincidunt nec, pulvinar faucibus, leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Hover Example 7
Sample Product 1
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien sit amet lacinia congue, leo mi consequat felis, vitae ornare nunc sem eu sem. Curabitur congue. Cras magna augue, ullamcorper ac, tincidunt nec, pulvinar faucibus, leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Sample Product 1
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien sit amet lacinia congue, leo mi consequat felis, vitae ornare nunc sem eu sem. Curabitur congue. Cras magna augue, ullamcorper ac, tincidunt nec, pulvinar faucibus, leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Hover Example 8
Sample Product 6
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien sit amet lacinia congue, leo mi consequat felis, vitae ornare nunc sem eu sem. Curabitur congue. Cras magna augue, ullamcorper ac, tincidunt nec, pulvinar faucibus, leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Womens Product 2
Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien sit amet lacinia congue, leo mi consequat felis, vitae ornare nunc sem eu sem. Curabitur congue. Cras magna augue, ullamcorper ac, tincidunt nec, pulvinar faucibus, leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Hover Examples 2
Hover Example 9
Hover Example 10
Hover Example 11
Hover Example 12
Hover Example 13
Hover Example 14
Hover Example 15
Hover Example 16
Hover Example 17
Hover Example 18
Hover Example 19
Hover Example 20
Sample Product 1
Mens Product 1
Womens Product 2
Sample Product 4
Sample Product 1
Sample Product 2
Hover Example 21
Mens Product 1
Sample Product 3
Sample Product 1
Mens Product 4
Mens Product 3
Mens Product 2
ALL TAGS
Module template tags:
| Tag Name | Tag Content |
|---|---|
| mainarea | Displays the selected elements using the corresponding element template tags for each one. |
| leftbutton |
|
| rightbutton |
|
| pages |
Element template tags (all tags work on "more" area as well):
| Tag Name | Tag Content |
|---|
| addtocart | |
| base_price | 15,00 € |
| brand | |
| category_description | Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, te |
| category_image | http://demo.joomlaxtc.com/extensions3/media/com_hikashop/upload/bow-tie-fashion-man-person-large.jpg |
| category_name | Men's Fashion |
| category_url | /extensions3/component/hikashop/category/13-men-s-fashion?Itemid=1943 |
| categoryid | 13 |
| create_date m-d-Y | 12-12-2012 |
| create_date | Wednesday, 12 December 2012 |
| description | Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, te |
| end_date m-d-Y | 01-01-1970 |
| end_date | Thursday, 01 January 1970 |
| id | 8 |
| image |  |
| image_url | http://demo.joomlaxtc.com/extensions3/media/com_hikashop/upload/thumbnail_1920x1280/mens1.jpg |
| index | 1 |
| language language_token | Read more |
| original_image | |
| original_image_url | http://demo.joomlaxtc.com/extensions3/media/com_hikashop/upload/mens1.jpg |
| product_code | Sample_Product_8 |
| product_height | 0.000 |
| product_id | 8 |
| product_image |  |
| product_image_url | http://demo.joomlaxtc.com/extensions3/media/com_hikashop/upload/thumbnail_400x400/mens1.jpg |
| product_length | 0.000 |
| product_name | Mens Product 1 |
| product_page | /extensions3/component/hikashop/product/8-sample-product-8?Itemid=1943 |
| product_price | 15,00 € |
| product_quantity | -1 |
| product_score | 0 |
| product_url | |
| product_votes | 0 |
| product_weight | 0.000 |
| product_width | 0.000 |
| raw_category_description | Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien sit amet lacinia congue, leo mi consequat felis, vitae ornare nunc sem eu sem. Curabitur congue. Cras magna augue, ullamcorper ac, tincidunt nec, pulvinar faucibus, leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. |
| raw_description | Mauris mattis tempor est. Vivamus sed nisi. Quisque arcu tortor, suscipit eu, tempor eget, placerat at, nibh. Vivamus eros urna, semper ac, commodo a, porta sed, enim. Duis est. Nunc luctus, sapien sit amet lacinia congue, leo mi consequat felis, vitae ornare nunc sem eu sem. Curabitur congue. Cras magna augue, ullamcorper ac, tincidunt nec, pulvinar faucibus, leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. |
| start_date m-d-Y | 01-01-1970 |
| start_date | Thursday, 01 January 1970 |
| thumbnail_image |  |
| thumbnail_image_url | http://demo.joomlaxtc.com/extensions3/media/com_hikashop/upload/thumbnail_250x175/mens1.jpg |
| weight_unit | kg |