GadgetStore. Magento Theme Instructions. 8theme 1 GadgetStore Magento Theme Instructions

Transcription

1 GadgetStore Magento Theme Instructions 8theme 1 GadgetStore Magento Theme Instructions

2 Table of Contents Introduction....3 Features Installation & Configuration...5 Uploading GadgetStore...6 Homepage...10 Adding Content...14 The SlideShow...19 Footer...22 Follow Us...25 HTML Blocks...29 Theme Option Using Magento theme 2 GadgetStore Magento Theme Instructions

3 Introduction We are happy to present our new GadgetStore Magento Template with integrated online payment facility. We have done our best in bringing perfect color combination and jquery banners to attract an attention of new customers to your online store. We used drop-down menus with transparency effects it is easier for customers to search the store, which will save them time and will make it quicker to find and buy the desired item. We have used the latest technologies and our highly qualified designers used their knowledge and experience for developing this product so that our customers could obtain satisfying return on their investment. This template basically is a quick and easy way to set up and develop your online business independently. 8theme 3 GadgetStore Magento Theme Instructions

4 Features Highlight Features AJAX Add to Cart Zoom to enlarge product images (Setting from Admin Panel) Product scrollbar (Setting from Admin Panel) Custom DropDown Menu Custom SlideShow Back to top button Social networks bookmarks (Setting from Admin panel) Frontpage New Products Scroll Panel General Features Template is fully compatible with magento verion: 1.5.x.x, 1.6.x.x PSDs file supplied, easy to edit SEO (Search Engine Optimization)-orient in design and development, fast loading 100% Tableless design. 100% HTML /CSS/DIV compliance Valid XHTML and CSS markup Well-structured and commented HTML & CSS for easy customization Cross Browser Support (IE 7+, Safari, Mozilla Firefox, Chrome, Opera 9+) 8theme 4 GadgetStore Magento Theme Instructions

5 Installation & Configuration Thank you for purchasing the GadgetStore Magento Theme! In this document, you will find step-by-step instructions for installing and using GadgetStore. System Requirements GadgetStore only supports Magento Community Edition , 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 8theme 5 GadgetStore Magento Theme Instructions

6 Installation & Configuration Uploading GadgetStore Before you begin the GadgetStore installation process, we recommend to back up your Magento installation and database. To upload GadgetStore to Magento: 1. Unzip the downloaded GadgetStore folder. 2. Using an FTP client, copy the app, js, media and skin folders to the Magento software s root directory. If you are working with a Mac, please make sure you are merging the new folders with Magento and not replacing the Magento directory. 3. Log in to the Magento admin panel. 4. Go to 'System > Configuration'. Click Design on the left-hand menu. 5. Under HTML Head, find the Default field and type GadgetStore. 8theme 6 GadgetStore Magento Theme Instructions

7 Installation & Configuration 6. Scroll down to the Header section. In the Logo Image Scr field, type images/logo.gif. This is a sample logo that can be replaced with your own by uploading the file to the server and entering the new URL in this field. 8theme 7 GadgetStore Magento Theme Instructions

8 Installation & Configuration 7. You can also enter an alt attribute for the logo in Logo Image Alt and a welcome message in Welcome Text. The welcome message will appear to the right of the logo at the very top of the page. 8. Scroll back to the top of the page and click the Save Config button. 9. Next, go to 'System > Cache Management' from the top navigation menu. You will need to clear the store cache and all cookies. 10. Click Select All on the left side of the page. On the right side, select Refresh in the Actions dropdown menu and click the Submit button. 11. Finally, 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. 8theme 8 GadgetStore Magento Theme Instructions

9 Installation & Configuration Categories and products As to how properly create categories and products you need to go to the link and watch the video carefully 8theme 9 GadgetStore Magento Theme Instructions

10 The Homepage This section will help you create а GadgetStore homepage: 8theme 10 GadgetStore Magento Theme Instructions

11 The Homepage Setting the Page Layout 1. Select the homepage from 'CMS > Pages'. 2. If you haven t done this already, enter a name for the page in Page Title and a fill in the URL Key field. 3. Select Enabled in the Status drop-down menu. 4. Click the Save Page button. 8theme 11 GadgetStore Magento Theme Instructions

12 The Homepage 5. Select Design from the left-hand menu. The following page will appear: 6. Select 1 column from the Layout drop-down menu. 7. In the Layout Update XML box, either remove the existing content or add the following comment tag around the existing content: <!--<reference name="content"> <block type="catalog/product_new" (existing HTML code is here) --> 8. Click the Save Page button. 8theme 12 GadgetStore Magento Theme Instructions

13 The Homepage Adding Content To add content to your homepage: 1. Under 'CMS > Pages', click on the homepage. 2. In the left-hand menu, click Content. 3. Click the Show / Hide Editor button to leave WYSIWYG mode and open the content editor. 4. Copy and paste the following code into the content editor to create the homepage: 8theme 13 GadgetStore Magento Theme Instructions

14 Homepage Adding Content <div id="additional_bg"> <div class="iosslider"><!-- slider --> <div class="slider"><!-- slides --> <div class="slide"><img class="royalimage" src="{{media url="wysiwyg/gadget/slide.png"}}" alt="" /> <div class="text1" style="right: 250px; opacity: 0.8;"><img src="{{media url="wysiwyg/gadget/new_in.png"}}" alt="" /> <div class="text2" style="right: 10px; opacity: 0.8;"><img src="{{media url="wysiwyg/gadget/text.png"}}" alt="" /><br /> <br /> <button class="button btncart" onclick="setlocation(' IT NOW!</span></span></button> <div class="slide"><img class="royalimage" src="{{media url="wysiwyg/gadget/slide1.png"}}" alt="" /> <div class="text1" style="right: 250px; opacity: 0.8;"><img src="{{media url="wysiwyg/gadget/new_in.png"}}" alt="" /> <div class="text2" style="right: 10px; opacity: 0.8;"><img src="{{media url="wysiwyg/gadget/text.png"}}" alt="" /><br /> <br /> <button class="button btncart" onclick="setlocation(' IT NOW!</span></span></button> <div class="slide"><img class="royalimage" src="{{media url="wysiwyg/gadget/slide2.png"}}" alt="" /> <div class="text1" style="right: 250px; opacity: 0.8;"><img src="{{media url="wysiwyg/gadget/new_in.png"}}" alt="" /> <div class="text2" style="right: 10px; opacity: 0.8;"><img src="{{media url="wysiwyg/gadget/text.png"}}" alt="" /><br /> <br /> <button class="button btncart" onclick="setlocation(' IT NOW!</span></span></button> Code continues on the next page... 8theme 14 GadgetStore Magento Theme Instructions

15 Homepage Adding Content <div class="slide"><img class="royalimage" src="{{media url="wysiwyg/gadget/slide3.png"}}" alt="" /> <div class="text1" style="right: 250px; opacity: 0.8;"><img src="{{media url="wysiwyg/gadget/new_in.png"}}" alt="" /> <div class="text2" style="right: 10px; opacity: 0.8;"><img src="{{media url="wysiwyg/gadget/text.png"}}" alt="" /><br /> <br /> <button class="button btncart" onclick="setlocation(' IT NOW!</span></span></button> <div class="slide"><img class="royalimage" src="{{media url="wysiwyg/gadget/slide4.png"}}" alt="" /> <div class="text1" style="right: 250px; opacity: 0.8;"><img src="{{media url="wysiwyg/gadget/new_in.png"}}" alt="" /> <div class="text2" style="right: 10px; opacity: 0.8;"><img src="{{media url="wysiwyg/gadget/text.png"}}" alt="" /><br /> <br /> <button class="button btncart" onclick="setlocation(' IT NOW!</span></span></button> <div class="slide"><img class="royalimage" src="{{media url="wysiwyg/gadget/slide5.png"}}" alt="" /> <div class="text1" style="right: 250px; opacity: 0.8;"><img src="{{media url="wysiwyg/gadget/new_in.png"}}" alt="" /> <div class="text2" style="right: 10px; opacity: 0.8;"><img src="{{media url="wysiwyg/gadget/text.png"}}" alt="" /><br /> <br /> <button class="button btncart" onclick="setlocation(' IT NOW!</span></span></button> <div class="sliderthumbs"> <div class="thumbs-shadow"> Code continues on the next page... 8theme 15 GadgetStore Magento Theme Instructions

16 Homepage Adding Content <div class="slidernavi" style="width: 600px; left: 0px;"><span class="naviitem selected"> <div class="thumb_bg" style="background: url({{media url="wysiwyg/gadget/slide_thumb.png"}}) no-repeat center center;">1 </span> <span class="naviitem"> <div class="thumb_bg" style="background: url({{media url="wysiwyg/gadget/slide1_thumb.png"}}) no-repeat center center;">2 </span> <span class="naviitem"> <div class="thumb_bg" style="background: url({{media url="wysiwyg/gadget/slide2_thumb.png"}}) no-repeat center center;">3 </span> <span class="naviitem"> <div class="thumb_bg" style="background: url({{media url="wysiwyg/gadget/slide3_thumb.png"}}) no-repeat center center;">4 </span> <span class="naviitem"> <div class="thumb_bg" style="background: url({{media url="wysiwyg/gadget/slide4_thumb.png"}}) no-repeat center center;">5 </span> <span class="naviitem"> <div class="thumb_bg" style="background: url({{media url="wysiwyg/gadget/slide5_thumb.png"}}) no-repeat center center;">6 </span> <div class="prev"> <div class="next"> <div class="clear additmargin"> <div class="col3-set"> <div class="col-1"> <h2 class="simple_inst">simple installation</h2> Code continues on the next page... 8theme 16 GadgetStore Magento Theme Instructions

17 Homepage Adding Content <p>there are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p> <div class="col-2"> <h2 class="lot_options">lots of options</h2> <p>there are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p> <div class="col-3"> <h2 class="impr_compap">improved compatibility</h2> <p>there are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p> <div>{{block type="catalog/product_new" name="home.catalog.product.new" alias="product_homepage" template="catalog/product/new.phtml"}} <div class="brands"> <div class="brandscarousel"> <div class="slider"> <div class="slide"><a href="#"><img src="{{media url="wysiwyg/gadget/indesit.png"}}" alt="" /></a> <div class="slide"><a href="#"><img src="{{media url="wysiwyg/gadget/lenovo.png"}}" alt="" /></a> <div class="slide"><a href="#"><img src="{{media url="wysiwyg/gadget/nokia.png"}}" alt="" /></a> Code continues on the next page... 8theme 17 GadgetStore Magento Theme Instructions

18 Homepage Adding Content <div class="slide"><a href="#"><img src="{{media url="wysiwyg/gadget/philips.png"}}" alt="" /></a> <div class="slide"><a href="#"><img src="{{media url="wysiwyg/gadget/gigabyte.png"}}" alt="" /></a> <div class="slide"><a href="#"><img src="{{media url="wysiwyg/gadget/toshiba.png"}}" alt="" /></a> <div class="slide"><a href="#"><img src="{{media url="wysiwyg/gadget/sharp.png"}}" alt="" /></a> <div class="slide"><a href="#"><img src="{{media url="wysiwyg/gadget/indesit.png"}}" alt="" /></a> <div class="slide"><a href="#"><img src="{{media url="wysiwyg/gadget/lenovo.png"}}" alt="" /></a> <div class="slide"><a href="#"><img src="{{media url="wysiwyg/gadget/nokia.png"}}" alt="" /></a> <div class="slide"><a href="#"><img src="{{media url="wysiwyg/gadget/philips.png"}}" alt="" /></a> <div class="slide"><a href="#"><img src="{{media url="wysiwyg/gadget/gigabyte.png"}}" alt="" /></a> <div class="slide"><a href="#"><img src="{{media url="wysiwyg/gadget/toshiba.png"}}" alt="" /></a> <div class="slide"><a href="#"><img src="{{media url="wysiwyg/gadget/sharp.png"}}" alt="" /></a> <div class="slide"><a href="#"><img src="{{media url="wysiwyg/gadget/indesit.png"}}" alt="" /></a> <div class="slide"><a href="#"><img src="{{media url="wysiwyg/gadget/lenovo.png"}}" alt="" /></a> <div class="slide"><a href="#"><img src="{{media url="wysiwyg/gadget/nokia.png"}}" alt="" /></a> <div class="slide"><a href="#"><img src="{{media url="wysiwyg/gadget/philips.png"}}" alt="" /></a> <div class="slide"><a href="#"><img src="{{media url="wysiwyg/gadget/gigabyte.png"}}" alt="" /></a> <div class="slide"><a href="#"><img src="{{media url="wysiwyg/gadget/toshiba.png"}}" alt="" /></a> <div class="slide"><a href="#"><img src="{{media url="wysiwyg/gadget/sharp.png"}}" alt="" /></a> <div class="slide"><a href="#"><img src="{{media url="wysiwyg/gadget/indesit.png"}}" alt="" /></a> Code continues on the next page... 8theme 18 GadgetStore Magento Theme Instructions

19 Homepage Adding Content <div class="slide"><a href="#"><img src="{{media url="wysiwyg/gadget/lenovo.png"}}" alt="" /></a> <div class="slide"><a href="#"><img src="{{media url="wysiwyg/gadget/nokia.png"}}" alt="" /></a> <div class="slide"><a href="#"><img src="{{media url="wysiwyg/gadget/philips.png"}}" alt="" /></a> <div class="slide"><a href="#"><img src="{{media url="wysiwyg/gadget/gigabyte.png"}}" alt="" /></a> <div class="slide"><a href="#"><img src="{{media url="wysiwyg/gadget/toshiba.png"}}" alt="" /></a> <div class="slide"><a href="#"><img src="{{media url="wysiwyg/gadget/sharp.png"}}" alt="" /></a> <div class="brand-arr prev"> <div class="brand-arr next"> <div>{{block type="core/template" template="sample/brands.phtml" }} Click the Save Page button. 8theme 19 GadgetStore Magento Theme Instructions

20 Homepage Slideshow The slideshow on the homepage is a jquery slider. Below is the code that generates the slider: 1.<div id="additional_bg"> 2.<div class="iosslider"><!-- slider --> 3.<div class="slider"><!-- slides --> 4.<div class="slide"><img class="royalimage" src="{{media url="wysiwyg/gadget/slide.png"}}" alt="" /> 5.<div class="text1" style="right: 250px; opacity: 0.8;"><img src="{{media url="wysiwyg/gadget/new_in.png"}}" alt="" /> 6.<div class="text2" style="right: 10px; opacity: 0.8;"><img src="{{media url="wysiwyg/gadget/text.png"}}" alt="" /><br /> <br /> <button class="button 7.btn-cart" onclick="setlocation(' IT 8.NOW!</span></span></button> 9. 8theme 20 GadgetStore Magento Theme Instructions

21 Homepage Slideshow Key lines of code are explained below. Line 1-2: The div class for the slider, <div id="additional_bg"><div class="iosslider"><!-- slider --> Lines 5: elemhover caption fromtop elemtohide slide-head Is responsible for the upper sign "New in". Line 6: elemhover caption frombottom elemtohide slide-slogan Is responsible for the main slide text. Line 7-8: elemhover caption fromright elemtohide slide-button is responsible for the slide button. Here you can name your button. 8theme 21 GadgetStore Magento Theme Instructions

22 Homepage Slideshow 8theme 22 GadgetStore Magento Theme Instructions

23 Footer Footer Links At the bottom of every page there is a footer with links (usually to other pages on the Web site) and the company s contact and copyright information. These sections are modified in different parts of the Magento admin. First, let s look at how to add the footer links, which are in a static block. To add footer links: 1. Go to 'CMS > Static Blocks'. Select Footer Links from the list. The identifier should be footer_links. 2. You will come to the following screen: 8theme 23 GadgetStore Magento Theme Instructions

24 Footer Footer Blocks and Payment Information This footer blocks can be changed in the backend. Go to 'CMS -> Static Blocks', edit footer_shipping or create new if it doesn t exist: <div class="col-1"> <h2>contact Us</h2> <div class="phones"> <div class="icon1"> [email protected]<br /> [email protected] <div class="phones"> <div class="icon2"> 30 South Park Avenue.<br /> San Francisco, USA <div class="phones"> <div class="icon3"> (000) <br /> (000) <div class="col-2"> <h2>our Support</h2> <ul> <li><a href="#">returns</a></li> <li><a href="#">delivery</a></li> Code continues on the next page... 8theme 24 GadgetStore Magento Theme Instructions

25 <li><a href="#">customer Service</a></li> <li><a href="#">gift Cards</a></li> <li><a href="#">mobile</a></li> <li><a href="#">gift Cards</a></li> <li><a href="#">manufacturers</a></li></ul> <div class="col-3"> <h2>shipping Info</h2> <ul> <li><a href="#">your Account</a></li> <li><a href="#">personal information</a></li> <li><a href="#">addresses</a></li> <li><a href="#">discount</a></li> <li><a href="#">orders history</a></li> <li><a href="#">addresses</a></li> <li><a href="#">search Terms</a></li></ul> <div class="col-4">{{block type="newsletter/subscribe" template="newsletter/subscribe.phtml"}}<br /> <img class="left" src="{{media url="wysiwyg/gadget/secure1.png"}}" alt="secure" /> <img class="left" src="{{media url="wysiwyg/gadget/secure2.png"}}" alt="secure" /> <img class="left" src="{{media url="wysiwyg/gadget/secure3.png"}}" alt="secure" /> <div class="clear"> <div style="padding-top: 2px;"><img style="margin-right: 3px;" src="{{media url="wysiwyg/gadget/pay1.png"}}" alt="paypal" /> <img style="margin-right: 3px;" src="{{media url="wysiwyg/gadget/pay2.png"}}" alt="visa_straight" /> <img style="margin-right: 3px;" src="{{media url="wysiwyg/gadget/pay3.png"}}" alt="aex" /> <img style="margin-right: 3px;" src="{{media url="wysiwyg/gadget/pay4.png"}}" alt="mastercard" /> <img src="{{media url="wysiwyg/gadget/pay5.png"}}" alt="maestro" /> Click the Save Page button. 8theme 25 GadgetStore Magento Theme Instructions

26 Footer Follow Us This product additional information blocks can be changed in the backend. Go to 'CMS -> Static Blocks', edit follow_us or create new if it doesn t exist: <div class="twitter left"><a href=" style="float: left;" src="{{media url="wysiwyg/gadget/twitter.png"}}" alt="twitter" /></a> <div class="rss left"><a href=" style="float: left; margin-left: 15px;" src="{{media url="wysiwyg/gadget/facebook.png"}}" alt="facebook" /></a> <div class="facebook left"><a href=" style="float: left; margin-left: 15px;" src="{{media url="wysiwyg/gadget/rss.png"}}" alt="rss" /></a> Click the Save Page button. 8theme 26 GadgetStore Magento Theme Instructions

27 Product page Product Additional Information This product additional information blocks can be changed in the backend. Go to 'CMS -> Static Blocks', edit productview or create new if it doesn t exist: <p><img src="{{media url="wysiwyg/gadget/sample.png"}}" alt="" /></p> <p><img src="{{media url="wysiwyg/gadget/sample2.png"}}" alt="" /></p> Click the Save Page button. 8theme 27 GadgetStore Magento Theme Instructions

28 Navigation Custom Block This navigation custom blocks can be changed in the backend. Go to 'CMS -> Static Blocks', edit nav_block1 or create new if it doesn t exist: <div class="col2-set"> <div class="col-1"> <h3>custom HTML</h3> <img style="float: left; margin: 0 20px 20px 0;" src="{{media url="wysiwyg/gadget/blok2_1.png"}}" alt="" /> Augue mid egestas magna ac? Augue integer hac, amet porttitor turpis. Massa! Enim amet non. Urna purus tincidunt augue montes? Adipiscing diam quis adipiscing, augue dolor massa? Elementum, aliquam elit. Mus eu lacus habitasse. Arcu, risus pulvinar eu, cursus enim scelerisque natoque, rhoncus integer. Vel ridiculus lundium vel, massa! Ac.Elementum, aliquam elit. Mus eu lacus habitasse. Arcu, risus pulvinar eu, cursus enim scelerisque natoque, rhoncus integer. Vel ridiculus lundium vel, massa! Ac. <div class="col-2"> <h3>editable in Admin</h3> <img style="float: left; margin: 0 20px 20px 0;" src="{{media url="wysiwyg/gadget/blok2_2.png"}}" alt="" /> Augue mid egestas magna ac? Augue integer hac, amet porttitor turpis. Massa! Enim amet non. Urna purus tincidunt augue montes? Adipiscing diam quis adipiscing, augue dolor massa? Elementum, aliquam elit. Mus eu lacus habitasse. Arcu, risus pulvinar eu, cursus enim scelerisque natoque, rhoncus integer. Vel ridiculus lundium vel, massa! Ac.Elementum, aliquam elit. Mus eu lacus habitasse. Arcu, risus pulvinar eu, cursus enim scelerisque natoque, rhoncus integer. Vel ridiculus lundium vel, massa! Ac. Click the Save Page button. 8theme 28 GadgetStore Magento Theme Instructions

29 Navigation Custom Block2 This navigation custom blocks can be changed in the backend. Go to 'CMS -> Static Blocks', edit nav_block10 or create new if it doesn t exist: <div class="col4-set"> <div class="col-1"> <h3>custom Block</h3> Augue mid egestas magna ac? Augue integer hac, amet porttitor turpis. Massa! Enim amet non. Urna purus tincidunt augue montes? <div class="col-2"> <h3>your HTML</h3> <img style="float: left; margin: 0 20px 20px 0;" src="{{media url="wysiwyg/gadget/blok1_2.png"}}" alt="" /> Augue mid egestas magna ac? Augue integer hac, amet porttitor turpis. Massa! Enim amet non. Urna purus tincidunt augue montes? <div class="col-3"> <h3>editable in Admin</h3> <img style="float: left; margin: 0 20px 20px 0;" src="{{media url="wysiwyg/gadget/blok1_3.png"}}" alt="" /> Augue mid egestas magna ac? Augue integer hac, amet porttitor turpis. Massa! Enim amet non. Urna purus tincidunt augue montes? <div class="col-4"> <h3>cms->static Blocks</h3> <img style="float: left; margin: 0 20px 20px 0;" src="{{media url="wysiwyg/gadget/blok1_4.png"}}" alt="" /> Augue mid egestas magna ac? Augue integer hac, amet porttitor turpis. Massa! Enim amet non. Urna purus tincidunt augue montes? Click the Save Page button. 8theme 29 GadgetStore Magento Theme Instructions

30 HTML Block This navigation custom blocks can be changed in the backend. Go to 'CMS -> Static Blocks', edit left_block1 or create new if it doesn t exist: <div class="category-block-1-img" style="padding-bottom: 15px; border-bottom: 1px solid #e1e1e1; text-align: center;"><img src="{{media url="wysiwyg/gadget/category_static_block_banner.png"}}" alt="" /> <div class="category-block-1-txt" style="color: #575757; padding-top: 10px;"> <p>you can add this block from admin panel via CMS Blocks</p> Click the Save Page button. 8theme 30 GadgetStore Magento Theme Instructions

31 HTML Block This Editable in Admin blocks can be changed in the backend. Go to 'CMS -> Static Blocks', edit left_block2 or create new if it doesn t exist: <div class="category-block-2-content" style="border-bottom: 1px solid #e1e1e1;"> <p>lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <div class="category-block-2-txt" style="margin-top: 10px;"> <p>you can add this block from admin panel via CMS - Blocks</p> Click the Save Page button. 8theme 31 GadgetStore Magento Theme Instructions

32 HTML Block This HTML blocks can be changed in the backend. Go to 'CMS -> Static Blocks', edit right_block1 or create new if it doesn t exist: <div class="category-block-1-img" style="padding-bottom: 15px; border-bottom: 1px solid #e1e1e1; text-align: center;"><img src=" alt="" /> <div class="category-block-1-txt" style="color: #575757; padding-top: 10px;"> <p>you can add this block from admin panel via CMS - Blocks</p> Click the Save Page button. 8theme 32 GadgetStore Magento Theme Instructions

33 HTML Block This left block without design blocks can be changed in the backend. Go to 'CMS -> Static Blocks', edit left_block_without_design1 or create new if it doesn t exist: <p><img src="{{media url="wysiwyg/gadget/banner_left.png"}}" alt="" /></p> Click the Save Page button. 8theme 33 GadgetStore Magento Theme Instructions

34 HTML Tab This HTML Tab without design blocks can be changed in the backend. Go to 'CMS -> Static Blocks', edit product_custom_tab or create new if it doesn t exist: <div class="col2-set"> <div class="col-1"> <h3>custom HTML</h3> <img style="float: left; margin: 0 20px 20px 0;" src="{{media url="wysiwyg/gadget/blok2_1.png"}}" alt="" /> Augue mid egestas magna ac? Augue integer hac, amet porttitor turpis. Massa! Enim amet non. Urna purus tincidunt augue montes? Adipiscing diam quis adipiscing, augue dolor massa? Elementum, aliquam elit. Mus eu lacus habitasse. Arcu, risus pulvinar eu, cursus enim scelerisque natoque, rhoncus integer. Vel ridiculus lundium vel, massa! Ac.Elementum, aliquam elit. Mus eu lacus habitasse. Arcu, risus pulvinar eu, cursus enim scelerisque natoque, rhoncus integer. Vel ridiculus lundium vel, massa! Ac. <div class="col-2"> <h3>editable in Admin</h3> <img style="float: left; margin: 0 20px 20px 0;" src="{{media url="wysiwyg/gadget/blok2_2.png"}}" alt="" /> Augue mid egestas magna ac? Augue integer hac, amet porttitor turpis. Massa! Enim amet non. Urna purus tincidunt augue montes? Adipiscing diam quis adipiscing, augue dolor massa? Elementum, aliquam elit. Mus eu lacus habitasse. Arcu, risus pulvinar eu, cursus enim scelerisque natoque, rhoncus integer. Vel ridiculus lundium vel, massa! Ac.Elementum, aliquam elit. Mus eu lacus habitasse. Arcu, risus pulvinar eu, cursus enim scelerisque natoque, rhoncus integer. Vel ridiculus lundium vel, massa! Ac. Click the Save Page button. 8theme 34 GadgetStore Magento Theme Instructions

35 New Product Blocks New arrivals product in this month on homepage Edit a product and set certain value for attributes Set Product as New from Date and Set Product as New to Date. 8theme 35 GadgetStore Magento Theme Instructions

36 Theme Options For easing the template configuration it has been created small module. You can see the template configurations on the page 'System -> Configuration'. I have provided a few options, which you can manage from admin panel without editing template: 1. General Options Menu type: Available Options: Wide Menu, Superfish Menu By Default: Wide Menu Additional Navigation Link: Available Options: Text By Default: Clearance Additional Navigation Link URL Available Options: Text By Default: # Header Phone Available Options: Text 2. Slideshow Options Use Slideshow: Available Options: Enable, Disable By Default: Enable Speed: By Default: theme 36 GadgetStore Magento Theme Instructions

37 Theme Options 3. Background Options Background-color: Available Options: Enable, Disable By Default: Enable Background-image: Available Options: Text Background-repeat Available Options: no-repeat, repeat-x, repeat-y By Default: select Background- attachment Available Options: fixed, scroll By Default: select Background-position (X) Available Options: left, center, right By Default: select Background-position (Y) Available Options: top, center, bottom By Default: select 4.Product List Page Shopping options: Available Options: Opened, Collapsed By Default: Opened 8theme 37 GadgetStore Magento Theme Instructions

38 Theme Options Ajax "Add to cart": Available Options: Enable, Disable By Default: Enable "New product" label: Available Options: Enable, Disable By Default: Enable "Product on sale" label: Available Options: Enable, Disable By Default: Enable 5.Product Page Use zoom for product images: Available Options: Enable, Disable By Default: Enable Use product scrollbar: Available Options: Enable, Disable By Default: Enable Ajax "Add to cart": Available Options: Enable, Disable By Default: Enable 6. Share Options Use Share Links: Available Options: Enable, Disable By Default: Enable 8theme 38 GadgetStore Magento Theme Instructions

39 Share Code: Available Options: Text By Default: <div style="clear: both;"> <div class="addthis_toolbox addthis_default_style "> <a class="addthis_button_preferred_1"></a> <a class="addthis_button_preferred_2"></a> <a class="addthis_button_preferred_3"></a> <a class="addthis_button_preferred_4"></a> <a class="addthis_button_compact"></a> <a class="addthis_counter addthis_bubble_style"></a> <script type="text/javascript" src=" 4ee a61e"></script> 8theme 39 GadgetStore Magento Theme Instructions

40 Troubleshooting 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 more questions you need to make a request via our website and we will help you 8theme 40 GadgetStore Magento Theme Instructions

41 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 8theme 41 GadgetStore Magento Theme Instructions

42 Using Magento Categories To help customers browse your online store efficiently, you will most likely need to organize your products into categories and sub-categories. Please read the following documentation to learn how to create and manage categories. Tutorial: Creating and Managing Categories Admin Panel > Categories > Manage Categories 8theme 42 GadgetStore Magento Theme Instructions

43 Using Magento Adding Products to Your Online Store You will, of course, need to know how to add products to your online store. The following links will help you set up, organize and manage your products, and add images and product descriptions. Tutorial: Creating Products Magento Screencast: Creating a Simple Product Adding a New Product 8theme 43 GadgetStore Magento Theme Instructions

44 Additional Help For more information on using Magento, please use the resources mentioned in the Using Magento section of this documentation. Thank you for purchasing GadgetStore for Magento! 8theme 44 GadgetStore Magento Theme Instructions