ART – Blue Responsive Magento Theme
User Documentation (Version 1.0)
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this document, please feel free to
send your questions to info@magesolution.com. Thank you so much!
Magesolution
20/05/2014
info@magesolution.com
TABLE OF CONTENT
TABLE OF CONTENT 2
INTRODUCTION 4
PACKAGE STRUCTURE 4
THEME INSTALLATION 4
INSTALL MAGENTO 4
INSTALL THEME 4
SETUP MULTI LANGUAGES 6
SETUP CURRENCY 7
INSTALL BLOG 8
THEME CONFIGURATION 9
GENERAL 9
HOME PAGE SLIDESHOW 9
CONTACT MAP 9
TWITTER 10
PRODUCT TABS 10
MEGA MENU 10
MANAGE THEME LAYOUT 11
HEADER 11
HEADER VERSIONS 11
LOGO 12
MAIN NAVIGATION 12
SOCIAL ICON 12
FOOTER 12
VERSION 1 12
VERSION 2 13
VERSION 3 13
VERSION 4 14
HOME PAGE 14
SLIDE SHOW 14
FEATURED PRODUCTS 14
HOT PRODUCTS 15
NEW PRODUCTS 15
OUR FEATURES 15
MORE FEATURES 16
OUR BRANDS 16
BLOG MODULE 16
TESTIMONIALS 17
PRODUCT LIST 17
PRODUCT LISTING LAYOUT 17
CATEGORY LANDING 17
PRICING TABLES CATEGORY 18
PRODUCT DETAILS 18
PRODUCT IMAGES 18
PRODUCT TABS 19
UP SELL PRODUCTS 19
RELATED PRODUCTS 19
BLOG 20
CMS CONTENT 20
EDIT CMS CONTENT 20
HOW TO EDIT TOP SOCIALS 21
HOW TO EDIT HEADER CONTACT 21
HOW TO CHANGE SLIDESHOW IMAGES 21
HOW TO EDIT HOME: OUR FEATURES 22
HOW TO EDIT HOME: MORE FEATURES 23
HOW TO EDIT MAP SECTION 23
HOW TO EDIT HOME TESTIMONIAL 24
HOW TO EDIT FOOTER RISBON 25
HOW TO EDIT FOOTER CONTACT US 25
HOW TO EDIT FOOTER FOLLOW US 25
HOW TO EDIT FOOTER ABOUT US 25
HOW TO EDIT FOOTER LINKS 26
HOW TO EDIT FOOTER PRODUCTS 26
HOW TO EDIT FOOTER LINKS 1 26
HOW TO EDIT FOOTER LINKS 2 26
HOW TO EDIT FOOTER LINKS 3 27
HOW TO EDIT FOOTER LINKS 4 27
HOW TO EIDIT CONTACT US INFORMATION 27
HOW TO EDIT PROMOTION BANNER 28
HOW TO 28
HOW TO CHANGE TILE OF HOME PAGE 28
HOW TO CHANGE DEFAULT WELCOME MSG! 28
HOW TO CHANGE COPYRIGHT 29
HOW TO SETUP MEGA MENU 29
HOW TO ADD FEATURED PRODUCTS 31
HOW TO ADD HOT PRODUCTS 33
HOW TO ADD NEW PRODUCTS 34
HOW TO ADD BRANDS 34
HOW TO CHANGE CATEGORY LAYOUT 36
HOW TO SHOW FILTER NAVIGATION ON PRODUCT LISTING 41
HOW TO SETUP CATEGORY LANDING PAGE 42
HOW TO SETUP PRICING TABLE CATEGORY 43
HOW TO SETUP PRODUCT LABEL 47
HOW TO MANAGE PRODUCT TABS 47
HOW TO ADD RELATED PRODUCTS 49
HOW TO ADD UP-SELL PRODUCTS 49
HOW TO ENABLE MAGENTO INLINE TRANSLATION FEATURE 49
SOURCE & CREDITS 50
THANK YOU 51
INTRODUCTION
ART -Blue responsive Magento theme has almost everything that you need for a shopping website. Its responsive layout built with
all-in-one powerful features, such as Mega menu, Brand logo and slider, Featured products, Image zooming effects… will surely
satisfy your demands for a custom store.
PACKAGE STRUCTURE
- documentation – user manual files for current package
- Licensing – licensing information
- psd – graphics source files
- upload – theme source files
- cms_content_demo – html sources of cms pages
THEME INSTALLATION
INSTALL MAGENTO
If you haven’t got a Magento website yet, you will have to install a copy of Magento Community Edition open source e-
commerce web application before using ART – Blue Responsive Magento theme.
If you already have installed Magento you can skip this section.
To install Magento, follow these steps:
1. Check if your server is compatible with Magento. Find detailed instructions here -
http://www.magentocommerce.com/knowledge-base/entry/how-do-i-know-if-my-server-is-compatible-with-
magento
2. Check if your server meets Magento’s System Requirements - http://www.magentocommerce.com/system-
requirements/
3. If you want to install sample data, use this document - http://www.magentocommerce.com/knowledge-
base/entry/magento-installation-cheat-sheet
Go to link “More information: Installing the Sample Data for Magento”
4. If you want to better understand Magento configuration, use this document -
http://www.magentocommerce.com/knowledge-base/entry/magento-installation-guide
5. When your Magento installation is completed successfully you can start theme installation procedure.
INSTALL THEME
1. Go to System -> Tools -> Compilation then disable compiler if it is already enabled, if not, you can skip this step.
http://www.magentocommerce.com/knowledge-base/entry/how-do-i-know-if-my-server-is-compatible-with-magento
http://www.magentocommerce.com/knowledge-base/entry/how-do-i-know-if-my-server-is-compatible-with-magento
http://www.magentocommerce.com/system-requirements/
http://www.magentocommerce.com/system-requirements/
http://www.magentocommerce.com/knowledge-base/entry/magento-installation-cheat-sheet
http://www.magentocommerce.com/knowledge-base/entry/magento-installation-cheat-sheet
http://www.magentocommerce.com/knowledge-base/entry/installing-the-sample-data-for-magento
http://www.magentocommerce.com/knowledge-base/entry/magento-installation-guide
2. Using a FTP client to upload content of upload folder to the root folder on your Web Server (usually named public_html).
Attention: when you copy content of upload folder to the root folder, it will overwrite some files. Please accept it.
- In upload/ step_1 folder we have source code for each version of Magento, please upload correct version of you
Magento site. You can find version of your Magento site at the footer of admin panel.
- You need to upload all content in folder upload/step_1/magento_version first, then upload content in folder
upload/step_2/
3. Go to System -> Cache management. Select all, choose refresh action and submit. After that you will see new menu item –
Mage Solutions. Now log out and login again to refresh access control system
4. To use ART – Blue Responsive Mangeto theme, you can go to System -> Configuration -> Design and choose Package is
“default” and themes default is “porto” as illustrated bellow.
5. Go to System -> Configuration -> Web and choose Default page/CMS Home page is Porto Homepage
6. Clear Magento cache as on step 3.
7. After installing theme successfully you can go to System -> Tools -> Compilation and Run Compilation Process again
SETUP MULTI LANGUAGES
- To setup multi languages, you can go to System ->Manage Stores
- Click Create Store View button
1. Store: choose your Main store
2. Name: Language
3. Code: code for this language.
In upload/step_1/magento_version/skin/frontend/default/porto/images/flags, find the flag image of this
language and rename it to your language code
Upload this image to your host
- Press Save button
- Go to System -> Configuration -> General
1. Choose a store view (language) you have created
2. Choose the Country of this store view (language)
3. Choose locale of this store view (language)
- Press Save Config button
- Now you should see languages dropdown on the top left corner.
SETUP CURRENCY
- To setup currency, you can go to System -> Configuration, choose Currency Setup tab. Set Allowed Currencies are the currency
you want on your store.
- Go to System -> Mange Currency Rates, press import. Wait for the system to import currency exchange rate then press Save.
- Go to System -> Cache Management and refresh the cache. Now you should see currency dropdown on the top left corner.
INSTALL BLOG
The theme supports Blog extension from aheadWorks, so to use blog on your store, you should install Blog extension.
If you do not want blog on your store, you can skip this step.
- To install blog extensions go to System -> Magento Connect -> Magento Connect Manager.
- Log in with admin account of your store.
- Enter key http://connect20.magentocommerce.com/community/AW_Blog then press Install
- Press Proceed to start installing extension.
- After installing successfully, return to admin
- Go to System -> Cache Management and clear cache
- Log out and log in again you will see menu Blog
- Upload all content from upload/blog to the web root on your web server
- Clear cache again
http://connect20.magentocommerce.com/community/AW_Blog
THEME CONFIGURATION
GENERAL
- Theme Color: Choose color of theme, 8 colors available for your selection.
- Logo: Upload logo for your store
- Layout Style: Choose style of page is wide or boxed
- Background Pattern: Choose background image, this option is only available for boxed layout styl
