Requirements
  • System & Server Requirements:
    • Joomla 3.4+
    • HikaShop 3+
    • PHP 5.5.9+
  • Browser Requirements:
    • Google Chrome 41+
    • Firefox 36+
    • Safari 8+
    • Opera 28+
    • Internet Explorer 11+
    • Microsoft Edge
Installing RnShop Template Installing RnShop Quickstart Package? Accessing Gantry Admin Development and Production Modes
Changing Template Styles

The Styles administrative panel gives you the ability to quickly and easily configure settings related to the appearance of this template. This includes being able to switch between pre-configured presets, body and sections colors, font sizes as well as to refine the look of an outline using a set of style settings linked to this template.

  1. Go to Gantry Admin
  2. Switch to Base Outline for global Styles settings

    documentation

  3. Now click on Styles tab and configure.
  4. Check this video for more details-

     

Configuring Page Settings

The Page Settings administrative panel allows you to extend the output of the page by letting you include additional elements. This includes elements such as the favicon, Facebook and Twitter meta tags, and even JavaScript and/or CSS files. All of these elements are meant to be shared across the entire site and Page Settings is what lets you do so.

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

    documentation

  3. Click on Page Settings and Check here for details.
Configuring Template Layout

The Layout Manager in the template administration interface provides several options for setting up the layout of the theme's Outlines.

  1. Go to Gantry Admin
  2. Switch to Base Outline for global Layout settings or switch to your desired Outline for desired Layout.

    documentation

  3. Now click on Layout tab and configure.
  4. Check this video for more details-

     

More Configuration
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
  3. Lightcase (Optional- enable if you use lighbox/popup image with Particles or others.)

 

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, disable unnecessary options you're not using except listed below. It will avoid loading unnecessary files you're not using.

    1. Core Features - CSS3 Animation and Icon List (Material Icons)
    2. Basic Features - Owl Carousel, Transition, Dropdown, Accordion, Dimmer and Modal.
    3. Particles - Tabs
    4. Typography - Message
    5. Note - If you use other features and particles, you need to enable them in the RcaTheme Elements atom to work properly.
Using Icons
  1. Material Icons
    1. Go to https://material.io/icons
    2. Click on your desired icon and copy the code. For example - <i class="material-icons">sentiment_satisfied</i> for sentiment_satisfied and paste on your Particle, Joomla article and module editor by switching Code editor (HTML).
  2. 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
Header Section
  1. Social Icons

    documentation

    1. Go to Gantry Admin
    2. Click on Layout tab

      documentation

    3. Scroll to the Header section and click (config icon) next to the Social particle.

      documentation

    4. Now follow on-screen instructions to add your social profile icons.
  2. Top Menu

    documentation

    1. Follow 1.1 & 1.2 under above Social Icons
    2. Scroll to the Header section and click (config icon) next to the Top Menu particle.

      documentation

    3. Now follow on-screen instructions to add your desired link with Iconic horizontal menu.
Navigation Section
Navigation Section
  1. Logo

    documentation

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

      documentation

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

    documentation

    1. Follow step 1.1 & 1.2 under above Logo
    2. Scroll to the Navigation section and click (config icon) next to the Menu particle.

      documentation

    3. Now follow on-screen instructions.
  3. Panel Buttons

    documentation

    1. Search Module

      documentation

      1. Go to Extensions -> Modules
      2. Click on New button to create new module
      3. Select a Module Type : Search
      4. Show Title : Hide
      5. Position : Keep empty
      6. Menu Assignment : On all pages
    2. Login Module

      documentation

      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 : Keep empty
      6. Menu Assignment : On all pages
    3. Cart Module

      documentation

      1. Go to Extensions -> Modules
      2. Click on New button to create new module
      3. Select a Module Type : Hikashop Cart Module
      4. Show Title : Hide
      5. Position : Keep empty
      6. Menu Assignment : On all pages
    4. Adding above modules to Panel Buttons Particle
      1. Go to Gantry Admin
      2. Click on Layout tab
      3. Scroll to the Navigation section and click (config icon) next to the Panel Buttons particle.

        documentation

      4. Now under PANEL BUTTONS edit Search panel, Login Panel and Joomla Module with above modules you created now.
    5. Dropdown Panel (For Medium - Small Device)

      documentation

      1. Now under PANEL BUTTONS edit Dropdown Panel and add Header Section's - Social and Top Menu Items, so they can show on medium and small devices instead of on the Header Section
Home page - Slideshow
Home page - Slideshow
  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 : Slideshow; and then follow on-screen instructions to create your slider.
  5. Slideshow Settings

    documentation

  6. Show Title : Hide
  7. Position : fullwidth-1
  8. Menu Assignment : Only on the pages selected -> Home page
Home page - Icon Features
Home page - Icon Features
  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 : Icon Features; and then follow on-screen instructions to create Icon Boxes
  5. Icon Features Settings

    documentation

  6. Show Title : Hide
  7. Position : showcase-a
  8. Menu Assignment : Only on the pages selected -> Home page
Home page - Custom Product Categories
Home page - Custom Product Categories
  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 : Product Categories; and then follow on-screen instructions to create Custom Product Categories
  5. Product Categories Settings

    documentation

  6. Show Title : Hide
  7. Position : intro-a
  8. Menu Assignment : Only on the pages selected -> Home page
Home page - Best Sellers
Home page - Best Sellers
  1. Go to Extensions -> Modules
  2. Click on New button to create new module
  3. Select a Module Type : HikaShop Content Module
  4. Module Class Suffix : product-carousel title-border3

    documentation

  5. Show Title : Show
  6. Position : about-a
  7. Menu Assignment : Only on the pages selected -> Home page
  8. HikaShop Options

    documentation

Home page - Product Tabs
Home page - Product Tabs
  1. Creating HikaShop Content Modules
    1. Go to Extensions -> Modules
    2. Click on New button to create new module
    3. Select a Module Type : HikaShop Content Module
    4. Module Class Suffix : product-carousel2

      documentation

    5. Show Title : Hide
    6. Position : Keep it empty
    7. Menu Assignment : On all pages
    8. HikaShop Options

      documentation

    9. Repeat above steps to create POPULAR PRODUCTS AND DISCOUNTED PRODUCTS module or any.
  2. Adding Modules to the Tab
    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 : Tabs
    5. Tabs Options
      1. Tab Settings

        documentation

      2. Tab Contents

        documentation

      3. Tab Items

        documentation

        Form the Joomla Module, select a HikaShop content module you created now.

        Repeat this steps for other items.

    6. Show Title : Hide
    7. Position : content-top-a
    8. Menu Assignment : Only on the pages selected -> Home page
Home page - Search & Product Categories
Home page - Search & Product Categories
  1. Search Module
    1. Go to Extensions -> Modules
    2. Click on New button to create new module
    3. Select a Module Type : Search
    4. Search Button : Yes
    5. Show Title : Hide
    6. Position : sidebar
    7. Menu Assignment : Only on the pages selected -> Home page
  2. Product Categories
    1. Go to Extensions -> Modules
    2. Click on New button to create new module
    3. Select a Module Type : Hikashop Content Module
    4. Show Title : Show
    5. Position : sidebar
    6. Menu Assignment : Only on the pages selected -> Home page
    7. Hikashop Options

      documentation

Home page - Boxed Icon
Home page - Boxed Icon
  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 : Boxed Icon; and then follow on-screen instructions to create Boxed Icon
  5. Boxed Icon Settings

    documentation

    documentation

  6. Show Title : Hide
  7. Position : showcase-2-a
  8. Menu Assignment : Only on the pages selected -> Home page
Home page - CTA
Home page - CTA
  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 : Call To Action; and then follow on-screen instructions to create Call To Action section
  5. Call To Action Settings

    documentation

  6. Show Title : Hide
  7. Position : intro-2-a
  8. Menu Assignment : Only on the pages selected -> Home page
Home page - Top Brands
Home page - Top Brands

Top Brands carousel shows brand logos from Hikashop brands. Make sure you have added brand logo on your hikashop product brands.

  1. Go to Extensions -> Modules
  2. Click on New button to create new module
  3. Select a Module Type : HikaShop Content Module
  4. Module Class Suffix : brand-carousel title-border1
  5. Show Title : Show
  6. Position : about-2-a
  7. Menu Assignment : Only on the pages selected -> Home page
  8. HikaShop Options

    documentation

Bottom Section
Bottom Section
  1. Bottom Menu
    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 : Bottom Menu; and then follow on-screen instructions
    5. Show Title : Hide
    6. Position : bottom-a
    7. Menu Assignment : On all pages
  2. Ajax Mailchimp Subscription
    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; and then follow on-screen instructions
    5. Show Title : Hide
    6. Position : bottom-b
    7. Menu Assignment : On all pages
Copyright Section
Copyright Section
  1. Copyright Info
    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 : Copyright; and then follow on-screen instructions
    5. Show Title : Hide
    6. Position : copyright-a
    7. Menu Assignment : On all pages
  2. Horizontal Menu
    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 : Top Menu; and then follow on-screen instructions
    5. Show Title : Hide
    6. Position : copyright-b
    7. Menu Assignment : On all pages
Hikashop Settings

Hikashop settings

Hikashop settings

Hikashop settings

Translating Hikashop Filters and Sorts Text
  1. Go to Extensions -> Templates -> Templates
  2. Click on R_rnshop Details and Files
  3. Go to language/en-GB/en-GB.tpl_r_rnshop.ini
  4. Now edit text within double quote (" ") from below lines:

    R_RNSHOP_PRODUCT_FILTER_SORT_BY="Sort by"
    R_RNSHOP_PRODUCT_FILTER_NAME_ASC="Name: Ascending"
    R_RNSHOP_PRODUCT_FILTER_NAME_DESC="Name: Descending"
    R_RNSHOP_PRODUCT_FILTER_PRICE_LOW="Price: low to high"
    R_RNSHOP_PRODUCT_FILTER_PRICE_HIGH="Price: high to low"
    R_RNSHOP_PRODUCT_FILTER_DATE="Date Added"
    R_RNSHOP_PRODUCT_FILTER_SEARCH="Search products..."
    R_RNSHOP_PRODUCT_FILTER_EMPTY_RESULT="No result"

  5. After done, click on Save & Close
Shop - Products Categories
Shop - Products Categories
  • Follow above Home page - Search & Product Categories -> Product Categories
  • Position : aside
Shop - Featured, New, On Sale Products
Shop - Featured, New, On Sale Products
  1. Go to Extensions -> Modules
  2. Click on New button to create new module
  3. Select a Module Type : HikaShop Content Module
  4. Module Class Suffix : hikashop-listing-mini

    documentation

  5. Show Title : Show
  6. Position : aside
  7. HikaShop Options

    documentation

  8. Repeat above steps for creating other modules.
Blog
Blog

You can write Blog posts easily with powerful Joomla! default Article and RcaTheme Post Plugin. By installing RcaTheme Post Plugin, you will have extra tab on Joomla! Article Editor which by using you can add Image gallery, YouTube or Vimeo Video with beautiful and custom video player, Audio iFrame (for example- Soundcloud) and Social share buttons.

  1. Installing RcaTheme Post Plugin
    1. Download plg_RcaThemePost_v.x.zip from your download area of RcaTheme.com
    2. Go to Extensions -> Manage -> Install

      documentation

    3. On the Upload Package File tab, select or Drag & drop RcaTheme Post Plugin zip file

      documentation

    4. Now Go to Extensions -> Plugins and search RcaTheme Post
    5. Now Enable this plugin.
  2. Creating Blog Categories

    We will use an specific Joomla! article category for blogging. Lets call it Blog and you can create any sub categories under Blog category.

    1. Go to Content -> Categories -> Add New Category
    2. On the next screen, add a Title, for example - Blog or any
    3. Now Save & Close
    4. You can create other sub categories under Blog category.
  3. Creating Blog Posts
    1. Go to Content -> Articles -> Add New Article
    2. Now add a blog post Title -> Write your article -> Select Category Blog or sub category under Blog.

      documentation

    3. Adding Intro Image : Click on Images & Links tab -> Select an image on Intro Image . For listing your posts beautifully, add same size (width = 450 * height = 302) images for all posts Thumbnail/Intro image.

      documentation

    4. Standard Post/ Image Post : Click on Images & Links tab -> Select an image on Full Article Image

      documentation

    5. Image Gallery, Video & Audio Posts:

      Note: If you add an image on Full Article Image as followed previous Standard Post/ Image Post; Image Gallery, Video & Audio Posts: options will not work. So, you need to remove Full Article Image if you already added.

       

      Now click on RcaTheme Post Options tab and see below-

      documentation

      1. Post Type : Image Gallery; Add your images with Image Gallery - Add Images options.
      2. Post Type : YouTube Video; Add YouTube video ID, for example- bLBIrnx6BF8 from full URL https://www.youtube.com/watch?v=bLBIrnx6BF8 using YouTube Video ID option.
      3. Post Type : Vimeo Video; Add Vimeo video ID, for example- 186351925 from full URL https://vimeo.com/186351925 using Vimeo Video ID option.
      4. Post Type : Audio; copy/paste full iframe code for your Audio from Soundcloud using Audio Iframe Code option.
Blog - Latest Posts
Blog - Latest Posts
  1. Go to Extensions -> Modules
  2. Click on New button to create new module
  3. Select a Module Type : Articles - Category
  4. Show Title : Show
  5. Position : aside
  6. Articles - Category Settings

    documentation

    documentation

Blog - Categories
Blog - Categories
  1. Go to Extensions -> Modules
  2. Click on New button to create new module
  3. Select a Module Type : Articles - Categories
  4. Show Title : Show
  5. Position : aside
  6. Articles - Categories Settings

    documentation

Blog - Latest Post Slider
Blog - Latest Post Slider
  1. Go to Extensions -> Modules
  2. Click on New button to create new module
  3. Select a Module Type : Articles - Category
  4. Show Title : Show
  5. Position : content-bottom-a
  6. Articles - Category Settings

    documentation

    documentation

    documentation

Contact Page
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 Google Map
    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 : Google Map; and then follow on-screen instructions
    5. Show Title : Hide
    6. Position : content-top-a
    7. Menu Assignment : Only on the pages selected -> Contact page
  3. 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, although you can add more information or customize 404 page by following -

  • Go to Gantry Admin
  • Switch to Error

    documentation

  • Click on Layout tab and configure as you want.
Customizing Offline Page

Offline page will get configurations from Base outline, although you can add more information or customize Offline page by following -

  • Go to Gantry Admin
  • Switch to Offline

    documentation

  • Click on Layout tab and configure as you want.
Other Particles

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

Optimizing for best performance

After done configuration and customization,

  1. activate Production mode, check above Development and Production Modes
  2. Recompile CSS from Styles tab
  3. Use JCH Optimize plugin to compress CSS and JavaScript.
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.