Embed Size (px)
Citation preview
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 [email protected]. Thank you so much!
Magesolution 20/05/2014 [email protected]
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.
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
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
- 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
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:
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
- 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
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
- 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
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
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
PRICING TABLES CATEGORY
- Show products with pricing table layout, see how to setup pricing table category ->
PRODUCT DETAILS
PRODUCT IMAGES
- 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 ->
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 Identifier
Porto Homepage porto_homepage
Porto About Us porto-about-us
Porto Careers porto-careers
Porto FAQ porto-faq
Porto Team porto-team
Porto Shortcodes porto-shortcodes
Porto Icons porto-icons
Porto 404 Not Found porto-no-route
Port to Top Socials porto_socials
Porto Homepage Slide porto_homepage_slide
Porto Footer Ribbon porto_footer_ribon
Porto Footer Contact Us porto_contact_us
Porto Footer Follow Us porto_follow_us
Porto Header Contact porto_header_contact
Porto Top Phone porto_top_phone
Porto Footer About Us porto_footer_about_us
Porto Footer Products porto_footer_products
Porto Footer Links porto_footer_links
Porto Footer Links 1 porto_footer_links_1
Porto Footer Links 2 porto_footer_links_2
Porto Footer Links 3 porto_footer_links_3
Porto Footer Links 4 porto_footer_links_4
Porto Contact Us Information porto_contact_information
Porto Home: Our Features porto_our_features
Porto Home: More Features porto_more_features
Porto Home Brands porto_home_brands
Porto Home Testimonial porto_home_testimonial
Porto Home Map Section porto_map_section
Porto Promotion Banner 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
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="http://www.facebook.com/" target="_blank">Facebook</a></li> <li class="twitter"><a title="Twitter" href="http://www.twitter.com/" target="_blank">Twitter</a></li> <li class="linkedin"><a title="Linkedin" href="http://www.linkedin.com/" target="_blank">Linkedin</a></li> </ul> </div>
- 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) 456-7890</span> | <a href="#">[email protected]</a></p>
- Change text, phone number, email 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
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> <div class="feature-box-info"> <h4 class="shorter">Free Shipping</h4> <p class="tall">on orders over $45.00</p> </div> </div> <div class="feature-box"> <div class="feature-box-icon"><em class="icon icon-certificate"> </em></div> <div class="feature-box-info"> <h4 class="shorter">Daily Deals</h4> <p class="tall">best price each day</p> </div> </div> <div class="feature-box"> <div class="feature-box-icon"><em class="icon icon-user"> </em></div> <div class="feature-box-info"> <h4 class="shorter">New Customer Save 20%</h4> <p class="tall">on first order</p> </div> </div> </div> <div class="col-md-6"> <div class="feature-box"> <div class="feature-box-icon"><em class="icon icon-plane"> </em></div> <div class="feature-box-info"> <h4 class="shorter">Quick Shipping</h4> <p class="tall">delivery items after 1 day</p> </div> </div> <div class="feature-box"> <div class="feature-box-icon"><em class="icon icon-comments"> </em></div> <div class="feature-box-info"> <h4 class="shorter">Live Support 24/7</h4> <p class="tall">call us if you need help</p> </div> </div> <div class="feature-box"> <div class="feature-box-icon"><em class="icon icon-envelope"> </em></div> <div class="feature-box-info"> <h4 class="shorter">Join Our Newsletter</h4> <p class="tall">for more useful infomations, deals, sale...</p> </div> </div> </div> </div>
- You can change title, content of each feature as follows:
<div class="feature-box-icon"><em class="icon icon-truck"> </em></div> <div class="feature-box-info"> <h4 class="shorter">Free Shipping</h4> <p class="tall">on orders over $45.00</p> </div>
- 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 http://porto.magesolution.com/porto-icons
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" data-parent="#accordion"> <em class="icon icon-usd"> </em> Pricing Tables </a></h4> </div> <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> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a class="accordion-toggle" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion"> <em class="icon icon-comment"> </em> Contact Forms </a></h4> </div> <div id="collapseTwo" class="accordion-body collapse"> <div class="panel-body">Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</div> </div> </div> </div>
- 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 http://porto.magesolution.com/porto-icons
- 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" data-parent="#accordion"> <em class="icon icon-usd"> </em> Pricing Tables </a></h4> </div> <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> </div> </div>
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> <div class="col-md-6">{{widget type="cms/widget_block" template="cms/widget/static_block/default.phtml" block_id="porto_testimonial"}}</div> </div> </div> </div> </div>
- The widgets are called out like this
<div class="col-md-6">{{widget type="blog/last" blocks_count="6" categories="1"}}</div>
<div class="col-md-6">{{widget type="cms/widget_block" template="cms/widget/static_block/default.phtml" block_id="porto_testimonial"}}</div>
- 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> <div class="testimonial-author"> <div class="img-thumbnail img-thumbnail-small"><img src="{{media url="wysiwyg/client-1.jpg"}}" alt="" /></div> <p><strong>John Smith</strong><span>CEO & Founder - Okler</span></p> </div> </div> </div> <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>
</blockquote> <div class="testimonial-arrow-down"> </div> <div class="testimonial-author"> <div class="img-thumbnail img-thumbnail-small"><img src="{{media url="wysiwyg/client-1.jpg"}}" alt="" /></div> <p><strong>John Smith</strong><span>CEO & Founder - Okler</span></p> </div> </div> </div> </div> </div>
- 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></div>
- 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) 456-7890</p> </li> <li> <p><em class="icon icon-envelope"></em> <strong>Email:</strong> <a href="mailto:[email protected]">[email protected]</a></p> </li> </ul> </div>
- 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 http://porto.magesolution.com/porto-icons
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="http://www.facebook.com/" rel="tooltip" target="_blank" data-placement="bottom">Facebook</a></li> <li class="twitter"><a title="Twitter" href="http://www.twitter.com/" rel="tooltip" target="_blank" data-placement="bottom">Twitter</a></li> <li class="linkedin"><a title="Linkedin" href="http://www.linkedin.com/" rel="tooltip" target="_blank" data-placement="bottom">Linkedin</a></li> </ul> </div>
- 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
- 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="btn-flat 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-arrow-right"></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
<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.
- 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) 456-7890</li> <li><em class="icon icon-envelope"></em> <strong>Email:</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
- 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
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:
<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
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
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
- 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)
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
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
1 Column
2 columns with left sidebar
2 columns with right sidebar
3 columns
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
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
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
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
email_accounts
subdomains
To create an attribute, go to Catalog -> Attribute -> Manage Attributes
Click Add New Attribute button
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, Email 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
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
- 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
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
- 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:
- After that you can open your Store in browser and translate inline all strings that need to be translated.
SOURCE & CREDITS
Images: http://photodune.net/
Subtle Patterns: http://subtlepatterns.com/
Fonts:
Google Fonts - http://www.google.com/webfonts
Icons Font-face - http://fontawesome.io/
Scripts:
jQuery - http://www.jquery.com/
Bootstrap 3 - http://getbootstrap.com/
Revolution Slider - http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848
Nivo Slider - http://dev7studios.com/nivo-slider/
Isotope Jquery plugin - http://isotope.metafizzy.co
Modernizr - http://modernizr.com/
jQuery gMap 2 - Google Maps API V3 - http://labs.mario.ec/jquery-gmap/
Owl Carousel - http://owlgraphic.com/owlcarousel
Respond.js - https://github.com/scottjehl/Respond
Twitter JS Api - http://code.google.com/p/twitterjs/
Jquery Flickr Plugin - http://www.newmediacampaigns.com/page/jquery-flickr-plugin
Jquery Easing - http://gsgd.co.uk/sandbox/jquery/easing/
Magnific Popup - http://dimsemenov.com/plugins/magnific-popup/
Jquery Validate - http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Jquery Cookie - https://github.com/carhartl/jquery-cookie
Stellar.JS- http://markdalgleish.com/projects/stellar.js/
Jquery Appear - https://github.com/bas2k/jquery.appear/
THANK YOU
Thank you so much for purchasing this template. We'd be glad to help you if you have any questions.
Mage Solutions
