Magento Theme Instruction. product.sain3.com

Transcription

1 Magento Theme Instruction product.sain3.com We are extremely happy to present art-gallery Magento theme to you, it is designed and developed by highly qualified Designer & Developers in a way that make it usable for any type of E-Commerce store. 1

2 Features Highlights Easy to install (installation guide included) Responsive web design: show up great on both Mac, Windows, ipad, Tablets, iphones, Android and windows phones Banner intelligent management functions Home to display products with special layout, and tab effect shows many products within a container Drop-down shopping cart in header Template support for Jquery Effects. Social Media links in Footer The number of purchases by the addition and subtraction button is presented in detail page 100% Tableless design. 100% CSS/DIV compliance. Fully compatible IE7+, Firefox 2+, Firefox 3, Flock 0.7+, Netscape, Safari, Opera 9.5, Chrome. 1 Page art-gallery - Responsive Theme Instruction

3 Website Template Setup Installation & Configuration Thank you very much for purchasing! In this document you will find all the information about how to setup and configure this theme in your Magento Installation. System Requirements art-gallery Theme supports Magento Community Edition 1.8, 1.9 and which can be downloaded from It does not support Magento Enterprise Edition and Magento GO. Before downloading Magento, make sure you meet the system requirements and test the compatibility of your server. For help with installing Magento, please refer to the following links: Magento System Requirements Server Compatibility Check Magento Installation Guide 2 Page art-gallery - Responsive Theme Instruction

4 Uploading SAIN3_Art_gallery-x.x.x.tgz Before you begin the installation process, we recommend to backup your Magento installation and database. 1. Go to system->magento Connect ->Magento Connect Manager When you get a extension key, paste the key to install. When you get a package file, upload the package. The following screen appears after clicking the Upload button: 3 Page art-gallery - Responsive Theme Instruction

5 Successful installation: 2. If you fail in the first method,please follow down the second method. Unzip downloaded folder SAIN3_Art_gallery-x.x.x.tgz. Copy all files / folders from folder SAIN3_Art_gallery-x.x.x.tgz to your Magento root directory, If you are using make please makes sure you are merging and not replacing Magento directory. 4 Page art-gallery - Responsive Theme Instruction

6 Section 1: Theme of Website Installation & Configuration Step One: Magento Admin Panel Configuration Make art-gallery your theme Login to the Magento Admin Panel Go To: 'System Configuration' Click on Design on the left menu» Under Themes Tab put art-gallery into 'Templates', 'Skin', 'Layout' Field» Under Header Tab put images/logo.png into 'Logo image Src' Field» You can also enter the Image alter text and Default Welcome Text Scroll back to the top of the page and click the Save Config button Next, go to 'System > Cache Management' from the top navigation menu. You will need to clear the store cache and all cookies. Click the following buttons (in orange): Flush Magento Cache, Flush Cache Storage, Flush JavaScript/CSS Cache, and Flush Catalog Images Cache (optional). Now you are ready to add content to your website. 5 Page art-gallery - Responsive Theme Instruction

7 6 Page art-gallery - Responsive Theme Instruction

8 Step Two: Magento Admin Panel Code (1) Home Page Setup Homepage requires some static blocks to be added. Below are all the details about home page blocks Home page show» Go to: CMS Pages and click on Add New Page Page Information Tab: Set Home page into 'Page Title' & home into 'URL Key'Field Store View => All Store Views Status => Enabled Click Content Tab: Set Content {{block type="bannerslider/default" name="bannerslider.bannerslider" template="bannerslider/bannerslider.phtml" bannerslider_id="1"}} <div id="home-product-main"> <div class="top-contain"> <ul id="yeqian-head"> <li id="one1" onclick="settab('one',1,5)" class="hover">news Arrival</li> <li id="one2" onclick="settab('one',2,5)">recommend</li> 7 Page art-gallery - Responsive Theme Instruction

9 <li id="one3" onclick="settab('one',3,5)">favorite product</li> </ul> <div style="clear:both;"></div> </div> <div class="rootbox"> <div class="subbox" id="con_one_1"> {{block type ='catalog/product_new' name="home.catalog.product.new" products_count="7" template ='catalog/product/home-new.phtml'}} </div> <div class="subbox" style="display:none;" id="con_one_2"> {{block type="catalog/product_list" category_id="5" template="catalog/product/catalog-list-home.phtml"}} </div> <div class="subbox" style="display:none;" id="con_one_3"> {{block type="catalog/product_list" category_id="3" template="catalog/product/catalog-list-home.phtml"}} </div> </div> </div> <script type="text/javascript"> function settab(name,cursel,n) {for(i=1;i<=n;i++){ var menu=document.getelementbyid(name+i); var con=document.getelementbyid("con_"+name+"_"+i); menu.classname=i==cursel?"hover":""; con.style.display=i==cursel?"block":"none"; con.style.visibility=i==cursel?"visible":"hidden"; }} </script> <div id="footsteps"> 8 Page art-gallery - Responsive Theme Instruction

10 {{block type="catalog/product_list" category_id="8" products_count="6" template="catalog/product/special.phtml"}} </div> Click Design Tab: Set Design => Layout => 1 column» Click on Save Page button 9 Page art-gallery - Responsive Theme Instruction

11 (2) New Arrivals Page Setup» Go to: CMS Pages and click on Add New Page Page Information Tab: Set New into 'Page Title' & new into 'URL Key' Field Store View => All Store Views Status => Enabled Click Content Tab: Set Content Put the following code in to Content area <p>{{block type ='catalog/product_new' name="home.catalog.product.new" template ='catalog/product/new.phtml'}}</p> Click Design Tab: 10 Page art-gallery - Responsive Theme Instruction

12 Set Design => Layout => 1 column» Click on Save Page button (3) About Us Page Setup» Go to: CMS Pages and click on Add New Page Page Information Tab: Set About Us into 'Page Title' & about-us into 'URL Key' Field Store View => All Store Views Status => Enabled Click Content Tab: Set Content Put the following code in to Content area <div id="about-us-main"> <p><img alt="" src="{{skin url='images/cate-banner1.jpg'}}" /></p> <h3>about Us</h3> <p>da Finch was sent by his father to his friend, the famous painter and sculptor Vee Lo Keogh workshop as an apprentice.</p> 11 Page art-gallery - Responsive Theme Instruction

13 <p>da Finch is originally a teacher in order to see light suddenly, he observed things and the ability to grasp the image! Since then, he avidly training basic painting skills, learning all kinds of art and scientific knowledge, he later in painting and other aspects made outstanding achievements, a solid foundation.</p> <p>after Da Finch came to the workshop, the teacher Vee Lo Keogh took an egg to make him painting. Da Finch quickly drew a few, but the teacher let him continue to paint, for a few days is the case. Da Finch finally impatient, think the teacher underestimated him, let him draw such a simple egg. Teacher read his thoughts, meaningfully say: "this egg is not simple, the world no two exactly the same egg, even the same egg, due to the different observation angles, different light, its shape is not the same ah."</p> </div> Click Design Tab: Set Design => Layout => 2 columns width right bar» Click on Save Page button (4) Social Block» Go to: 'CMS Static Blocks click on Add New Block from Right Corner Set Social List into 'Block Title' Field & set social-list into 'Identifier' Status => Enabled 12 Page art-gallery - Responsive Theme Instruction

14 Put the following code in to Content area <div id="footer-social"><a href="#"><img alt="" src="{{skin url='images/google.png'}}" /></a><a href="#"><img alt="" src="{{skin url='images/facebook.png'}}" /></a> <a href="#"><img alt="" src="{{skin url='images/youtube.png'}}" /></a> <a href="#"><img alt="" src="{{skin url='images/twitter.png'}}" /></a></div>» Click on Save Block button (5)Home Banner Setup 1) Banner Slider Block» Go to: Banner Slider ->Manage Sliders and click on Add Slider Page Information Tab: Set Home Banner into 'Title' Show Title => Enabled 13 Page art-gallery - Responsive Theme Instruction

15 Status => Enabled Select Slider Mode => FlexSlider 1 Click Content Tab: Set Banner(s) of Slider and click on Add Banner Page Information Tab: Set XXX into 'Name' Status => Enabled 14 Page art-gallery - Responsive Theme Instruction

16 » Click on Save and return to the Edit Slider page» Click on Save Page button 15 Page art-gallery - Responsive Theme Instruction

17 Put the following code in the position you want to be: {{block type="bannerslider/default" name="bannerslider.bannerslider" template="bannerslider/bannerslider.phtml" bannerslider_id="1"}} 16 Page art-gallery - Responsive Theme Instruction

18 Troubleshooting & Support 1. I'm getting 404 not found when trying to open theme admin pages. Log out from Magento admin panel, clear the store cache under var/cache, and log in again. 2. After the extension installation the store gives an error, or blank page. Log out from Magento admin panel. Change the owner of the extracted extension files to the web server user and set 775 permissions on them. Clear the store cache and try again. 3. My configuration changes do not appear on the frontend. Clear the store cache under var/cache, clear all browser cookies for your store domain and refresh the page in your browser. 4. If you have any question / issue you can contact us any time at our support forum or Using Magento Helpful Resources There are tutorials, articles, forums and screencasts to help you learn how to use Magento and its features. This section provides helpful links to instructions on commonly used Magento features, but you can learn even more by exploring these resources Knowledge Base Screencasts Magento Wiki Magento Forum 17 Page art-gallery - Responsive Theme Instruction