Template Intro Video



Installation Guide
Before you start, if you hate reading documentation, or you don't have time for this, or you are not familiar with this stuff, we recommend you to consider our Installation Service
Installing and using FlatShop template are just easy as we made it all simple for you. So, we have 2 options for you to follow which are:

Making a New Site?

If you are planning to make a brand new Joomla site, then it's recommended to use our Quickstart package to clone our demo site and replace the demo content with yours. This would take you just 5-6 minutes, watch the video below for details:



What you need to do are to:


1. Locate the Quickstart zip file in your downloaded package: flatshop_quickstart.zip

2. Use a FTP client to upload the zip file to your server/hosting.

3. While waiting for the file to be uploaded, go to your server panel to prepare a new database and database account (if you have already had a database you can ignore this step).

4. Use File Manager tool from your server panel to extract the zip file.
Note: If your server panel does not have a tool to extract a zip file, you should extract it on your disk then upload the extracted files and folders to your server.
5. Load your site URL to perform the installation, for example: http://mydomain.com/flatshop/

6. The first screen will show you a pre-installation report which may require you some changes or fixes for your server to meet the minimum requirements to run the installation. If you don't see any error, just click Next.

7. Fill your database connection details, set a suffix for your database tables, then click Next. Our dumped database will be restored on yours, when it's done, click Next Step.

8. In this screen, you can set your site's details and password for your Joomla backend, click Next when all filled.

9. You are almost done, just click the red button to remove Installation folder.

10. Enjoy your new site!

2. Installing on your live site?

This will take you awhile to get the template and modules configured, don't worry, I heard you hated reading so I made a video with an awesome background music, so installing Flatshop will feel like chilling



Bellow are steps to do if the video does not really help you:
Installing Template

1. From your Joomla backend, navigate to Extensions --> Extension Manager

2. Browse to the template zip file on your disk: flatshop_template.zip

3. Click Upload & Install

4. After your template is installed, navigate to Extensions --> Template Manager

5. Set Flatshop as default template of your site.

Configuring Template

1. From the Template Manager screen, click to edit Flatshop.

2. Leave everything in Basic Settings tab as default (unless you want to change).

3. Leave everything in Layouts tab as default if you want to have the same layout with our demo.

4. Fonts tab:


HTML Code:
body button, 
.header,
.featured-view .spacer h3, 
.latest-view .spacer h3, 
.topten-view .spacer h3, 
.related-products-view .spacer h3, 
.browse-view .row .product .spacer h2,
.category-view .row .category .spacer h2,
h1,h2,h3,h4,h5,h6,
.box.bigtitle .header,
.gkMenu > ul > li,
h3.catProductTitle,
.product-overlay span,
#product-tabs li,
.gkPriceTable dt,
.gkPriceTable dd.gkPrice,
#gkMenuOverlayContent li,
.gkPrice,
.gkTotal,
.itemAuthorData h3


HTML Code:
body,
#gkTopMenu,
#btnCart,
#gkFooter,
.catProductPrice,
.gkNspPM-ProductGallery2 .PricetaxAmount,
.gkNspPM-ProductGallery2 .gkAddToCart input.addtocart-button,
.gkNspPM-ProductGallery2 .gkReadon,
.gkMenu > ul li div.childcontent li,
#com-form-login > h4,
.pane-sliders .panel h3

  • Leave other settings as default.


5. Features tab:


  • Logo type: From Image
  • Logo image: Browse to your logo file. (if you want to use our flatshop logo, change Logo Type to From CSS).
  • Font-size Switcher: Always disabled (unless you want it to appear everywhere).
  • Suffixes for pages: Add suffix "frontpage" for your homepage (first field: your Home menu item ID; last field: frontpage).
  • Leave other settings as default.


6. Menu tab:

  • Menu type: we use Classic Menu for our demo, however you may try Overlay style.
  • Show template menu: ON
  • Choose menu: select the menu you want to display as main navigation of your site.
  • End item level: -1
  • Menu animation: Fade & Slide
  • Leave other settings as default


7. Social API tab:



8. Cookie Law tab: If you wish to have a cookie constent panel to appear at your site for the EU Cookie Law, just turn this On.


9. Advanced Settings tab:


  • Use GK Cache: turn this on if you want to cache your site to load faster (this requires the GK Cache plugin enabled and System Cache plugin disabled)
  • CSS Cache: turn this on if you want to cache your CSS files.
  • CSS Compression: turning this on will combine all CSS files into 1 file so your site will load faster.
  • CSS Override: Turn this on if you want to add your custom CSS code.
  • Use Prefixfree: If you add a custom CSS code which is not compatible with different browsers, try turning this setting On.
  • Javascript Compression: turning this on will combine all JS files into 1 file, but be careful because this may make some javascript conflicts for your site.
  • Excluded CSS/JS: List all the files you don't want to be combined for CSS and Javascript compression modes to remove conflicts.
  • Custom CSS Code: add your custom css code in this box (this requires CSS Override enabled).


10. Updates tab: you have nothing to configure here, this tab will alert you when the template has a new version.

Modules Configuration

1. Language Switcher:

  • Module type: Language Switcher
  • Module position: toptools
  • Assign to all pages.



2. Currency Switcher:

  • Module type: VirtueMart Currency Selector
  • Module position: toptools
  • Assign to all pages.



3. Top/right Menu:

  • Module type: Menu
  • Module position: topmenu
  • Assign to all pages.
  • My Account: add "login" to Link Tittle Attribute of this menu to have login icon.
  • Register: add "register" to Link Tittle Attribute of this menu to have register icon.
  • Help: add "help" to Link Tittle Attribute of this menu to have help icon.



4. Login: (will show as a popup)

  • Module type: Login
  • Module postion: login
  • Assign to all pages.



5. Search:

  • Module type: search
  • Module position: search
  • Assign to all pages.



6. Cart:

  • Module type: VirtueMart Shopping Cart
  • Module position: cart
  • Assign to all pages.



7. Slideshow

  • Module type: Unite Revolution Slider
  • Module position: header
  • Assign to homepage only.



8. Three promo banners:

  • Module type: banner
  • Module position: top1
  • Assign to homepage only.



9. Hot Products:

  • Module names: **Hot** Products
  • Module type: News Show Pro GK5
  • Module position: top2
  • Assign to homepage only.
  • Module suffix: bigtitle
  • Module Mode: Product Gallery
  • Thumbnail: 220 x 275
  • Use default CSS: Off



10. New Products:

  • Module names: **New** Products
  • Module type: News Show Pro GK5
  • Module position: mainbody
  • Assign to homepage only.
  • Module suffix: bigtitle
  • Module Mode: Product Gallery II
  • Thumbnail: 220 x 275
  • Use default CSS: Off



11. Men Brands:

  • Module names: **Men** Brands
  • Module type: menu
  • Module position: sidebar



12. Best Sales:

  • Module names: **Best** Sales
  • Module type: Virtuemart Products
  • Module position: sidebar
  • Show Add To Cart Link: No



13. Social Activities:

  • Module names: **Social** Activities
  • Module type: Community - Activity Stream
  • Module position: sidebar



14. Social Members:

  • Module names: **Social** Members
  • Module type: Community - Members Module
  • Module position: sidebar



15. From The Blog:

  • Module names: **From** The Blog
  • Module type: News Show Pro GK5
  • Module position: bottom1
  • Module suffix: bigtitle
  • Module Mode: News Blocks
  • Thumbnail: 232 x 212
  • Use default CSS: ON



16. Manufacturers:

  • Module type: News Show Pro GK5
  • Module position: bottom1
  • Module Mode: News Gallery
  • Thumbnail: 166 x 103
  • Use default CSS: ON



17. Contact Info:

  • Module type: Custom HTML
  • Module position: bottom2
  • HTML Code:

HTML Code:
<address>
<p>45 Park Avenue, Apt. 303</p>
<p>New York, NY 10016</p>
<p><i class="icon-phone"></i> +1-315-7434323</p>
<p><i class="icon-envelope"></i><a  href="mailto:contact@leebros.us">contact@leebros.us</a></p>
</address>
18. Shop Info:
  • Module type: menu
  • Module position: bottom2



19. User Links:

  • Module type: menu
  • Module position: bottom2



20. Get Our Newsletters:

  • Module type: acymailing module
  • Module position: bottom2
  • Display mode: tableless



21. Latest Photos:

  • Module type: Community - Photos Module
  • Module position: bottom2



22. Social Icons:

  • Module type: Custom HTML
  • Module position: bottom2
  • HTML Code:

HTML Code:
<ul class="social">
<li class="facebook"><a href="#" title="Facebook">Facebook</a></li>
<li class="twitter"><a href="#" title="Twitter">Twitter</a></li>
<li class="gplus"><a href="#" title="Google">Google</a></li>
<li class="linkedin"><a href="#" title="Linkedin">Linkedin</a></li>
</ul>
If you are stuck in any step, please post it here or open a new thread, I'm always around to help.

Good luck & Enjoy!