ART Blue Responsive Magento Theme

Transcription

1 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 Thank you so much! Magesolution 20/05/2014

2 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

3 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

4 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 Check if your server meets Magento s System Requirements If you want to install sample data, use this document - Go to link More information: Installing the Sample Data for Magento 4. If you want to better understand Magento configuration, use this document 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.

5 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.

6 5. Go to System -> Configuration -> Web and choose Default page/cms Home page is Porto Homepage 6. Clear Magento cache as on step 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

7 1. Store: choose your Main store 2. Name: Language 3. Code: code for this language. - Press Save button 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 - 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.

8 - 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 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

9 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 style - Header Version: Choose layout of header, 6 versions of header available - Footer Version: Choose layout of footer, 4 versions of footer available - Featured Product Attributes: Choose attribute to set featured product, all products have this attribute will be shown on Home page. - Brand Attributes: Choose product brand attributes to show the list of brands on homepage - Hot product: Choose attribute option to get hot product on home page - New product: Choose attribute option to get new product on home page HOME PAGE SLIDESHOW - Effect: Choose effect for slide transition - Transaction speed: Change slide speed (in millisecond) - Pause time: How long each slide will be shown (in millisecond) - Start slide: Set starting slide (default is 0) - Show direction navigation: Show next, previous button - Show control: Show control navigation - Pause on hover: Set slideshow to be paused when mouse hover or not CONTACT MAP - Display Google map: Show Google map on contact page or not - Address: Address to show on Google map - Html: Address info, this content will show on the map marker. - Pin Image: Upload image for map marker - Latitude, Longitude: The coordinates to center the map

10 TWITTER - Title: Type the title to be displayed at the footer - Twitter account: The Twitter account to get tweets - Count display: The number of feeds will be show on block PRODUCT TABS - Show Description: Show or hide product description - Show Additional Information: Show or hide product additional information - Show Reviews: Show or hide product reviews - Show Product Tags: Show or hide product tags - Custom tab 1: You can show extra information by custom tabs. It can be product attribute or a static block. If you want to show different content of the product on custom tab, you should choose it as an attribute. If you want to show the same information on all products, you can choose it as a Static Block. - Custom tab 1 title: Title of the custom tab to show on product tabs. - Custom tab 1 value: If the custom tab is a product attribute, it will be attribute code. If it is a static block, it will be block identifier. - Custom tab 2, Custom tab 3: Repeat the steps on custom tab 1 MEGA MENU - Is enable: Enabled or disabled mega menu - Add home page link: Show home page link on menu or not - Homepage Label: The tagline of home page link

11 MANAGE THEME LAYOUT HEADER HEADER VERSIONS - We have 6 versions of header, to change the layout of header, go to Mage Solutions -> ART Blue theme -> General -> Header version - Version 1: - Version 2: - Version 3: - Version 4: - Version 5: - Version 6:

12 LOGO - To change logo, go to Mage Solution -> ART Blue theme -> General -> Logo and upload logo image MAIN NAVIGATION - We have two menu types Simple Menu and Mega Menu available - Simple menu is default menu of Magento - Mega menu with multi-columns sub menu, see how to setup mega menu -> SOCIAL ICON - The socials is available for header version 1, version 2 - To change social icons, see how to edit top social -> FOOTER VERSION 1

13 - 1: Newsletter block, you can use translate inline to change the text, see how to enable translate inline -> - 2: Twitter feeds - 3: Static block porto_contact_us, see how to edit -> - 4: Static block porto_follow_us, see how to edit -> - 5: Copyright, see how to edit -> - 6: Footer links block - 7: Static block porto_footer_ribon, see how to edit -> VERSION 2-1: Static block porto_footer_about_us, see how to edit -> - 2: Static block porto_footer_links, see how to edit -> - 3: Twitter feeds - 4: Static block porto_footer_products, see how to edit -> - 5: Copyright VERSION 3-1: Static block porto_footer_about_us, see how to edit -> - 2: Static block porto_footer_links_1, see how to edit -> - 3: Static block porto_footer_links_2, see how to edit -> - 4: Static block porto_footer_links_3, see how to edit -> - 5: Static block porto_footer_links_4, see how to edit -> - 6: Static block porto_footer_contact_us, see how to edit -> - 7: Static block porto_follow_us, see how to edit -> - 8: Copyright

14 VERSION 4-1: Static block porto_footer_about_us, see how to edit -> - 2: Static block porto_contact_us, see how to edit -> - 3: Static block porto_follow_us, see how to edit -> - 4: Copyright HOME PAGE SLIDE SHOW - ART Blue theme uses Nivo Slider for the slideshow, see how to edit slide -> FEATURED PRODUCTS

15 - This block show all featured products in slider, see how to add featured products -> HOT PRODUCTS - This block show all product on sale, see how to add hot products -> NEW PRODUCTS - This block show all new products, see how to add new product -> OUR FEATURES - Static block porto_our_features

16 MORE FEATURES - Static block porto_more_features OUR BRANDS - List of brands, see how to add brands -> BLOG MODULE - Get the latest blog posts if your site have installed blog extension by aheadworks

17 TESTIMONIALS - Static block porto_testimonial, see how to edit testimonial block -> PRODUCT LIST PRODUCT LISTING LAYOUT - ART Blue theme supports 4 product listing layouts o 1 column o 2 columns with left sidebar o 2 columns with right sidebar o 3 columns - See how to change category layout -> CATEGORY LANDING - Display all sub-categories with category thumbnail, category label, products count, see how to setup category landing

18 PRICING TABLES CATEGORY - Show products with pricing table layout, see how to setup pricing table category -> PRODUCT DETAILS PRODUCT IMAGES

19 - Product images will be shown in slider - 1: Product labels (new/ on sale) see how to setup product label -> - 2: Zoom image button - 3: Slider navigation PRODUCT TABS - More product info can be added to the Tabs. You can show Description, Additional Information, Reviews, Product tags and other three custom tabs, see how to manage product tabs -> UP SELL PRODUCTS - Up-sell products displays at the bottom of product details page, see how to add up sell products -> RELATED PRODUCTS - Related products displays on the right column on product details page, see how to add related products ->

20 BLOG - The Porto Responsive Magento Theme supports Blog by aheadwork, to see how to configure blog you can see this document CMS CONTENT List of CMS blocks and pages Title Porto Homepage Porto About Us Porto Careers Porto FAQ Porto Team Porto Shortcodes Porto Icons Porto 404 Not Found Port to Top Socials Porto Homepage Slide Porto Footer Ribbon Porto Footer Contact Us Porto Footer Follow Us Porto Header Contact Porto Top Phone Porto Footer About Us Porto Footer Products Porto Footer Links Porto Footer Links 1 Porto Footer Links 2 Porto Footer Links 3 Porto Footer Links 4 Porto Contact Us Information Porto Home: Our Features Porto Home: More Features Porto Home Brands Porto Home Testimonial Porto Home Map Section Porto Promotion Banner Identifier porto_homepage porto-about-us porto-careers porto-faq porto-team porto-shortcodes porto-icons porto-no-route porto_socials porto_homepage_slide porto_footer_ribon porto_contact_us porto_follow_us porto_header_contact porto_top_phone porto_footer_about_us porto_footer_products porto_footer_links porto_footer_links_1 porto_footer_links_2 porto_footer_links_3 porto_footer_links_4 porto_contact_information porto_our_features porto_more_features porto_home_brands porto_home_testimonial porto_map_section porto_promo_banner EDIT CMS CONTENT Important! Never use WYSIWYG editor to add / edit HTML code. It may break your HTML code. - When you edit a static block having HTML code, click button Show/Hide Editor to switch to HTML edition mode

21 HOW TO EDIT TOP SOCIALS - Go to CMS -> Static Blocks, choose block porto_socials - Default code <div class="social-icons"> <ul class="social-icons"> <li class="facebook"><a title="facebook" href=" target="_blank">facebook</a></li> <li class="twitter"><a title="twitter" href=" target="_blank">twitter</a></li> <li class="linkedin"><a title="linkedin" href=" target="_blank">linkedin</a></li> </ul> - You can change link of your Facebook, Twitter and Linked In there - Press Save Block HOW TO EDIT HEADER CONTACT - Go to CMS -> Static Blocks, choose block porto_header_contact - Default code <p>get in touch! <span><em class="icon icon-phone"></em>(123) </span> <a href="#">[email protected]</a></p> - Change text, phone number, address here - Press Save Block button. HOW TO CHANGE SLIDESHOW IMAGES - Go to System -> CMS -> Static Blocks, choose block porto_home_slide to edit - Click Insert Images to add images - On the popup, click Browse Files and select images from your computer - Click Upload Files to upload images - After upload finished, choose images you want add - Click button Insert File to insert image - Then click Save Block or Save and Continue Edit to save slide block

22 HOW TO EDIT HOME: OUR FEATURES - Go to CMS -> Static Blocks, choose block porto_our_features - Default code <h2>our <strong>features</strong></h2> <div class="row"> <div class="col-md-6"> <div class="feature-box"> <div class="feature-box-icon"><em class="icon icon-truck"> </em> <div class="feature-box-info"> <h4 class="shorter">free Shipping</h4> <p class="tall">on orders over $45.00</p> <div class="feature-box"> <div class="feature-box-icon"><em class="icon icon-certificate"> </em> <div class="feature-box-info"> <h4 class="shorter">daily Deals</h4> <p class="tall">best price each day</p> <div class="feature-box"> <div class="feature-box-icon"><em class="icon icon-user"> </em> <div class="feature-box-info"> <h4 class="shorter">new Customer Save 20%</h4> <p class="tall">on first order</p> <div class="col-md-6"> <div class="feature-box"> <div class="feature-box-icon"><em class="icon icon-plane"> </em> <div class="feature-box-info"> <h4 class="shorter">quick Shipping</h4> <p class="tall">delivery items after 1 day</p> <div class="feature-box"> <div class="feature-box-icon"><em class="icon icon-comments"> </em> <div class="feature-box-info"> <h4 class="shorter">live Support 24/7</h4> <p class="tall">call us if you need help</p> <div class="feature-box"> <div class="feature-box-icon"><em class="icon icon-envelope"> </em> <div class="feature-box-info"> <h4 class="shorter">join Our Newsletter</h4> <p class="tall">for more useful infomations, deals, sale...</p> - You can change title, content of each feature as follows: <div class="feature-box-icon"><em class="icon icon-truck"> </em> <div class="feature-box-info"> <h4 class="shorter">free Shipping</h4> <p class="tall">on orders over $45.00</p>

23 - To change icon of feature, you need to change the class in tag <em class="icon icon-truck"> </em>, in this example the class is icon-truck. To see available icons you can go to HOW TO EDIT HOME: MORE FEATURES - Go to CMS -> Static block, choose block porto_more_features - Default code <h2>and more...</h2> <div id="accordion" class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a class="accordion-toggle" href="#collapseone" data-toggle="collapse" dataparent="#accordion"> <em class="icon icon-usd"> </em> Pricing Tables </a></h4> <div id="collapseone" class="accordion-body collapse in"> <div class="panel-body">donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a class="accordion-toggle" href="#collapsetwo" data-toggle="collapse" dataparent="#accordion"> <em class="icon icon-comment"> </em> Contact Forms </a></h4> <div id="collapsetwo" class="accordion-body collapse"> <div class="panel-body">donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien. - You can edit title, content, and icon of each panel. To change icon, you need to change the class in tag <em class="icon icon-truck"> </em>. To see available icons you can go to - You can add more panels by adding this code <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a class="accordion-toggle" href="#collapseone" data-toggle="collapse" dataparent="#accordion"> <em class="icon icon-usd"> </em> Pricing Tables </a></h4> <div id="collapseone" class="accordion-body collapse in"> <div class="panel-body">donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. HOW TO EDIT MAP SECTION - Map section is a block display at the bottom of the Home page, it contains Latest blog posts and testimonial block - To edit map section block, go to CMS -> Static Blocks, choose block porto_map_section - Default code <div class="map-section"> <div class="featured footer map"> <div class="container"> <div class="row"> <div class="col-md-6">{{widget type="blog/last" blocks_count="6" categories="1"}} <div class="col-md-6">{{widget type="cms/widget_block" template="cms/widget/static_block/default.phtml" block_id="porto_testimonial"}} - The widgets are called out like this <div class="col-md-6">{{widget type="blog/last" blocks_count="6" categories="1"}}

24 <div class="col-md-6">{{widget type="cms/widget_block" template="cms/widget/static_block/default.phtml" block_id="porto_testimonial"}} - The first widget blog/last is an AheadWork blog extension, so you need to install AheadWord Blog extension to show it. If you already have aheadwork blog extension, click Insert Widget button - On the popup, choose Widget type Blog: Latest Posts - Choose number of posts to show - Choose category of post - Press Insert Widget - The second widget is static block porto_testimonial, to edit testimonial, see how to edit testimonial as follows: HOW TO EDIT HOME TESTIMONIAL - Go to CMS -> Static Block, choose block porto_testimonial - Default code <h2><strong>what</strong> Client s Say</h2> <div class="row"> <div class="owl-carousel push-bottom" data-plugin-options="{'items': 1, 'autoheight': true}"> <div> <div class="col-md-12"> <blockquote class="testimonial"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat. Donec hendrerit vehicula est, in consequat. Donec hendrerit vehicula est, in consequat.</p> </blockquote> <div class="testimonial-arrow-down"> <div class="testimonial-author"> <div class="img-thumbnail img-thumbnail-small"><img src="{{media url="wysiwyg/client-1.jpg"}}" alt="" /> <p><strong>john Smith</strong><span>CEO & Founder - Okler</span></p> <div> <div class="col-md-12"> <blockquote class="testimonial"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

25 </blockquote> <div class="testimonial-arrow-down"> <div class="testimonial-author"> <div class="img-thumbnail img-thumbnail-small"><img src="{{media url="wysiwyg/client-1.jpg"}}" alt="" /> <p><strong>john Smith</strong><span>CEO & Founder - Okler</span></p> - You can change the testimonial content, client info, image thumbnail. Please keep all HTML tags HOW TO EDIT FOOTER RISBON - Go to CMS -> Static Block, choose block porto_ribbon - Default code <div class="footer-ribon"><span>get in Touch</span> - You can change the text for ribbon, the ribbon only shows on footer version 1 HOW TO EDIT FOOTER CONTACT US - Go to CMS -> Static Blocks, choose block porto_contact_us - Default code <div class="contact-details"> <h4>contact Us</h4> <ul class="contact"> <li> <p><em class="icon icon-map-marker"></em> <strong>address:</strong> 1234 Street Name, City Name, United States</p> </li> <li> <p><em class="icon icon-phone"></em> <strong>phone:</strong> (123) </p> </li> <li> <p><em class="icon icon-envelope"></em> <strong> </strong> <a href="mailto:[email protected]">[email protected]</a></p> </li> </ul> - You can add more contact information by adding <li></li> tag. To change icon, you can change class of <em class="icon icon-map-marker"></em>. To see available icons, you can go to HOW TO EDIT FOOTER FOLLOW US - Go to CMS -> Static Block, choose block porto_follow_us. Switch to HTML edition mode. - Default code <h4>follow Us</h4> <div class="social-icons"> <ul class="social-icons"> <li class="facebook"><a title="facebook" href=" rel="tooltip" target="_blank" dataplacement="bottom">facebook</a></li> <li class="twitter"><a title="twitter" href=" rel="tooltip" target="_blank" dataplacement="bottom">twitter</a></li> <li class="linkedin"><a title="linkedin" href=" rel="tooltip" target="_blank" dataplacement="bottom">linkedin</a></li> </ul> - You can change Facebook link, Twitter link and Linkedin HOW TO EDIT FOOTER ABOUT US - Go to CMS -> Static Blocks, choose block porto_footer_about_us. Switch to HTML edition mode

26 - Default code <h4>about Porto</h4> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu pulvinar magna. Phasellus semper scelerisque purus, et semper nisl lacinia sit amet. Praesent venenatis turpis vitae purus semper, eget sagittis velit venenatis. <a class="btnflat btn-xs" href="#">view More <em class="icon icon-arrow-right"></em></a></p> - You can change content then press Save Block HOW TO EDIT FOOTER LINKS - Go to CMS -> Static Blocks, choose block porto_footer_links. Switch to HTML edition mode - Default code <h4>recent Links</h4> <ul class="nav nav-list primary push-bottom"> <li><a title="class aptent taciti sociosqu ad litora torquent" href="#">class aptent taciti sociosqu ad...</a></li> <li><a title="class aptent taciti sociosqu ad litora torquent" href="#">aptent class taciti sociosqu...</a></li> <li><a title="class aptent taciti sociosqu ad litora torquent" href="#">taciti aptent class sociosqu ad...</a></li> <li><a title="class aptent taciti sociosqu ad litora torquent" href="#">sociosqu class aptent taciti...</a></li> </ul> - Edit content here then press Save Block HOW TO EDIT FOOTER PRODUCTS - Go to CMS -> Static Blocks, choose block porto_footer_products. Switch to HTML edition mode. - Default code <h4>recent Products</h4> <ul class="list-unstyled recent-work"> <li><a class="thumb-info" href="#"> <img class="img-responsive" src="{{media url="wysiwyg/project.jpg"}}" alt="" /> </a></li> <li><a class="thumb-info" href="#"> <img class="img-responsive" src="{{media url="wysiwyg/project.jpg"}}" alt="" /> </a></li> <li><a class="thumb-info" href="#"> <img class="img-responsive" src="{{media url="wysiwyg/project.jpg"}}" alt="" /> </a></li> <li><a class="thumb-info" href="#"> <img class="img-responsive" src="{{media url="wysiwyg/project.jpg"}}" alt="" /> </a></li> <li><a class="thumb-info" href="#"> <img class="img-responsive" src="{{media url="wysiwyg/project.jpg"}}" alt="" /> </a></li> <li><a class="thumb-info" href="#"> <img class="img-responsive" src="{{media url="wysiwyg/project.jpg"}}" alt="" /> </a></li> </ul> <p><a class="btn-flat pull-right btn-xs view-more-recent-work" href="#">view More <em class="icon icon-arrowright"></em></a></p> - You can change other images here, but please keep class= image-responsive for responsive feature. HOW TO EDIT FOOTER LINKS 1 - Go to CMS -> Static Blocks, choose block porto_footer_links_1. Switch to HTML edition mode. - Default code <h5>blog</h5> <ul class="list icons list-unstyled"> <li><em class="icon icon-caret-right"></em> <a href="#">blog Link 1</a></li> <li><em class="icon icon-caret-right"></em> <a href="#">blog Link 2</a></li> <li><em class="icon icon-caret-right"></em> <a href="#">blog Link 3</a></li> <li><em class="icon icon-caret-right"></em> <a href="#">blog Link 4</a></li> </ul> - Edit content then press Save Block HOW TO EDIT FOOTER LINKS 2 - Go to CMS -> Static Blocks, choose block porto_footer_links_2. Switch to HTML edition mode. - Default code

27 <h5>pages</h5> <ul class="list icons list-unstyled"> <li><em class="icon icon-caret-right"></em> <a href="#">static page link 1</a></li> <li><em class="icon icon-caret-right"></em> <a href="#">static page link 2</a></li> <li><em class="icon icon-caret-right"></em> <a href="#">static page link 3</a></li> <li><em class="icon icon-caret-right"></em> <a href="#">static page link 4</a></li> </ul> - Edit content here then press Save Block HOW TO EDIT FOOTER LINKS 3 - Go to CMS -> Static Blocks, choose block porto_footer_links_3. Switch to HTML edition mode. - Default code <h5>portfolio</h5> <ul class="list icons list-unstyled"> <li><em class="icon icon-caret-right"></em> <a href="#">2 Columns</a></li> <li><em class="icon icon-caret-right"></em> <a href="#">3 Columns</a></li> <li><em class="icon icon-caret-right"></em> <a href="#">4 Columns</a></li> <li><em class="icon icon-caret-right"></em> <a href="#"> Single Project</a></li> </ul> - Edit content here then press Save Block HOW TO EDIT FOOTER LINKS 4 - Go to CMS -> Static Blocks, choose block porto_footer_links_3. Switch to HTML edition mode. - Default code <h5>extra Pages</h5> <ul class="list icons list-unstyled"> <li><em class="icon icon-caret-right"></em> <a href="#">team</a></li> <li><em class="icon icon-caret-right"></em> <a href="#">services</a></li> <li><em class="icon icon-caret-right"></em> <a href="#">careers</a></li> <li><em class="icon icon-caret-right"></em> <a href="#">faq</a></li> <li><em class="icon icon-caret-right"></em> <a href="#">sitemap</a></li> </ul> - Edit content here then press Save Block HOW TO EIDIT CONTACT US INFORMATION - Contact us information is the information showing beside the contact form.

28 - To change this content, go to CMS -> Static Blocks, choose block porto_contact_information. Switch to HTML edition mode - Default code <h4 class="push-top">get in <strong>touch</strong></h4> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget leo at velit imperdiet varius. In eu ipsum vitae velit congue iaculis vitae at risus.</p> <hr /> <h4>the <strong>office</strong></h4> <ul class="list-unstyled"> <li><em class="icon icon-map-marker"></em> <strong>address:</strong> 1234 Street Name, City Name, United States</li> <li><em class="icon icon-phone"></em> <strong>phone:</strong> (123) </li> <li><em class="icon icon-envelope"></em> <strong> </strong> <a href="mailto:[email protected]">[email protected]</a></li> </ul> <hr /> <h4>business <strong>hours</strong></h4> <ul class="list-unstyled"> <li><em class="icon icon-time"></em> Monday - Friday 9am to 5pm</li> <li><em class="icon icon-time"></em> Saturday - 9am to 2pm</li> <li><em class="icon icon-time"></em> Sunday - Closed</li> </ul> - Edit content then press Save Block HOW TO EDIT PROMOTION BANNER - Promotion banner is an image showing on checkout page - To change promotion banner, go to CMS -> Static Blocks, choose block porto_promo_banner. Switch to HTML edition mode. - Upload another image then press Save Block HOW TO HOW TO CHANGE TILE OF HOME PAGE - Go to CMS -> Pages - Choose Porto Homepage - Edit Page Title field. - Press Save Page. HOW TO CHANGE DEFAULT WELCOME MSG! - Go to System -> Configuration -> Design

29 - Go to group Header - Edit Welcome text field then press Save Config HOW TO CHANGE COPYRIGHT - Go to System -> Configuration - Select tab Design -> Footer - Change content in Copyright field - Press Save Config HOW TO SETUP MEGA MENU To setup megamenu, go to Mage Solutions -> Megamenu -> Configuration. On General Tab: Is Enabled: Yes Add Homepage Link: If you choose Yes, the HOME link will show on main menu Homepage Label: Label of the Home page link Go to Mage Solutions -> Megamenu -> Manage Megamenu Items to add or edit items of main megamenu Click Add Megamenu Item button to add item to megamenu

30 1. Label: Label displays on megamenu 2. Menu Type: 2 menu types available (Catalog Category and Static Content) Catalog Category: If you choose Catalog Category, you can check to choose Categories to display on megamenu Static Content: If you choose Static Content, you can add static menu to megamenu Format of the static content looks like this:

31 <ul> <li><a href="{{store url="blog"}}">blog: List Posts</a></li> <li><a href="{{store url="blog/cat/design/post/blog-post-6"}}">blog: Single Posts</a></li> <li><a href="{{store url="porto-about-us"}}">about Us</a></li> <li><a href="{{store url="contacts"}}">contact Us</a></li> <li><a href="{{store url="asgasg"}}">404 Not Found</a></li> <li><a href="{{store url="porto-careers"}}">careers</a></li> <li><a href="{{store url="porto-team"}}">team</a></li> <li><a href="{{store url="porto-faq"}}">faq</a></li> <li><a href="{{store url="catalog/seo_sitemap/category"}}">sitemap</a></li> <li><a href="{{store url="porto-icons"}}">icons</a></li> </ul> 3. Link: link of this menu item 4. Position: position of the item on megamenu 5. Columns: Normal Menu: standard menu (multi dropdown levels) Megamenu: Multi-columns menu 6. Store View: choose store view this menu item display, choose All store views to display for all store view. Click Save Item button to save this megamenu item HOW TO ADD FEATURED PRODUCTS - If you haven t got an attribute to set featured products, you need to create an attribute and add it to your attribute set, if you have one, please skip this step : o Go to Catalog -> Attributes -> Manage Attributes o Click Add New Attribute button

32 1. Attribute Code: Your featured products attribute code (eg. featured) 2. Catalog Input Type for Store Owner: Choose Yes/No Click tab Manage Label/Options Fill out your attribute label (eg. Featured Product) Click Save Attribute button Go to Catalog -> Attribute ->Manage Attribute Sets Click your attribute set (eg. Default) Drag and drop the attribute to a group Click Save Attribute Set button Go to Catalog -> Manage Products

33 1. Check products you want to show as featured ones on homepage 2. Action: Choose Update Attributes Click Submit button Find Featured Product attribute and change value to yes as follows: Click Save button Go to Mage Solutions -> ART Blue theme On General Tab, Featured Product Attribute: choose your featured product attribute HOW TO ADD HOT PRODUCTS - To setup hot products, go to Admin -> Mage Solutions -> Art Blue Theme - In tab General choose option for host product is Sale

34 - Then the hot products block will show the products have product label is Sale, see how to setup product label -> HOW TO ADD NEW PRODUCTS - Make similar with hot products, but the option attribute is New HOW TO ADD BRANDS - If you haven t got an attribute to set brand for products, you need to create an attribute and add it to your attribute set, if you have one, please skip this step : o Go to Catalog -> Attributes -> Manage Attributes o Click Add New Attribute button 1. Attribute Code: Your featured products attribute code (eg. featured) 2. Catalog Input Type for Store Owner: Choose Dropdown Click tab Manage Label/Options Fill out the fields as follows: Click Save Attribute button Go to Catalog -> Attribute -> Manage Attribute Sets Click your attribute set (eg. Default)

35 Drag and drop the attribute to a group Click Save Attribute Set button Go to Mage Solutions -> ART Blue theme On General Tab, Brand Attribute: choose your Brand attribute Go to Mage Solutions -> Brands Click Add Brand button 1. Option: Choose a brand

36 2. File: Upload brand logo 3. Link: URL to redirect when you click a brand on home page 4. Status: Enabled Click Save Item button HOW TO CHANGE CATEGORY LAYOUT For each category on Catalog > Category Management you can change category layout to 1 column, 2 columns with left sidebar, 2 columns with right sidebar or 3 columns 1. Click the category you want to change 2. Click Custom Design tab 3. Choose the layout you want to change 4. Click Save Category button Now you can see the change of the category

37 1 Column

38 2 columns with left sidebar

39 2 columns with right sidebar

40 3 columns

41 HOW TO SHOW FILTER NAVIGATION ON PRODUCT LISTING You can display categories on Magento's Layered Navigation block ("Shop by" block) on the top of the left sidebar. To display category on the Layered Navigation, go to Catalog > Manage Categories, click selected category and set Is Anchor field (in Display Settings tab) to Yes

42 HOW TO SETUP CATEGORY LANDING PAGE Category landing page is a page listing all sub categories of a category To set a category is category landing page, go to Catalog > Manage Categories, click selected category and set Custom Design field (in Custom Design tab) to landing

43 HOW TO SETUP PRICING TABLE CATEGORY We have created a new layout for a new product type (that is named pricing table ) To set a category to be pricing table, go to Catalog > Manage Categories, click selected category and set Custom Design field (in Custom Design tab) to pricing

44 To create products and assign to pricing table category, you need to create 4 attributes and assign them to an attribute set (eg. Pricing table): disk_space monthly_bandwidth _accounts subdomains To create an attribute, go to Catalog -> Attribute -> Manage Attributes Click Add New Attribute button

45 I. Properties Tab 1. Attribute code: disk_space (monthly_bandwidth, mail_accounts, subdomains) 2. Catalog Input Type for Store Owner: Dropdown 3. Usedin Product Listing: Yes II. Manage Label / Options 1. Manage Titles: Disk Space (Monthly Bandwidth, Accounts, Subdomains) 2. Manage Options: options of attributes Create new Attribute Set: - Go to Catalog -> Attributes -> Manage Attribute Sets - Click Add New Set button - Click Save Attribute Set button - Drag and drop 4 attributes you have created to a group and save Attribute set

46 Create Pricing table products - Go to Catalog -> Manage Products - Click Add New Product button - Choose Attribute Set and Product Type as follows: - Click Continue button - Fill out all fields you need - Featured Product: Choose Yes if you want set this product to be popular product

47 - On Product Categories tab: check to add this product to pricing table category - Click Save Product button to save HOW TO SETUP PRODUCT LABEL - To set product is new or sale go to Catalog -> Mange Products, choose appropriate product - On General choose value of the Product Label is new or sale. - Press Save HOW TO MANAGE PRODUCT TABS - Go to Mage Solutions -> ART Blue theme -> Product Tabs. - Show or hide Description - Show or hide Additional information - Show or hide Reviews - Show or hide Product tags You are able to add other custom tabs. They will display at frontend like this

48 To add a static block to a custom tab, firstly you need to create a static block. - Go to CMS -> Static Blocks - Press Add New Product - Enter block title, identifier, content - Press Save Block - Back to product tabs configuration - Choose custom tab 1 is Static block - Enter custom tab 1 title. This title will be shown at frontend. - Enter static block identifier to custom tab 1 value To add a product attribute to a custom tab, firstly you need to create a product attribute see how to create product attribute -> - When you have a product attribute, back to product tabs configuration

49 - Choose custom tab is Product Attribute - Enter custom tab title, this title will be shown at frontend - Enter product attribute code to custom tab value HOW TO ADD RELATED PRODUCTS - Go to Admin panel -> Catalog -> Manage Products. - Choose appropriate product. - Go to Related Products tab. - Press Reset filter button. - Choose appropriate product - Press Save button HOW TO ADD UP-SELL PRODUCTS - Go to Admin panel -> Catalog -> Manage Products. - Choose appropriate product(s). - Go to Up-sells tab. - Press Reset filter button. - Choose appropriate product(s) - Press Save button HOW TO ENABLE MAGENTO INLINE TRANSLATION FEATURE - Magento inline translation can be enabled on System -> Configuration -> Developer -> Inline Translation in Magento Backend: - Please also make sure to disable Translation and Blocks HTML output before hitting Submit on System > Cache Management:

50 - After that you can open your Store in browser and translate inline all strings that need to be translated. SOURCE & CREDITS Images: Subtle Patterns: Fonts: Google Fonts - Icons Font-face - Scripts: jquery - Bootstrap Revolution Slider - Nivo Slider - Isotope Jquery plugin - Modernizr - jquery gmap 2 - Google Maps API V3 - Owl Carousel - Respond.js - Twitter JS Api - Jquery Flickr Plugin - Jquery Easing - Magnific Popup - Jquery Validate - Jquery Cookie - Stellar.JS- Jquery Appear -

51 THANK YOU Thank you so much for purchasing this template. We'd be glad to help you if you have any questions. Mage Solutions