If you are using Mijoshop 2 and want to migrate to Mijoshop 3, please check out: Mijoshop 2 to Mijoshop 3 migration document - Video tutorials

1. Mijoshop installation

Step 1 - Download then install Mijoshop component to your site

Step 2 - Download extensions and mijoshp 3 themes for the Bookshop template. In the download page of JA Bookshop, download:

• JA Bookshop Theme for Mijoshop V3
• Mijoshop V3 Modules Accordion
• Mijoshop V3 Modules Slider.

Step 3 - Extract the package one by one, open it and upload the folder components/com_mijoshop/opencart to your site root folder.

Step 4 - Once the upload is done, please go to Mijoshop working panel > Extensions > Modules then install modules: Joomlart MijoShop Products Accordion and Joomlart MijoShop Products Slider.

Next, we need to set default theme for Mijoshop 3. Go to "System > Settings > Edit default store > Store" and select "bookshop_v3" template.

To have style like our demo, please make sure you have same settings as the image below.

• Image Settings →

Other settings are default settings.

Mijoshop Documentation

2. Mijoshop Menu Configuration

If you want to make Mijoshop in your site same as JA Bookshop demo site, this would be helpful. We only show the important, customized settings, default settings are not shown.

Shop Menu

Menu setting

Menu type: Latest Products
MijoShop Store: Default

Menu Detail Settings

Menu Page Display Settings

Assign modules to be displayed in the home menu

To have the Home menu as JA Bookshop demo, you need to assign modules to the Home menu item: Mijoshop Slideshow Module, Mijoshop Specials Module, JA Mijo Slider Module, Mijoshop Best Seller module, Mijoshop Categories, Mijoshop Feteatured module, JA Mijo Accordion module. The settings of those module are shown in the MijoShop Configuration section.

Books Menu

Menu type: Popular Products
MijoShop Store: Default

Menu Detail Settings

Categories Menu

Menu type: latest products
MijoShop Store: Default

Menu Detail Settings

Novel Menu

Menu type: Category
MijoShop Store: Default

Menu Detail Settings

3. Mijoshop Module Configuration

Load any module and assign to any position

To manage Mijoshop modules, from Dasboard of Mijoshop, go to: Extensions > Modules, you can install, add new module or delete any module.

1. Information module

• Mijoshop information module configuration
• Mijoshop All-in-one module configuration

2. Accordion module

We specific developed this module for JA Bookshop, it's an addon for Mijoshop component.

Joomlart MijoShop Products Accordion

• Back-end setting

Mijoshop All-in-one module configuration

Module Position: content-mass-top
Module Suffix: dark nopadding

• Back-end setting

3. Account module

Mijoshop Account module configuration

• Back-end setting

Mijoshop All-in-one module configuration

Module Position: footer-2 
Module Suffix: NOT USED

• Back-end setting

4. Mijoshop Best seller module

MijoShop Bestsellers module configuration

• Back-end setting

Mijoshop All-in-one module configuration

Module Position: ja-tab
Module Suffix: NOT USED

• Back-end setting

5. Mijoshop Manufacturer module

Mijoshop Manufacturer module configuration

• Back-end setting

Mijoshop All-in-one module configuration

Module Position: mega-1
Module Suffix: NOT USED

• Back-end setting

6. Mijoshop Latest module

Mijoshop Latest module configuration

• Back-end setting

Mijoshop All-in-one module configuration

Module Position: mega-1
Module Suffix: NOT USED

• Back-end setting

7. Mijoshop Slideshow module

Mijoshop Slideshow module configuration

• Back-end setting

Mijoshop All-in-one module configuration

Module Position: position-1
Module Suffix: NOT USED

• Back-end setting

8. Mijoshop Specials module

Mijoshop Specials module configuration

• Back-end setting

Mijoshop All-in-one module configuration

Module Position: position-2
Module Suffix:  highlight

• Back-end setting

9. Mijoshop Categories module

Mijoshop Categories module configuration

• Back-end setting

Mijoshop All-in-one module configuration

Module Position: sidebar-1
Module Suffix:  highlight

• Back-end setting

10. Mijoshop Featured module

Mijoshop Slideshow module configuration

• Back-end setting

Mijoshop All-in-one module configuration

Module Position: sidebar-1
Module Suffix: NOT USED

• Back-end setting

11. Mijoshop Minicart module

Mijoshop Minicart module configuration

• Back-end setting

Mijoshop All-in-one module configuration

Module Position: toolbar-ct-2 
Module Suffix: NOT USED

Back-end setting

• Back-end setting

Add style for Mijoshop

• Download then install Mijoshop component to your site
• Download style package for Mijoshop from Download page of JA Bookshop template
• Extract the downloaded Mijoshop style package then add to your site

Download   Install

Mijoshop Configuration

Go to: Components >> Mijoshop >> Settings.

To have style like our demo, please make sure you have same settings as the image below.

Other settings are default settings.

Mijoshop Documentation

Mijoshop Module Configuration

Load any module and assign to any position

To manage Mijoshop modules, from Dasboard of Mijoshop, go to: Extensions >> Modules to configure modules.

In the list of Mijoshop module, click on Edit button to configure the module.

1. Information module

Mijoshop All-in-one module configuration

Module Position: footer-1
Module Suffix: NOT USED

Back-end setting

Mijoshop information module configuration

Front-end Appearance

2. Accordion module

We specific developed this module for JA Bookshop, it's an addon for Mijoshop component.

Mijoshop All-in-one module configuration

Module Position: content-mass-top
Module Suffix: NOT USED

Back-end setting

Front-end Appearance

3. Account module

Mijoshop All-in-one module configuration

Module Position: footer-2
Module Suffix:  menu-2col

Back-end setting

Mijoshop Account module configuration

Front-end Appearance

4. Search module

Mijoshop All-in-one module configuration

Module Position: head-search
Module Suffix: NOT USED

Back-end setting

Mijoshop Search module configuration

Front-end Appearance

Download

5. JA Mijoshop Product Slider module

Mijoshop All-in-one module configuration

Module Position: ja-tab
Module Suffix: NOT USED

Back-end setting

Front-end Appearance

6. Mijoshop Best seller module

Mijoshop All-in-one module configuration

Module Position: ja-tab
Module Suffix: NOT USED

Back-end setting

Mijoshop Best seller module configuration

Front-end Appearance

7. Mijoshop Manufacturer module

Mijoshop All-in-one module configuration

Module Position: mega-1
Module Suffix: NOT USED

Back-end setting

Mijoshop Manufacturer module configuration

Front-end Appearance

8. Mijoshop Latest module

Mijoshop All-in-one module configuration

Module Position: mega-1
Module Suffix: NOT USED

Back-end setting

Mijoshop Latest module configuration

Front-end Appearance

9. Mijoshop Slideshow module

Mijoshop All-in-one module configuration

Module Position: position-1
Module Suffix: NOT USED

Back-end setting

Mijoshop Slideshow module configuration

Front-end Appearance

10. Mijoshop Specials module

Mijoshop All-in-one module configuration

Module Position: position-2
Module Suffix:  highlight

Back-end setting

Mijoshop Specials module configuration

Front-end Appearance

11. Mijoshop Categories module

Mijoshop All-in-one module configuration

Module Position: sidebar-1
Module Suffix:  highlight

Back-end setting

Mijoshop Categories module configuration

Front-end Appearance

12. Mijoshop Featured module

Mijoshop All-in-one module configuration

Module Position: sidebar-1
Module Suffix: NOT USED

Back-end setting

Mijoshop Slideshow module configuration

Front-end Appearance

13. Mijoshop Minicart module

Mijoshop All-in-one module configuration

Module Position: sidebar-1
Module Suffix: NOT USED

Back-end setting

Mijoshop Minicart module configuration

Front-end Appearance

Mijoshop Menu Configuration

If you want to make Mijoshop in your site same as JA Bookshop demo site, this would be helpful. We only show the important, customized settings, default settings are not shown.

Home Menu

Menu setting

Menu type: Latest Products
MijoShop Store: Default

Menu Detail Settings

Menu Page Display Settings

Assign modules to be displayed in the home menu

To have the Home menu as JA Bookshop demo, you need to assign modules to the Home menu item: Mijoshop Slideshow Module, Mijoshop Specials Module, JA Mijo Slider Module, Mijoshop Best Seller module, Mijoshop Categories, Mijoshop Feteatured module, JA Mijo Accordion module. The settings of those module are shown in the MijoShop Configuration section.

Books Menu

Menu type: Popular Products
MijoShop Store: Default

Menu Detail Settings

Categories Menu

Menu type: latest products
MijoShop Store: Default

Menu Detail Settings

Novel Menu

Menu type: Category
MijoShop Store: Default

Menu Detail Settings

JA Extension Configuration

1. JA Slideshow Lite module

Module Position: position-1
Module Suffix:  NOT USED

• Module Back-end Settings
• Front-end Appearance

Documentation

2. JA Content Slider module

Module Position: content-mass-top
Module Suffix:  dark

• Module Back-end Settings
• Front-end Appearance

Documentation

3. JA Side News module

3.1 Most Viewed

Module Position: ja-tab-2
Module Suffix:  col-6

Back-end settings

• Detail Settings
• Content Settings
• Layout Configuration
• Image Settings
• Advanced Settings

Front-end Appearance

3.2 Latest Articles

Module Position: ja-tab-2
Module Suffix:  col-6

Back-end settings

• Detail Settings
• Content Settings
• Layout Configuration
• Image Settings
• Advanced Settings

Front-end Appearance

3.3 Today hightlight

Module Position: position-2
Module Suffix:  highlight

Back-end settings

• Detail Settings
• Content Settings
• Layout Configuration
• Image Settings
• Advanced Settings

Front-end Appearance

Documentation

4. JA Tabs Plugin

JA Tabs allow you to load any module to display in tabs. To do that, please follow the steps below.

Step 1: Install, enable and configure JA Tabs Plugin

• Plugin Back-end Settings

Step 2: Create content to display in tabs

Create modules with content you want to display in tab then assign to a position (example: ja-tab, ja-tab-1).

Step 3: Define content in tabs

We will create a custom html module to define content to display in tabs.

<div>{jatabs type="modules" module="ja-tab" position="top" mouseType="click" animType="animFade"} {/jatabs}</div>

JA Tabs Userguide

5. JA Google Map Plugin

• Plugin Back-end Settings

You can define Code container that will be inserted to content to embed Google map, the default is (jamap}. You can insert the Code container to any place in article, custom HTML ... that you want to embed google map.

• Front-end Appearance

Default Joomla Extension

1. Acymailing Module

Module Position: footer-subcribe
Module Suffix:  subcribe-frm

• Module Back-end Settings
• Front-end Appearance

1. Location

Module Position: footer-3
Module Suffix: NOT USED

HTML code:

<p>Address: 2411 Any Street. Any Town. United Kingdom.</p>
<p>Mail to: <a href="mailto:support@yourstore.com">support@yourstore.com</a></p>
<p>Phone: +123 456 7890</p>
<p>Fax: +123 456 7890</p>

• Module Back-end Settings
• Front-end Appearance

2. Footer Info

Module Position: footer-info
Module Suffix: NOT USED

HTML code:

<ul class="list-shipping">
<li class="shipping-item"><i class="fa fa-plane"></i><span class="title">Free Shipping</span> <span class="desc">on orders over $49</span></li>
<li class="exchange-item"><i class="fa fa-refresh"></i><span class="title">1st Exchange Free</span> <span class="desc">on 3 days</span></li>
<li class="support-item"><i class="fa fa-comments"></i><span class="title">Online support 24/7</span> <span class="desc">123 456 7890</span></li>
<li class="friends-item"><i class="fa fa-gift"></i><span class="title">Tell Friends and get $5</span> <span class="desc">a small gift for you</span></li>
</ul>

• Module Back-end Settings
• Front-end Appearance

3. Toolbar Links

Module Position: toolbar-ct-1
Module Suffix:  hidden-xs hidden-sm

HTML code:

<p><a href="#"><i class="fa fa-question-circle"></i> Shipping &amp; Customer Services</a></p>

• Front-end Appearance

4. Header Phone

Module Position: toolbar-ct-1
Module Suffix:  hidden-xs hidden-sm

HTML code:

<p><i class="fa fa-phone"></i> <span>(123) 456-7890</span></p>

• Front-end Appearance

You can add "AddThis" buttons: Share, follow buttons to your site with customized styles.

Follow the steps below to add the "AddThis" buttons.

Step 1: Get Addthis code

Access AddThis site, select service

Get AddThis service code

<!-- AddThis Follow BEGIN -->
<p>Follow Us</p>
<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
<a class="addthis_button_facebook_follow" addthis:userid="YOUR-PROFILE"></a>
<a class="addthis_button_twitter_follow" addthis:userid="YOUR-USERNAME"></a>
<a class="addthis_button_google_follow" addthis:userid="joomlart"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-52c4dc6a6f54bdd9"></script>
<!-- AddThis Follow END -->

Step 2: add code to your site

Create a custom HTML module then paste the AddThis code, assign the custom HTML module to sticky position.

Step 3: change position and customize style

The class to style for the module is defined in the file: mainbody.php in templates/ja_bookshop/tpls/blocks

<?php if ($this->countModules('sticky')) : ?>
<!-- STICKY MODULE -->
<div class="sticky-module sticky-module-left <?php $this->_c('sticky') ?>">
  <jdoc:include type="modules" name="<?php $this->_p('sticky') ?>" style="raw" />
</div>
<!-- //STICKY MODULE -->
<?php endif ?>

The styles are in module.less in templates/ja_bookshop/less.

// Sticky Module
// ---------------
.sticky-module {
  position: fixed;
  left: 0;
  top: 145px;
  width: 30px;
  display: none;

  &.sticky-module-right {
  left: auto;
  right: 0;
  }

  @media (min-width: @screen-md) {
  display: block;
  }

  .addthis_32x32_style .at15nc.at300bs, 
  .addthis_32x32_style .at15nc.at15t {
  background-image: url("@{t3-image-path}/ico/social.png") !important;
  height: 30px !important;
  line-height: 30px !important;
  width: 30px !important;
  }

  .addthis_32x32_style .at15nc.at15t_twitter {
  background-position: 0px -30px !important;

  &:hover {
    background-position: -30px -30px !important;
  }
  }

  .addthis_32x32_style .at15nc.at15t_facebook {
  background-position: 0px 0px !important; 

  &:hover {
    background-position: -30px 0px !important;
  }
  }

  .addthis_32x32_style .at15nc.at15t_google_follow  {
  background-position: 0px -60px !important;
  &:hover {
    background-position: -30px -60px !important;
  }
  }

  .addthis_toolbox {
  width: 30px;
  padding: 0;
  text-align: right;
  }

  .addthis_default_style .addthis_separator, 
  .addthis_default_style .at300b, 
  .addthis_default_style .at300bo, 
  .addthis_default_style .at300m, 
  .addthis_default_style .at300bs {
  float: none;
  display: block;
  padding: 0 0 2px;
  }
}

You can change the position of Addthis button

sticky-module-left

sticky-module-right

1. Megamenu Configuration

JA Bookshop supports Megamenu that is a core feature of T3 Framework.

To enable Megamenu, from back-end of JA Bookshop template, open Navigation tab.

Select the menu that will be displayed as main menu (mainnav position) then enable Megamenu.

After saving, we will configure Megamenu by hit "Megamenu" button.

Documentation   Video Tutorial

2. Off-canvas Menu on Collapsed Screens

JA Bookshop uses Off-canvas that is based on Off-canvas sidebar feature of T3 Framework.

Step 1: Enable collapse navigation for small screens

Open JA Bookshop setting panel, open Navigation tab then collapse navigation for small screens.

Step 2: Enable Off-canvas

Open JA Bookshop setting panel, open Add-on tab then enable Off-canvas option.

Step 3: Create Menu module

Now we will create a menu module, select menu you want to display in the module then assign to "off-canvas" position. In demo site, we assigned main menu to the module.

Front-end Appearance

JA Bookshop supports Easyblog component by default. In order to have the EasyBlog design, you should download the EasyBlok theme for JA Appolio, extract the files and add them to your site.

Install EasyBlog component

If you are new to this Joomla component, please read this guide.

Install EasyBlog   Add Style

Quick Guide:

• Step 1: Install Easyblog component
• Step 2: Download JA Bookshop theme for Easyblog
• Step 3: Extract zip file and upload to your your_site_folder. You should see folder ja_bookshop in /components/com_easyblog/themes.
• Step 4: Go to back-end panel >> Components >> Easyblog >> Themes >> select ja_bookshop.

The following screenshots are for the Step 4.

• Access: Components >> Easyblog >> Themes

• Change the default theme toja_bookshop

Configure EasyBlog Component

Configure Easyblog Slide

The EasyBlog slide displays featured EasyBlog items. So to display items in EasyBlog slide, just set the items to "Featured".

EasyBlog Module Configuration

1. EasyBlog Archive Module

Module Position : sidebar-2
Module Suffix : NOT USED

• Back-end Settings
• Front-end Appearance

2. EasyBlog Latest Module

Module Position : easyblog-sidebar-2
Module Suffix : NOT USED

• Back-end Settings
• Front-end Appearance

3. EasyBlog Most Commented Module

Module Position : sidebar-2
Module Suffix : NOT USED

• Back-end Settings
• Front-end Appearance

4. EasyBlog Most Popular Module

4.1 Popular

Module Position : easyblog-sidebar-2
Module Suffix : NOT USED

• Back-end Settings
• Front-end Appearance

4.2 Most Popular

Module Position : sidebar-2
Module Suffix : NOT USED

• Back-end Settings
• Front-end Appearance

Theme Settings

JA Bookshop supports 5 themes by default: default, blue, green, violet and yellow.

You can switch to any theme you want. To change theme, open Theme tab.

The Theme tab allows you to change logo, select text logo if you want.

Documentation

ThemeMagic Settings

ThemeMagic is a real time theme customization tool supported by T3 Framework. It allows you to customize any theme without touching code.

Step 1: Enable ThemeMagic

In the General tab, enable ThemeMagic then access working panel of ThemeMagic by clicking on ThemeMagic.

Step 2: Select theme then customize

Documentation   Video Tutorial

Layout Settings

JA Bookshop used 1 layout (default layout) only. However you can add new layouts.

Layout Structure

You can change the structure of layout, changing module positions of the layout ...

For spotlight block, you can se number of positions.

Responsive Layouts

JA Bookshop is a responsive template based on multiple supported responsive layouts. In the Responsive layout, select the layout you want to configure.

In each responsive layout, you can disable any module position.

For module positions in spotlight block, you can drag to resize.

Documentation   Layout configuration video   Layout customization video

The above userguide should help one in replicating the Demo site settings for the template and extension on their site.

Recommended :

If you are new or are confused. We recommend installing Quickstart on your localhost and use it as reference for configs. This is the best way to work with any template. Links to all the resources are provided above, you should carefully read them to take the maximum advantage of our products.

Support :

Please raise your support queries in the forum and make sure you follow the support guidelines. We spend more time in getting the information from user incase the support guidelines are not followed.