ShopIn - Joomla Template Documentation

ShopIn is a Joomla! E-commerce template designed for 2 most popular e-commerce extension VirtueMart and HikaShop. It will be joy to design your e-commerce website with OnSale template powered by Gantry 5 framework and 200+ design blocks with easy to use and drag & drop particles.

Note: HikaShop Wishlist, Compare and filters on left sidebar designed with HikaShop pro version which isn't included with this template.

Installation
Accessing Gantry Admin Development and Production Modes Understanding Gantry 5 Outlines Changing Theme Styles Configuring Page Settings Configuring Theme Layout Using Menu Editor Inheritance Guide
Required Atoms

Atoms are Particles that do not appear visually on the front end, but do serve an important purpose. They can be assigned on a per-page basis, or as a default which automatically applies to all of the pages on the site.

Required Atoms:

  1. JavaScript Frameworks
  2. RcaTheme Elements

 

How to add and Configure Atoms

  1. Go to Gantry Admin
  2. Switch to Base Outline

    documentation

  3. Click on Page Settings
  4. Scroll to bottom and you will see Atoms area.

Required Atoms

Required Atoms Settings

  1. JavaScript Frameworks

    documentation

  2. RcaTheme Elements

    From the RcaTheme Elements Atom, you could enable/disable theme features such as: ToTop, Fixed Header, Cookie Consent, Extra Typography etc.

Using Icons
  1. FontAwesome Icons
    1. Go to http://fontawesome.io/icons
    2. Click on your desired icon and copy the code. For example - <i class="fa fa-smile-o"></i> for and paste on your Particle, Joomla article and module editor by switching Code editor (HTML).
Adding Custom SCSS/CSS or Overriding Styles with SCSS/CSS Adding/Editing Theme's contents and particles
Top
Top
  1. Go to Gantry Admin
  2. Click on Layout tab
  3. Scroll to the Top section and click (config icon) next to the Top Toolbar particle

    documentation

  4. Now follow on-screen instructions and setup as you need.
Header
  1. Adding/Changing Logo
    1. Go to Gantry Admin
    2. Click on Layout tab
    3. Scroll to the Header section and click (config icon) next to the Header Toolbar particle

      documentation

    4. Now see Logo - Options and follow on-screen instructions
  2. Search HikaShop
    1. Download RCA HikaShop Search pkg from your download area of RcaTheme.com if already didn't
    2. Login to your Joomla! Administrator
    3. Install the package you have downloaded using Joomla!'s default extension installer.
    4. Go to Extensions > Modules
    5. Click on New to create new module and select RCA HikaShop Search
    6. Module Position: header-search
    7. Menu Assignment: On all pages
    8. Now follow on screen instructions and setup.

      documentation

  3. Search VirtueMart

    Make sure you have installed mod_virtuemart_category_search_v.x.x.x.zip provided with the template.

    1. Go to Extensions > Modules
    2. Click on New button to create new module and select VirtueMart Category Search
    3. Module Position: header-search
    4. Menu Assignment: On all pages
    5. Now follow screenshot and setup-

      documentation

  4. HikaShop Cart Module
    1. Go to Extensions > Modules
    2. Click on New button and select HikaShop Cart Module
    3. Module Position: header-cart
    4. Menu Assignment: On all pages
    5. Now follow screenshots and setup-

      documentation

      documentation

  5. VirtueMart Cart Module

    Make sure you have installed mod_virtuemart_minicart_v.x.x.x.zip module provided with the template.

    1. Go to Extensions > Modules
    2. Click on New button and select VirtueMart Mini Shopping Cart
    3. Module Position: header-cart
    4. Menu Assignment: On all pages
    5. Now follow screenshots and setup-

      documentation

Navigation
  1. Changing Text: CATEGORIES

    documentation

    1. Go to Gantry Admin
    2. Click on Layout tab
    3. Scroll to the Navigation section and click (config icon) next to the Categories and Menu particle

      documentation

    4. Now follow on-screen instructions
  2. Navigation Menu

    documentation

    1. Login to your Joomla! Administrator
    2. Go to Extensions > Modules
    3. Click on New to create new module and select Menu
    4. Module Position: nav-menu
    5. Layout: navmenu
    6. Menu Assignment: On all pages
    7. Now follow on screen instructions and setup.

      documentation

      documentation

  3. Categories menu on home page

    documentation

    1. Create necessary menu and sub-menu items using Joomla!"s default Menu Manager. For shop category and product menu items, create menu items by assigning them with your existing HikaShop or VirtueMart categories.
    2. Go to Extensions > Modules
    3. Click on New button and select Gantry 5 Particle
    4. Click on Pick a Particle and select "Menu" from popup list. Then follow on-screen instructions and setup. See screenshot-

      documentation

    5. Add position name: showcase-a
    6. Menu Assignment: Only on the pages selected; select your Home page only.
  4. Categories menu on other pages
    1. Create another Gantry 5 Menu Particle module by following above steps.
    2. Add position name: nav-categories
    3. Menu Assignment: On all pages except those selected; select your Home page.
  5. How to add image to dropdown menu?

    documentation

    1. First, see Gantry Menu documentation with video here http://docs.gantry.org/gantry5/configure/menu-editor
    2. Go to Gantry Admin
    3. Click on Menu from top right corner

      documentation

    4. Click on a top level menu item name you want to add dropdown image for
    5. Click on + sign to create new column if necessary
    6. Now drag & drop Particle and select Logo / Image and select follow on-screen instructions. See screenshot-

      documentation

Home Page (Image Slider)
Home Page (Image Slider)
  1. Go to Extensions > Modules
  2. Click on New button and select Gantry 5 Particle
  3. Click on Pick a Particle and select "Banner Slider" from popup list. Then follow on-screen instructions and setup.
  4. Add position name: showcase-b
  5. Menu Assignment: Only on the pages selected; select your Home page only.
Home Page (Quick Access Particle)
Home Page (Quick Access Particle)
  1. Go to Extensions > Modules
  2. Click on New button and select Gantry 5 Particle
  3. Click on Pick a Particle and select "Quick Access Links" from popup list. Then follow on-screen instructions and setup.
  4. Add position name: intro-a
  5. Menu Assignment: Only on the pages selected; select your Home page only.
Home Page (Products with countdown)
Home Page (Products with countdown)
  1. For VirtueMart

    Make sure you have installed RCA VirtueMart Products with countdown module provided with the template.

    1. Go to Extensions > Modules
    2. Click on New button to create new module and select RCA VirtueMart Products with countdown
    3. Module Position: about-a
    4. Menu Assignment: Only on the pages selected; select your Home page only.
    5. Now follow other options and setup as you need.
  2. For HikaShop

    Make sure you have installed RCA HikaShop Products with countdown module provided with the template.

    1. Go to Extensions > Modules
    2. Click on New button to create new module and select RCA HikaShop Products with countdown
    3. Module Position: about-a
    4. Menu Assignment: Only on the pages selected; select your Home page only.
    5. Now follow other options and setup as you need.
Home Page (Products Tab - ELECTRONICS)
Home Page (Products Tab - ELECTRONICS)
  1. For VirtueMart

    Make sure you have installed RCA VirtueMart Product Tab module provided with the template.

    1. Go to Extensions > Modules
    2. Click on New button to create new module and select RCA VirtueMart Product Tab
    3. Module Position: feature-a
    4. Menu Assignment: Only on the pages selected; select your Home page only.
    5. Now follow other options and setup as you need.
  2. For HikaShop

    Make sure you have installed RCA HikaShop Product Tab module provided with the template.

    1. Go to Extensions > Modules
    2. Click on New button to create new module and select RCA HikaShop Product Tab
    3. Module Position: feature-a
    4. Menu Assignment: Only on the pages selected; select your Home page only.
    5. Now follow other options and setup as you need.
Home page (Grand Launch Banner)
Home page (Grand Launch Banner)
  1. Go to Extensions > Modules
  2. Click on New button and select Custom
  3. Now add your image, add hyperlink to the image if you need.
  4. Module Position: utility-a
Home Page (Products Tab - ACCESSORIES)
Home Page (Products Tab - ACCESSORIES)
  1. For VirtueMart

    Make sure you have installed RCA VirtueMart Product Tab module provided with the template.

    1. Go to Extensions > Modules
    2. Click on New button to create new module and select RCA VirtueMart Product Tab
    3. Module Position: info-a
    4. Menu Assignment: Only on the pages selected; select your Home page only.
    5. Now follow other options and setup as you need.
  2. For HikaShop

    Make sure you have installed RCA HikaShop Product Tab module provided with the template.

    1. Go to Extensions > Modules
    2. Click on New button to create new module and select RCA HikaShop Product Tab
    3. Module Position: info-a
    4. Menu Assignment: Only on the pages selected; select your Home page only.
    5. Now follow other options and setup as you need.
Home Page (News Inside)
Home Page (News Inside)
  1. Go to Extensions > Modules
  2. Click on New button and select Gantry 5 Particle
  3. Click on Pick a Particle and select "Shopin News" from popup list. Then follow on-screen instructions and setup.
  4. Add position name: showcase-2-a
Home page (First Shipping Banner)
Home page (First Shipping Banner)
  1. Go to Extensions > Modules
  2. Click on New button and select Custom
  3. Now add your image, add hyperlink to the image if you need.
  4. Module Position: intro-2-a
Home Page (Categories)
Home Page (Categories)
  1. For VirtueMart

    Make sure you have installed RCA VirtueMart Categories module provided with the template.

    1. Go to Extensions > Modules
    2. Click on New button to create new module and select RCA VirtueMart Categories
    3. Module Position: about-2-a
    4. Menu Assignment: Only on the pages selected; select your Home page only.
    5. Now follow other options and setup as you need.
  2. For HikaShop

    Make sure you have installed RCA HikaShop Categories module provided with the template.

    1. Go to Extensions > Modules
    2. Click on New button to create new module and select RCA HikaShop Categories
    3. Module Position: about-2-a
    4. Menu Assignment: Only on the pages selected; select your Home page only.
    5. Now follow other options and setup as you need.
Home Page (Trending Items)
Home Page (Trending Items)
  1. For VirtueMart

    Make sure you have installed RCA VirtueMart Product Carousel module provided with the template.

    1. Go to Extensions > Modules
    2. Click on New button to create new module and select RCA VirtueMart Product Carousel
    3. Module Position: feature-2-a
    4. Menu Assignment: Only on the pages selected; select your Home page only.
    5. Now follow other options and setup as you need.
  2. For HikaShop

    Make sure you have installed RCA HikaShop Product Carousel module provided with the template.

    1. Go to Extensions > Modules
    2. Click on New button to create new module and select RCA HikaShop Product Carousel
    3. Module Position: feature-2-a
    4. Menu Assignment: Only on the pages selected; select your Home page only.
    5. Now follow other options and setup as you need.
Home Page (MailChimp Newsletter Signup Particle)
Home Page (MailChimp Newsletter Signup Particle)
  1. Go to Extensions > Modules
  2. Click on New button and select Gantry 5 Particle
  3. Click on Pick a Particle and select "Ajax Mailchimp 2" from popup list. Then follow on-screen instructions and setup.
  4. Add position name: info-2-a
Bottom Section
Bottom Section
  • Current Offers
    • Go to Extensions > Modules
    • Click on New button and select Gantry 5
    • Click on Pick a Particle and select "Bottom Menu" from popup list. Then follow on-screen instructions and setup.
    • Module Position: bottom-a
    • Menu Assignment: On all pages
  • Information and My Account
    • Follow above steps for Current Offers
    • Module Positions: bottom-b and bottom-c
  • Get Support
    • Go to Extensions > Modules
    • Click on New button and select Gantry 5
    • Click on Pick a Particle and select "Get Support" from popup list. Then follow on-screen instructions and setup.
    • Module Position: bottom-d
    • Menu Assignment: On all pages
Copyright and Payment Icons
Copyright and Payment Icons
  • Copyright Info
    • Go to Extensions > Modules
    • Click on New button and select Gantry 5
    • Click on Pick a Particle and select "Copyright" from popup list. Then follow on-screen instructions and setup.
    • Module Position: copyright-a
    • Menu Assignment: On all pages
  • Payment Icons
    • Go to Extensions > Modules
    • Click on New button and select Gantry 5
    • Click on Pick a Particle and select "Logo / Image" from popup list. Then select an image with payment icons and follow on-screen instructions for other options.
    • Module Position: copyright-b
    • Menu Assignment: On all pages
HikaShop Settings
HikaShop Settings HikaShop Settings

HikaShop settings

HikaShop settings

HikaShop settings

VirtueMart Settings
VirtueMart Settings VirtueMart Settings

VirtueMart settings

VirtueMart settings

VirtueMart settings

HikaShop Filter - Price Range
HikaShop Filter - Price Range
  1. Creating HikaShop Filter
    1. Login to your Joomla! Administrator
    2. Go to Components > HikaShop > Configuration
    3. Click on Display > Filters

      documentation

    4. Click on New button to create a filter
    5. Follow screenshot below and setup-

      documentation

  2. Creating Filter Module
    1. Go to Extensions > Modules
    2. Click on New button and select HikaShop Filter Module
    3. Follow screenshot below and setup-

      documentation

    4. Module Class Suffix: hikashop-sidebar-filter
    5. Module Position: sidebar
HikaShop Filter - Filter by Brand
HikaShop Filter - Filter by Brand
  1. Creating HikaShop Filter
    1. Login to your Joomla! Administrator
    2. Go to Components > HikaShop > Configuration
    3. Click on Display > Filters

      documentation

    4. Click on New button to create a filter
    5. Follow screenshot below and setup-

      documentation

  2. Creating Filter Module
    1. Go to Extensions > Modules
    2. Click on New button and select HikaShop Filter Module
    3. Follow screenshot below and setup-

      documentation

    4. Module Class Suffix: hikashop-sidebar-filter
    5. Module Position: sidebar
HikaShop Filter - Filter by Color
HikaShop Filter - Filter by Color

Note: If you have created products characteristics then you can create this types of filter.

  1. Creating HikaShop Filter
    1. Login to your Joomla! Administrator
    2. Go to Components > HikaShop > Configuration
    3. Click on Display > Filters

      documentation

    4. Click on New button to create a filter
    5. Follow screenshot below and setup-

      documentation

  2. Creating Filter Module
    1. Go to Extensions > Modules
    2. Click on New button and select HikaShop Filter Module
    3. Follow screenshot below and setup-

      documentation

    4. Module Class Suffix: hikashop-sidebar-filter
    5. Module Position: sidebar
Setup Blog
  1. First, Read Setup Blog in Joomla and setup your blog.
  2. Search module:
    1. Go to Extensions -> Modules
    2. Click on New button to create new module
    3. Select a Module Type: Search
    4. Show Title: Show
    5. Position: aside
    6. Menu Assignment: [blog menu item]
  3. Login form:
    1. Go to Extensions -> Modules
    2. Click on New button to create new module
    3. Select a Module Type: Login
    4. Show Title: Show
    5. Position: aside
    6. Menu Assignment: [blog menu item]
  4. Tags:
    1. Go to Extensions -> Modules
    2. Click on New button to create new module
    3. Select a Module Type: Tags - Popular
    4. Show Title: Show
    5. Position: aside
    6. Menu Assignment: [blog menu item]
  5. Subscribe:
    1. Go to Extensions -> Modules
    2. Click on New button to create new module
    3. Select a Module Type: Gantry 5 Particle
    4. Pick a Particle: Ajax MailChimp; then follow on screen instructions in the particle.
    5. Show Title: Show
    6. Position: aside
    7. Menu Assignment: [blog menu item]
Contact Page
  1. Creating Contact Form
    1. Go to Menus -> Main Menu -> Add New Menu Item
    2. Select Menu Item Type* -> Contacts -> Single Contact

      documentation

    3. Click on Create button to create new contact form or select your existing form

      documentation

    4. Form Settings

      documentation

      documentation

  2. Adding Contact Details
    1. Go to Extensions > Modules
    2. Click on New button to create new module
    3. Select a Module Type : Gantry 5 Particle
    4. Pick a Particle : Contact Details; and then follow on-screen instructions
    5. Show Title : Show
    6. Position : aside
    7. Menu Assignment : Only on the pages selected > Contact page
Customizing 404 Error Page

404 error page will get configurations from Base outline, however you could add more information or customize 404 page by following -

  1. Go to Gantry Admin
  2. Switch to Error

    documentation

  3. Click on Layout tab and customize as you need.
Customizing Offline Page
  1. Go to Gantry Admin
  2. Switch to Offline

    documentation

  3. Click on Layout tab and customize as you need.
Other Particles

All other particles are documented inside. If you need help, please post your questions on Support Forum

Optimizing for best performance

After done configuration and customization,

  1. Read What is responsible for my Joomla! website performance?
  2. activate Production mode, check above Development and Production Modes
  3. Recompile CSS from Styles tab
Support

If you have any questions, got a bug or need help configuring the template, please post your questions on our Support Forum. If you need more customization, check out Custom Services and get your job done by professionals who developed this Template and Particles.