SM Wedding Userguide MagenTech [2012]

Transcription

1 1 SM Wedding Userguide [2012] 1

2 2 2

3 3 table of content Introduction... 4 Features... 5 Chapter 1: Installation System Requirements Installing SM Wedding... 7 Chapter 2: Demo Layout... 9 Chapter 3: Layout - Modules SM Mega Menu SM Slick Slider SM ScrollBar SM Block Tabs SM Basic Products Chapter 4: Layout - Blocks Position block-quick-navigation Position block-follow-us Position block-contact-us Chapter 5: Configuration Configure homepage Cpanel Troubleshoot Useful References

4 4 INTRODUCTION SM Wedding - Magento Theme is designed for Magento Community edition 1.7. This theme helps e-commerce stores, which sell wedding stuff, increase its brand awareness and product display. With 3 layout modes and 4 color styles, this will satisfy all aspect of customization. We build this template with many powerful features: three types of Menu, Cloud Zoom and many other attractive effects powered by CSS3 to help you show: brilliant slideshow, smooth accordion and product zooming. By supporting major browsers and enabling mobile-tablet ready, this Magento template is a flexible template for Magento stores. Even if you are new to Magento, we created Cpanel for quickly and instantly modification. The template helps you serve some more types of products, especially related to bride-and-groom or household products: clothes, rings and flowers... and more depending on your setting-up. It is because of 3 kinds of sliding modules for image showing: Slideshow, Extra Slider and Slick Slider. Let view our Demo to fell more! 4

5 5 FEATURES General Features Cross-browser: IE 8+, Safari, Mozilla Firefox, Opera % tableless design, based on new CSS3 W3C XHTML 1.0 Transitional Valid Easy to customise by Cpanel Social networks intergation Tablet and Mobile ready Integrated Google Fonts Labels for products Cloud Zoom supported Magento CE version 1.7.x Full PSD files supplied, easy to edit Main Menu Menus with drop-down submenus Super Mega Menu supports all types of content Css Menu Split Menu More Accordion for Shop By Accordion for Categories Menu SM Slick Slider 5

6 6 SM Extra Slider SM ScrollBar SM Block Tag SM Basic Products 6

7 7 CHAPTER 1: INSTALLATION 1.1 System Requirements Magento Community Edition 1.7.x Download: Installing SM Wedding Before you begin the SM Wedding installation process, we recommend to back up your Magento installation and database for safety Unzip file sm_wedding_theme_ m _v1.0.zip to a folder such as wedding ( and 1.0 are just version numbers) Using a FTP client, upload the unzipped files to the Magento root folder (merge, not replace) Notice that SM Wedding theme has 6 modules included. You can install as following Unzip the downloaded sm_wedding_extensions_m _v1.0.zip file to a folder. There will be 6 zip files after extracting Extracting zip file of module you want to use, there will be two folder app and skin. Using a FTP client, upload the files to the Magento root folder (merge, not replace). Repeat this step for each module you want to use After that, log in to the Magento admin panel. Now you have to set SM Wedding as your default theme Go to 'System -> Configuration'. Click Design on the left-hand menu 7

8 Under HTML Head, find the Default field and type sm_wedding Scroll back to the top of the page and click the Save Config button Clear the cache then you can see SM Wedding as your new theme About modules configuration, go to 'System -> Configuration'. Under the Tab SMARTADDONS.COM, you can choose to configure modules you want OR using the Quickstart package If youʼve just started building your Magento site from the scratch, we recommend following below to have a site with all sample data as our demo page Download sm_wedding_quickstart_m _v1.0.zip and extract all contents to your Web root folder, usually under public_html/ folder ( and 1.0 are just version numbers) Change permission of these 4 files and folders (including subfolders) to 755, if they have not been: magento/var/.htaccess, magento/app/etc, magento/var and magento/media Create a database for your Magento store, this can be done in your hosting control panel (Note: just create database, our script will automatically import demo content for you) Now you access your domain from your web browser, go to Magento, the installer will start and you can install Magento step by step through wizard After the installation is completed, your Magento site should look exactly as our SM Wedding demo 8

9 9 CHAPTER 2: DEMO LAYOUT (POSITIONED) 9

10 10 CHAPTER 3: LAYOUT - MODULES There are 6 modules developed in-house to work with SM Wedding demo Webpage, however, there are 5 ones used on homepage. You can configure those five as following. 3.1 SM Mega Menu Position: sm megamenu & mainmenu Configuration 3.2 SM Slick Slider Position: sm slickslider Configuration Part1 10

11 11 Part 2 11

12 12 Part 3 12

13 SM ScrollBar Position: sm scrollbar Configuration Part1 Part2 13

14 SM Block Tabs Position: sm block tabs Configuration 14

15 SM Basic Products Position: sm basic product Configuration Part 1 Part 2 15

16 16 16

17 17 CHAPTER 4: LAYOUT - BLOCKS These are blocks that are pre-made within SM Wedding theme. Here is some examples how to use them. We use positions as in demo layout. Go to 'CMS -> Static Blocks'. Click Add New Block button. 4.1 Position block-quick-navigation The identifier should be block-quick-navigation for easily remembering Click Show/Hide Editor to add this code, classes are needed: <div class="block-quick-navigation"> <div><label>quick <span>navigation</span></label> <ul> <li><a href="#">+ Consectetur Adipiscing elit</a></li> <li><a href="#">+ Quisque tincidunt diam</a></li> <li><a href="#">+ Nunc luctus eros</a></li> <li><a href="#">+ Quisque tincidunt diam</a></li> <li><a href="#">+ Consectetur Adipiscing elit</a></li> <li><a href="#">+ Quisque tincidunt diam</a></li> <li class="last"><a href="#">+ Nunc luctus eros</a></li> <li class="last"><a href="#">+ Quisque tincidunt diam</a></li> </ul> </div> 4.2 Position block-follow-us The identifier should be block-follow-us Click Show/Hide Editor to add this code, classes are needed: <div class="block-social"> <div><label>follow <span>us</span></label> <ul> <li><a class="facebook" href=" <li><a class="twitter" href=" <li><a class="youtube" href=" <li><a class="blogger" href=" <li><a class="linkedin" href=" <li class="last"><a class="rss" href="#">rss</a></li> 17

18 18 </ul> </div> 4.3 Position block-contact-us The identifier should be block-contact-us Click Show/Hide Editor to add this code, classes are needed: <div class="block block-contact-us"> <div class="block-title"><label>contact <span>us</span></label></div> <div class="block-content clearfix"> <ul> <li><span>+ Interpro Road - Madison District - Englewood City</span></li> <li><span>+ contact@ytcvn.com</span></li> <li class="last"><span> </span></li> </ul> </div> 18

19 19 CHAPTER 5: CONFIGURATION Configure homepage 1. Select the homepage from 'CMS -> Pages'. 2. Select Design on the left-hand menu. Select 2 columns with left bar from the Layout drop-down menu. 3. In the Layout Update XML box, remove the existing content then add the following code: <reference name="slideshow"> <block type="slickslider/list" name="slickslider.list"> <action method="setconfig"> <values> <module_width>940</module_width> </values> </action> </block> </reference> <reference name="left"> <block type="basicproducts/home" name="default.basicproducts" template="smartaddons/basicproducts/home.phtml" after="scrollbar.list.theme"> </block> </reference> <reference name="topsl"> <block type="cms/block" name="position-1"> <action method="setblockid"><block_id>position-1</block_id></action> </block> <block type="cms/block" name="position-2"> <action method="setblockid"><block_id>position-2</block_id></action> </block> <block type="cms/block" name="position-3"> <action method="setblockid"><block_id>position-3</block_id></action> </block> </reference> <reference name="content-top"> 19

20 20 <block type="blocktabs/tabs" name="yeah" template="smartaddons/blocktabs/tabs.phtml"> <block type="extraslider/list" name="most popular"> <action method="setconfig"> <name> <theme>basic2</theme> <product_order_by>most_viewed</product_order_by> </name> </action> </block> <block type="extraslider/list" name="new arrival"> <action method="setconfig"> <name> <theme>basic2</theme> <product_order_by>created_at</product_order_by> </name> </action> </block> <block type="extraslider/list" name="best seller"> <action method="setconfig"> <name> <theme>basic2</theme> <product_order_by>best_sales</product_order_by> </name> </action> </block> </block> </reference> <reference name="content-bottom"> <block type="basicproducts/home2" name="product_list" template="smartaddons/basicproducts/list.phtml"> <action method="setconfig"><name><product_category>3</product_category><product_order_by>created_at</product_ord er_by></name></action> <action method="setcategoryid"><category_id>3</category_id></action> <action method="setcolumncount"><column_count>3</column_count></action> <action method="setproductscount"><count>6</count></action> <block type="catalog/product_list_toolbar" name="product_list_toolbar" 20

21 21 template="catalog/product/list/toolbar.phtml"> <block type="page/html_pager" name="product_list_toolbar_pager"/> </block> <action method="addcolumncountlayoutdepend"> <layout>empty</layout> <count>5</count> </action> <action method="addcolumncountlayoutdepend"> <layout>one_column</layout> <count>4</count> </action> <action method="addcolumncountlayoutdepend"> <layout>two_columns_left</layout> <count>3</count> </action> <action method="addcolumncountlayoutdepend"> <layout>two_columns_right</layout> <count>3</count> </action> <action method="addcolumncountlayoutdepend"> <layout>three_columns</layout> <count>2</count> </action> <action method="settoolbarblockname"> <name>product_list_toolbar</name> </action> </block> </reference> 4. Click the Save Page button. 21

22 22 Cpanel For easing the theme configuration, we has been created Cpanel: 1 Menu type Css Menu, Split Menu and Mega Menu 2 Theme color Blue, Green, Pink and Violet 3 Header Background Image 7 options to be chosen 4 Background Image 12 options to be chosen 5 Background Color Color palette 6 Font Family 12 options to be chosen 22

23 23 TROUBLESHOOT 1. I'm getting 404 error when trying to open some pages. Log out from Magento admin panel Clear the store cache under var/cache Log in again 2. After each installation, the store gives an error, or blank page. Log out from Magento admin panel Change the owner of the new files to yours 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 domain and refresh. 23

24 24 USEFUL REFERENCES This section provides helpful links to instructions on commonly used Magento features: Knowledge Base Screencasts Magento Wiki Magento Forum 24

25 25 info If you are interested in other services like Installation, you can find here website. We supply a full help with 100% money-back guaranteed within 7 days. If you like the theme, rate it and follow us. Downloadable Files Theme Package Magento 1.7.x Theme and Extensions Quickstart Userguide & Documentation PSD Files Changelog Version 1.0 (Sep 2012) First Release Thank you for using SM Wedding Theme! 25