Flatastic - Responsive Multipurpose VirtueMart Template

Thanks for having purchased Flatastic - Responsive Multipurpose VirtueMart Template, now it's time to get your fingers a little dirty and start configurate your theme. If you have any questions that are beyond the scope of this help file, please feel free to contact us via our Support Ticket. Thanks so much!

Quickstart Installation

If you're not familiar with Joomla we recommended you use the quickstart package.

Quickstart package

A quickstart is basically a brand new installation of Joomla with custom options. When you install this package you'll get a site that looks exactly like the demo and has all extensions already installed and configured. Installing Quickstart package is like install normal joomla!. Just follow these steps below:

  1. You will have 2 options:
    1. Upload the fullpackage.zip file to your host from VM2_Flatastic_theme folder and extract it using cPanel or other File Manger Tools if possible. If you have problem with extracting fullpackage.zip copy into the server unzip.php from VM2_Flatastic_theme folder.
    2. If option above not available, you can extract the fullpackage.zip file in your computer, and upload all file to your host using FTP client program. I use Fire FTP - Firefox plugins, it's totaly free, if you don't have FTP Software.
  2. Start installation by typing your URL to the directory you have placed quickstart files. The installation page should be appeared as normal Joomla! installation.
    When you install joomla you will do 7 steps.
    1. Step : Language
    2. Step : Pre-installation check
    3. Step : License
    4. Step : Database
    5. You need to use Table Prefix "jos_"

    6. Step : FTP configuration
    7. Step : Configuration ( very important to install the sample data at this step )
      At this step : You need fill out the site name, email, admin name and password and then scroll down to the button that says "Install sample Data" and click it. When using the quick start packages its really very important to install the sample data. You should get a success message shortly afterwards which means all of the content from the demo site has been loaded into the database you created as a part of step 4.
    8. Step : Finish
    9. Important!!!! Do this action obligatory:
    10. After all the necessary changes are applied save the values of each module by clicking the "Save & Close" button in the upper right corner.

      You have to re-assign in DataBase vendor. Follow screenshots

 

If you are an advanced user and want to install it step by step, then the following steps will help you with this. Please keep in mind that you need to do installation in a proper order.

Then read more.

Template Framework built with Bootstrap & LESS, powered by YOU

If you're not familiar with Joomla we recommended you use the quickstart package.

At the begining you need to download the T3 Framework plugin http://t3-framework.org/downloads.html. Then install and activate it in the manager plugins. Please see below:


The plugin is also placed in the source folder. I recommend you to take it from this folder because at the time of your purchase the plugin might be updated, while we have not updated the template yet and not to check the plugins compatibility. As the result there might be errors.

1) T3 Framework Overview

Our T3 framework is the most popular template framework for Joomla. It powers all our T3 based templates and is available for Joomla 1.5, 2.5 and 3.0. For the ease of upgrades the framework is in the plugin format and is installed separately. With over 3 years of active development T3 framework has come a long way and is more roburst, user friendly, feature rich, easy to customize and not to mention the responsive layouts support which not only looks good on all browsers and devices but also works like a charm.

2) Main Features

Responsive,Jooml! 2.5 and Joomla! 3.0 Native,MegaMenu,Integrate Bootstrap,HTML5,Utilize LESS CSS,Multiple Layouts,Typography,Multiple Themes,ThemeMagic

3) Developer Network Update

Nov 2011: With the first stable release, JoomlArt officially move monthly template development to T3
Dec 2012: A handful independent Joomla developer and group started using T3 as their codebase for custom work: http://pbwebdev.com/, http://www.qubesys.com/, Themeforest.com authors
Jan 2013: The JoomlaBamboo Club adopted T3 http://www.joomlabamboo.com/blog/template-news/zen-to-the-power-of-t3
23rd Jan 2013: Bang2Joom.com team adopts T3
25th Jan 2013: ThemeRox adopts T3

4) Copyright and License

Copyright (C) 2005 - 2013 T3-Framework.org. All rights reserved.
Distributed under the GNU General Public License version 2 or later.
Speical Thanks to Anthony & JoomlaBammbo team for their continous support & Contribution.

View the demo of this framework and read more detailed documentation you can here http://t3-framework.org/

Template Installation

Installing through Joomla! CMS Extensions Manager:

  1. In the administration section of your Joomla! website go to the Extensions - Extensions Manager.
  2. Then in the "Upload package file" section open the Package File upload dialogue box by clicking on the "Browse" button.
  3. Find the t3_bs3_blank.zip archive from the downloaded template package, click Open and then click "Upload & install".

Template Activation

When you are done with the installation you should activate it. Open Joomla! administration section, then using the main menu please, go to the "Extensions - Template manager" page.

Then choose the newly installed template by clicking the checkbox and click "Make Default" button in the upper right corner. This will enable your template as a default one for your site.

Then click the template name to enter the template configuration page. You should assign the template to the website pages. To do this click "Toggle Selection" button in the "Menus assignment" section.


Virtuemart v2.0.26d installation

Step by step instructions on how you could easily install Virtuemart v2.0.26d.

Virtuemart v2.0.26d has been released recently and it can be install with Joomla 2.5.17 In this tutorial you will learn how to install Virtuemart on Joomla 2.5.17

It is an assumption that you have already installed Joomla 2.5.17 Feel free to check detailed video and text instructions on how to install Joomla content management system

virtuemart-logo-142x142VirtueMart is absolutely huge. By some counts, it stands second in popularity amongst all eCommerce platforms.

VirtueMart comes with a lot of flexibility and there are also many additional extensions available. Get started with the following tutorial. Afterwards you can move on to more advanced features and extensions with confidence.

Getting Started with Virtuemart

VirtueMart comes with some sample data. One of the best ways to get a quick start on using VirtueMart is to set up a development site with the sample data, and start modifying it. In the process of making changes you will learn how to maneuver through the admin, and set up shop. In addition to installation, we'll cover:

  • An overview of the default setup
  • Using the Administration section
  • Modifying the store front
  • Modifying the standard currency
  • Modifying product prices and display
  • Enabling PayPal as the payment method
  • Enabling basic shipping methods

VirtueMart is full of details and options. This will give you a good foundation of skills you need. Since VM 2.0 is so new, there are still many features that need to be developed, and will be available in the coming months. If you learn these basics you'll be able to take advantage of the full power of VM 2.0 as it's released.

Step 1. ACTION: Download, uncompress

To find this version from http://virtuemart.net go to Downloads > other downloads or go directly to this URL http://dev.virtuemart.net/projects/virtuemart/files.

Be sure to download the newest version which is at the bottom of the list. They are alphabetical so the order is determined by the last letter in the version name. If there is a newer version when you read this, it will be there. If 2.0 is officially released you will be able to download it from the main URL http://virtuemart.net.

You can find extensions on the the Virtuemart site http://virtuemart.net/news/virtuemart-extensions

Notice in the name of the VirtueMart download that it says _extract_first - after you download it you will need to uncompress the file on your local computer or your server. You will see two more zipped directories.

After you uncompress the original file, upload and install com_virtuemart.1.9.8k.zip.

Repeat the procedure for com_virtuemart_ext_aio,1.9.8k.zip

The first one is the Virtuemart shopping cart itself, the second is a bundle of extensions and modules to enhance it. The aio in the name stands for All In One Installer (AIO).

Step 2. ACTION: Install

Go to Extensions > Extension Manager > Browse for the file > Click Upload & Install

When you get to the confirmation page, it will ask if you want to install Sample Data. Install the Sample Data.

Repeat the process and upload the AIO

2a. RESULT: The installed modules

You will see these modules automatically installed and enabled in your Modules Manager.

2b. RESULT: The installed plugins

These plug-ins will be automatically installed and enabled. You don't have to go to the Module Manager unless you want to change the position of a module, configure it or disable it. You don't need to visit the plug-in manager unless you need to disable it. There are no configurable parameters for any of the plug-ins.

Step 3. ACTION: Create a Menu Item

Go to Menus > Main Menu > Add New Menu Item.

Your front page will show you a warning that you must create a menu item before the cart will be accessible. So do this first.

3a. CONFIGURE: Name and Select

  1. Give it a Title (Like Store or Shop. I'm going to use Virtue Mart Storefront)
  2. Click Select

3b. CONFIGURE: Complete Selection

Under Virtue Mart click VirtueMart Default Layout.

You could pick Categories Layout or Category Layout if it suits you or you are creating a specific link. The default layout will create a "Store Front".

3c. RESULT: The store front with sample data installed.

tutuploads3c_-_RESULT_The_store_front_with_sample_data_installed..png

To View the store go to your home page and click the menu link you just created.

You will notice that all the modules that were installed now show on the site. You can modify and configure these in the Module Manager.

  • VM - Shopping cart is closed
  • VM - Best Sales is closed
  • VM - Search in Shop is closed
  • VM - Featured products is closed
  • VM - Currencies Selector is closed
  • VM - Manufacturer is closed
  • VM - Category

The page divisions show products and create sections on the store front.

  1. Store Description
  2. Categories
  3. Featured Products
  4. Latest Products (empty until you add your own)
  5. Top Ten Products

Step 4. ACTION: Start modifyng the company information

tutuploadsStep_4._ACTION_Start_modifyng_the_company_information.png

Go to Components > Virtuemart
Click on Shop - You can use the shop icon or click Shop from the menu. Both will work.

Step 5. CONFIGURE: Modify Vendor Information

tutuploadsStep_5._CONFIGURE_Modify_Vendor_Information.png

Change the shop name and company name to yours.
Set the default currency and modify the list of accepted currencies.

The default will be set to Euros. To change the default currency, select a different one from the drop down menu.

Step 6. CONFIGURE: Modify the base currency and other accepted currencies

tutuploadsStep_6._CONFIGURE_Modify_the_base_currency_and_other_acce.png

Use the dropdown to change the base currency.

I've changed the default currency to United States dollar, now all the prices will show with a dollar sign in the cart.

One of the modules you uploaded was a currency chooser. The user, while viewing the store, can use it to switch to any other currency you've approved. If you want to add or delete any other currencies use the List of accepted currencies field.

6a. CONFIGURE: Choose other currencies

tutuploads6a._CONFIGURE_Choose_other_currencies.png

Place the cursor in the field and a selection menu will appear. You can click the x next to the ones that were added by default to delete them, or add one by clicking on the list selection.

6b. RESULT: Your currency section should like this

tutuploads6b._RESULT__Your_currency_section_should_like_this.png

For the currency selector to work, you will need to add the base currency to the list of accepted currencies. If you don't the currency selector on the front end won't show the option for the customer.

If you only are going to use one type, you can leave the List of accepted currencies field blank, and just set the main currency.

Step 7. ACTION: Change the logo image

tutuploadsStep_7._ACTION_Change_the_logo_image.png
  1. Scroll down to the Image Information Panel
  2. Change the name and details. ( You could un check Published if you aren't going to use a graphic)
  3. Check the proper radio button. Nothing will change if you don't choose. This is confusing because of the placement of the labels. Pick the right one.
  4. Browse your computer for the file to upload
  5. Return to the top of the page and click Save to complete the action

7a. REPEAT: For thumbnail

tutuploads7a._REPEAT__For_thumbnail.png

I found I had to repeat this step to generate and replace the thumbnail.

Step 8. CONFIGURE: Change the Vendor Additional Information

tutuploadsStep_8._CONFIGURE_Change_the_Vendor_Additional_Informatio.png
  1. Switch to the Additional Information tab
  2. Fill in the required fields
  3. Click Save at the top of the page

The fields indicated with an asterisk and a blue background must be filled in or you will not be able to save your changes. If you were starting the store from scratch instead of using sample data, all these fields would be empty and you would need to make this the first task on your list before you could change anything on the other tabs.

Step 9. ACTION: Enable Payment Methods

tutuploadsStep_9._ACTION_Enable_Payment_Methods.png

On the VirtuMart Menu go to Shop > Payment Methods.

When you get there you will see a mostly blank page.

9b. CONFIGURE: Add new

tutuploads9b._CONFIGURE_Add_new.png

Click New.

9c. CONFIGURE: Choose method

tutuploads9c._CONFIGURE_Choose_method.png
  1. Go to the Payment Method Information tab
  2. Click Yes to Publish
  3. Fill in a Payment Name ( it won't save unless you do this)
  4. Choose the payment method VM - Payment, Standard
  5. Click Save at the top of the page

REPEAT: If you are going to use PayPal in addition to VM - Payment, Standard, repeat this step and choose Paypal this time.

At this time there are only two payment methods available for VM2.0 We expect to see many more in the near future. You can get some plug-ins now from the JED for specific gateways, and several are on the road map for the VirtueMart development project, but no set release times. Eventually there will be many choices for you here.

Step 10. ACTION: Publish the payment methods

tutuploadsStep_10._ACTION_Publish_the_payment_methods.png

Now that they are enabled you will see them on the Payment Method List.

  1. Make sure you have published the ones you want.
  2. Click VM Payment Paypal. Click the Payment name, or select the box and use the edit icon at the top.

10a. CONFIGURATION: Switch tabs

tutuploads10a._CONFIGURATION_Switch_tabs.png

Choose the Configuration tab.

Edit the Parameters.

Be sure to save.

If you are going to use Payment Method logos, you will need to create folder using the Media Manager, or FTP, in this location
/img/stories/virtuemart/payment

Step 11. ACTION: Enable the shipping methods

tutuploadsStep_11._ACTION_Enable_the_shipping_methods.png
  1. On the VirtueMart menu go to Shop > Shipping Methods
  2. Click on New

You will see another blank page similar to the one for payment methods. The procedure for adding shipping is similar to adding payment methods.

11a. CONFIGURE: Choose method

tutuploads11a._CONFIGURE_Choose_method.png
  1. Go to the Shipping Method Information tab
  2. Click Yes to Publish
  3. Add a Shipping Name
  4. Choose the method from the dropdown list
  5. Save your changes

There is only one shipping method at this time More are in the works.

11b. CONFIGURE: Configure the shipper

tutuploads11b._CONFIGURE_Configure_the_shipper.png
  1. Go to the Configuration tab
  2. Add the parameters

If you are going to use a logo, you will first need to create the folder for the img at:
/img/stories/virtuemart/shipper

The next item you could configure at this stage would be taxes.That's a big topic and deserves its own tutorial. There are sample tax structures set up now which we can use for the rest of the tutorial. We've adjusted and enabled all the basics, now let's get on to what most people want to do first. Change the way things look.

Step 12. ACTION: Modify the products

tutuploadsStep_14._ACTION_Modify_the_products.png

When you look at the short listing on the shopfront, you notice right away that there is an incredibly confusing array of prices. We need to fix that. So let's go to Pricing tab in the Configuration section.

12a. CONFIGURE: Enable and disable unwanted prices

tutuploads14a._CONFIGURE_Enable_and_disable_unwanted_prices.png

Click Pricing and you will see check boxes for showing or not showing the prices. Un check the ones you don't want to show. The Show Column controls the actual numbers. The Show Label column controls the label like "Salesprice without tax".

12c. RESULT: The modified products on the shopfront

tutuploads14c._RESULT_The_modified_products_on_the_shopfront.png

Here are the same products with the both columns checked next to "Final salesprice" and everything else unchecked.

Extensions

You need to install all the modules, plugins and components which are placed in the sources folder. It's needed if you want that the theme looks like on the demo. Also, in the VM2_Flatastic_theme folder there is the theme which is needed to be installed via the installation manager (see the description above). It is advisable to keep the order of installation:

Modules Configuration

You also need to upload the following folders to the root of your Joomla! installation:
sources\to_the_root_directory\images
sources\to_the_root_directory\media

To make your Joomla! look like our live demo please, install the database dump that is located in sources\dump.sql.ATTENTION: By default Joomla! installation comes with only the Main Menu module installed. Therefore to make your Joomla! site look like our live demo please, install all necessary modules through the administration section of your site. You may also need to add all the menu items and articles by yourself.

Important!!!! Do this action obligatory: After all the necessary changes are applied save the values of each module by clicking the "Save & Close" button in the upper right corner.

How to add new Custom HTML modules to your template

Some templates may contain the custom HTML modules that should be installed manually.

Please, enter Joomla! administration panel, and go to the SiteGlobal Configuration. Find the option "Default Editor" and select "No Editor". Default Joomla! WYSIWYG editors may modify the custom HTML module's code and cause you some issues.

Install the dump.sql File

If you want your site look like the demo you should install the dump.sql file.

ATTENTION: import .sql file ONLY if your site is a clean installation of Joomla! CMS, and you have not yet created any content, articles, modules, etc. This step will erase all the work you've already done to your site.

To install dump.sql file you should do the following:

Category & Product Page Layout Variations

Tips and Tricks

IMPORTANT!!! Please do not update the template, components, modules and plugins by yourself. There is no bugs in this product. Nevertheless, I recommend you to wait when we update it. Moreover, we will describe in details what exactly is changed, what is better and how to change it. If you really want to update without our assistance, then make the components backup obligatory com_akeeba-3.7.4-core or with other tools.

In this store the multilanguage is installed (incl. German, French and Italian). However, the template uses a default English language. Nevertheless, you have an opportunity to choose your own language and redefine the modules, articles and themes on your language. As you know, the demo version supports several languages. If you install another language which is not included in the list then it will not be displayed. You will need to resave the demo products, categories and delivery methods on that language on which you have installed. In addition, you need to understand that it mostly concerns the Shopping Cart module. If you install it and then adjust the new language, add this language to the Shopping Cart module, rename all the constants, then it is needed to be reinstalled in order to make them work and display properly on your website. This concerns other components and modules.

Template Customization. In the template you will find less, css, retina fonts. The less files are intended only for the less code. If you are not familiar with the less code then I recommend you to code in the css files. All the needed styles for the customization are placed in the custom.css and custom-responsive.css files. Also, you can input some settings via the Template Manager admin panel: Styles\t3_bs3_blank - Default\thememagic (see the screenshots below). But you need to save your own settings before you create a new theme. Our template uses a default theme. In future we are planning to add new theme skins. After you save the theme, you need to indicate in the appearence style this theme. If you read the Framework documentation then everything will be understandable for you. This framework is very flexible and allows to make much.

Here is a short course on how to customize the template. Important things:

In the next updates all the fixes and solutions will be inserted in docs.

If you have any questions concerning the customizations or you find a bug or you just think that something should be better, then please contact us via the Support Ticket. It will be easier and quicker to help you. Thank you!

Translation

There are many language packages available for Joomla but the template has some custom strings of text. Don't worry though, translation is really simple. All language strings are stored in the language/xx-XX folder, where x is the language key (e.g. en-GB for english and es-ES for spanish). You need to copy en-GB.tpl_t3_bs3_blank.ini to your language folder and change the language code in the name. Then open it with any text editor and translate the few phrases/words in the "frontend strings" section.

PSD Files

You can find the well-organized PSD files in the PSD folder. Make sure you save the images in the correct format. They are either pngs or jpgs.

Sources and Credits

I've used the following scripts:

Fonts:
Roboto