Gamestore
Introduction
Responsive Magento theme Gamestore will be an impressive makeover for any eCommercial websites for Games and Entertainment! Vivid and dynamic, Gamestore features Mega Menu, Basetheme, Off-canvas navigation and other Magento extensions in such a new displaying solution that has not been seen in any of our themes up to now.
As you have chosen Gamestore for your site outfitter, this documentation is to guide you about how to install and configure responsive Magento theme Gamestore to your own website at the most convenient.
Once downloaded Gamestore, you will get a zipped file including following folders:
- mage_ext: contains all built-in extensions of the theme.
- mage_tpl: contains the theme files only.
- quickstart: a full Magento CMS version with our theme already integrated to match the demo.
- source: contains all source files of the theme.
Unzip the files. Please be noted that there are two ways to install a Magento theme:
- General Installation: Applicable when you have installed a Magento base on your server before.
- Quickstart Installation: Applicable for our Magento users. With Quickstart, you will get a site just as the same as our Demo site.
This documentation are going through each way of installation in advance of more further configurations.
General Installation
In case you have installed the Magento base already, this way of installation will help you to adapt the theme and extensions of Gamestore to fit your current site. Let’s see how to install the theme and its extensions respectively.
1. Theme Installation
Please make sure your Magento store is ready before you integrate Gamestore. If your store has not been available yet, get it done quickly by following the Magento Installation Guide.
Extension basetheme is required to be installed before installing the other extensions and theme.
The installation of Gamestore is quite simple with several following steps:
1. Upload the folders skin and app from our download package to your Web server’s document root (from here on, referenced as {docroot}.
2. Unzip “Gamestore” package. Next, copy the two folders skins and app to the root of your Magento site folder on the server. Accordingly, the folders will be overwritten and you should see a directory layout like this:
{docroot}/magento/ +--index.php +--js/ +--lib/ +--LICENSE.txt +--media/ +--pear/ +--skin/ +--var
3. Open the Admin Panel of your store, and access Magento Admin area on a stage localhost: //localhost/magento/index.php/admin/, then log in your Magento Admin area.
4. Navigate to System >> Configuration >> Design. Simply replace the original name e.g. jm_purity with jm_gamestore.
5. Fill “jm_gamestore” into the Themes folder.
6. You can also change the settings for Gamestore Header.
7. Click the button “Save Config” to save your configuration.
You are done! Gamestore is now ready to go!
2. Extension Installation
To install the built-in extensions of Gamestore, please follow steps as below.
- Upload folders skin and app from our download package to your Web server’s document root (from here on, referenced as {docroot}). These files will overwrite default folders skin and app in your Magento folder. Thus, you should see a directory layout like this: {docroot} /magento/app/
{docroot}/magento/ +--index.php +--js/ +--lib/ +--LICENSE.txt +--media/ +--pear/ +--skin/ +--var
- Log into your Magento Admin area (i.e. access Magento Admin area on localhost: //localhost/magento/index.php/admin/).
- Navigate to System >> Configuration.
- The installed extensions will show off. To enter the extension configuration page, click the extension’s name tab.
3. Create Static Blocks
- Go to Magento Admin Panel >> CMS >> Static Blocks.
- Click “Add new Block” button.
- Fill in all fields as below then click “Save Block” button:
- Title: Right module
- Identifier: right_block
- Store View: All Store Views
- Status: Enable
- Content: fill in all syntax quoted as you would like.
- To edit the existing static blocks, go to CMS >> Pages >> and select the page in which blocks you want to edit.
- In General Information tab, fill in the Content field with syntax quoted.
- To display a new static block, copy and paste the following code in the “Layout Update XML” field in “Design” tab.
<html> <reference name="right"> <block type="cms/block" name="jmtabs" before="-"> <action method="staticblock"> <title><strong><COLOR=Red>New block</COLOR></strong></title> <identifier><strong><COLOR=Red>new_block</COLOR></strong></identifier> </action> </block> </reference> </html>
Clear cache if needed (in System >> Cache Management >> Save cache settings). Refresh your Homepage to see the change applied.
Quickstart Installation
Quickstart package is to minimize time and effort in installing your eCommercial sites with the contents just like the Demo sites. Please be kindly noted that, with Quickstart, all your existing data will be overwritten. Thus, we recommend using Quickstart for your first installation with our Magento theme or just in case you want to refresh your own site to the very beginning.
Please follow steps as below.
- Download the Quickstart package from Magento download section.
- Extract and Upload the whole Quickstart package to your server. In Quickstart folder you will see the extracted folder that includes all sample data.
- Create a database for your Magento store (using phpMyAdmin).
- Start the installation process by opening a browser and navigate to your URL (where the Quickstart package uploaded) to load the default Magento installer.
- Kindly follow each step of the Installer so that the installation process can be set.
Notes:
- Do not use “localhost” in URL, otherwise you could not log into your Admin area (you should use your local IP in case of installing on your computer).
- Leave “Tables prefix” field blank.
Layout and Block Positions
The layout of Gamestore Homepage can be illustrated as below.
In the front-page, Gamestore has these following static blocks.
position-1 | position-2 | position-3 | position-4 | position-5 | position-6 | position-7 | position-8 | position-9 | position-11| position-12 | position-13 | position-14 | position-15 | position-16 | addshare | position-17 | position-18 | colors | contactinfo | featured-product
To create a new block, refer to the above guide for details.
Page Configuration
This section will guide you to configure your pages just as the Demo site of Gamestore.
I. Homepage
See the detailed layout of Gamestore Homepage below.
Click here for higher resolution
To configure this page, in the Magento Admin Panel, please navigate to CMS >> Pages. Firstly, create a new page named {Homepage} in “Page Management” section.
- Page Information Tab: click to see the Back-end Settings
- Design Tab: click to see the Back-end Settings
Copy and paste the following code into the “Content” field:
<reference name="tops1"> <block type="cms/block" name="position-2"> <action method="setBlockId"><block_id>position-2</block_id></action> </block> </reference> <reference name="tops2"> <block type="cms/block" name="position-3"> <action method="setBlockId"><block_id>position-3</block_id></action> </block> </reference> <reference name="tops3"> <block type="joomlart_jmtabs/core" name="jmtabs"> <action method="addTabs_staticblock"> <title>All</title> <identifier>position-4</identifier> </action> <action method="addTabs_staticblock"> <title>PC</title> <identifier>position-5</identifier> </action> <action method="addTabs_staticblock"> <title>Xbox360</title> <identifier>position-6</identifier> </action> <action method="addTabs_staticblock"> <title>PS3</title> <identifier>position-7</identifier> </action> <action method="addTabs_staticblock"> <title>Wii-U</title> <identifier>position-8</identifier> </action> </block> </reference> <reference name="mass-top"> <block type="cms/block" name="position-9"> <action method="setBlockId"><block_id>position-9</block_id></action> </block> <block type="cms/block" name="position-10"> <action method="setBlockId"><block_id>position-10</block_id></action> </block> </reference> <reference name="mass-bottom"> <block type="cms/block" name="position-11"> <action method="setBlockId"><block_id>position-11</block_id></action> </block> <block type="cms/block" name="position-12"> <action method="setBlockId"><block_id>position-12</block_id></action> </block> <block type="cms/block" name="position-13"> <action method="setBlockId"><block_id>position-13</block_id></action> </block> </reference> <reference name="bots1"> <block type="cms/block" name="position-14"> <action method="setBlockId"><block_id>position-14</block_id></action> </block> </reference>
II. 404 Page
To configure this page, in the Admin Panel, navigate to CMS >> Pages, select 404 Not Found 1 page to edit the following settings.
- Page Information Tab: click to see the Back-end Settings
- Content Tab: click to see the Back-end Settings
Copy and paste the following code into the “Content” field:
<div class="page-no-route"> <div class="route-title">404 Page not found</div> <a class="go-home" href="{{store url=""}}">Go Home</a> <div class="questions">what are you doing here?!</div> </div>
Front-end Appearance:
Static Block Configuration
1. Position-1: Socials
<div>{{block type="joomlart_jmproducts/list" name="view.jmproducts.list" template="joomlart/jmproducts/list.phtml" catsid="40"}}</div>
Front-end Appearance
2. Position-2: Slideshow
<ul class="list-socials"> <li class="first"><a href="//feeds.feedburner.com/joomlart/magento"><em class="icon-rss"></em><span>RSS</span></a></li> <li><a href="//www.facebook.com/joomlart"><em class="icon-facebook"></em><span>Facebook</span></a></li> <li class="last"><a href="https://twitter.com/JoomlArt"><em class="icon-twitter"></em><span>Twitter</span></a></li> </ul>
Front-end Appearance
3. Position-3: Tom Clancy’s
<div class="position-3"> <div class="block-content"><img src="{{media url="wysiwyg/banner/banner01.png"}}" alt="GameStore" /></div> </div>
Front-end Appearance
4. Position-4: PS Vita
<div>{{block type="joomlart_jmproducts/list" name="view.jmproducts.list" template="joomlart/jmproducts/list.phtml" catsid="40"}}</div>
Front-end Appearance
5. Position-5: PC
<div>{{block type="joomlart_jmproducts/list" name="view.jmproducts.list" template="joomlart/jmproducts/list.phtml" catsid="36"}}</div>
Front-end Appearance
6. Position-6: Xbox360
<div>{{block type="joomlart_jmproducts/list" name="view.jmproducts.list" template="joomlart/jmproducts/list.phtml" catsid="37"}}</div>
Front-end Appearance
7. Position-7: PS3
<div>{{block type="joomlart_jmproducts/list" name="view.jmproducts.list" template="joomlart/jmproducts/list.phtml" catsid="38"}}</div>
Front-end Appearance
8. Position-8: Wii U
<div>{{block type="joomlart_jmproducts/list" name="view.jmproducts.list" template="joomlart/jmproducts/list.phtml" catsid="39"}}</div>
Front-end Appearance
9. Position-9: Call of Duty
<div>{{block type="newsletter/subscribe" name="left.newsletter" template="newsletter/subscribe.phtml" }}</div>
Front-end Appearance
10. Position-10: PC Game
<div class="position position-10"> <div class="col-inner"> <div class="block-content"><a href="#"><img src="{{media url="wysiwyg/banner/banner03.png"}}" alt="GameStore" /></a></div> </div> </div>
Front-end Appearance
11. Position-11: Pre Order
<div class="block-pre-order green col-1 first"> <div class="col-inner"> <div class="block-title"><strong><span>pre-order</span></strong></div> <div class="block-content"><iframe src="//player.vimeo.com/video/57477038?color=faf737" frameborder="0" width="100%" height="190"></iframe> <div class="video-title">Tom Clancy's Splinter Cell Blacklist</div> <a class="more-details" title="more details" href="#">more details</a> <div class="desc">Pre-Order Tom Clancy's Splinter Cell: Blacklist at Gamestore to receive the Covert Hunter Pack. The pack includes the Upper Echelon Pack: <ul> <li>Gold Sonar Goggles</li> <li>Upper Echelon Suit</li> <li>Dead Coast Co-Op Mission</li> </ul> </div> </div> </div> </div>
Front-end Appearance
12. Position-12: Most Anticipated
<div class="block-most-anticipated blue col-2"> <div class="col-inner"> <div class="block-title"><strong><span>Most Anticipated</span></strong></div> <div class="block-content">{{block type="joomlart_jmproducts/list" name="view.jmproducts.list" template="joomlart/jmproducts/most-anticipated.phtml" catsid="43"}}</div> </div> </div>
Front-end Appearance
13. Position-13: Good Prices
<div class="block-good-prices col-3 last"> <div class="col-inner"> <div class="block-title"><strong><span>Good Prices</span></strong></div> <div class="block-content">{{block type="joomlart_jmproductsslider/list" name="jmproductsslider" template="joomlart/jmproductsslider/verticallist.phtml" }}</div> </div> </div>
Front-end Appearance
14. Position-14: Wii U Bundle
<div class="position-14"> <div class="block-content"><img src="{{media url="wysiwyg/banner/banner04.png"}}" alt="GameStore" /></div> </div>
Front-end Appearance
15. Position-15: Get Connected
<div class="block-get-connected"> <div class="col-inner"> <div class="block-title"><strong><span>Get Connected</span></strong></div> <div class="block-content"> <ul class="footer-socials"> <li class="facebook"><a href="//www.facebook.com/joomlart"> <em class="icon-facebook"></em> <span class="name">Facebook</span> <span class="desc">Join the <br />conversation</span> </a></li> <li class="twitter"><a href="https://twitter.com/JoomlArt"> <em class="icon-twitter"></em> <span class="name">Twitter</span> <span class="desc">Get the Lastest <br />news</span> </a></li> <li class="fgoogle-plus"><a href="//www.joomlart.com"> <em class="icon-google-plus"></em> <span class="name">Google+</span> <span class="desc">Join our circle</span> </a></li> <li class="youtube"><a href="//www.joomlart.com"> <em class="icon-youtube"></em> <span class="name">Youtube</span> <span class="desc">View our videos</span> </a></li> <li class="instagram"><a href="//www.joomlart.com"> <em class="icon-instagram"></em> <span class="name">instagram</span> <span class="desc">Lastest images</span> </a></li> </ul> </div> </div> </div>
Front-end Appearance
16. Position 16: Genres
<div class="block-genres col-1 first"> <div class="col-inner"> <div class="block-title"><strong><span>Genres</span></strong></div> <div class="block-content"> <ul> <li><a href="#"><em class="icon-angle-right"></em>Action</a></li> <li><a href="#"><em class="icon-angle-right"></em>Adventure</a></li> <li><a href="#"><em class="icon-angle-right"></em>Sport Games</a></li> <li><a href="#"><em class="icon-angle-right"></em>Arcade</a></li> <li><a href="#"><em class="icon-angle-right"></em>MMO</a></li> <li><a href="#"><em class="icon-angle-right"></em>Puzzle</a></li> </ul> </div> </div> </div>
Front-end Appearance
17. Position 17: Support
<div class="block-support col-2"> <div class="col-inner"> <div class="block-title"><strong><span>Support</span></strong></div> <div class="block-content"> <ul> <li><a href="{{store url="contacts"}}"><em class="icon-angle-right"></em>contact us</a></li> <li><a href="{{store url="privacy-policy-cookie-restriction-mode/"}}"><em class="icon-angle-right"></em>privacy policy</a></li> <li><a href="{{store url="sales/guest/form/"}}"><em class="icon-angle-right"></em>order status</a></li> <li><a href="{{store url="contacts/"}}"><em class="icon-angle-right"></em>faqs</a></li>
<li><a href="{{store url="sales/guest/form/"}}"><em class="icon-angle-right"></em>shipping & returns</a></li> </ul> </div> </div> </div>
Front-end Appearance
18. Position 18: Quick Link
<div class="block-quick-link col-3"> <div class="col-inner"> <div class="block-title"><strong><span>Quick Link</span></strong></div> <div class="block-content"> <ul> <li><a href="#"><em class="icon-angle-right"></em>Privacy and Security</a></li> <li><a href="#"><em class="icon-angle-right"></em>Terms of Use</a></li> <li><a href="#"><em class="icon-angle-right"></em>Game Trailers</a></li> <li><a href="#"><em class="icon-angle-right"></em>International Sites</a></li> <li><a href="#"><em class="icon-angle-right"></em>Career Opportunities</a></li> </ul> </div> </div> </div>
Front-end Appearance
19. Featured product
<div>{{block type="joomlart_jmproducts/list" name="mega.jmproducts.list" template="joomlart/jmproducts/oneproduct.phtml" quanlity="1" productsid="173" title=""}}</div>
Front-end Appearance
20. Addshare : Social Share
<script type="text/javascript" src="//w.sharethis.com/button/buttons.js"></script> <script type="text/javascript">// <![CDATA[ stLight.options({publisher: "be87d52a-d9cd-4453-b4b1-3169c6f28e3d", doNotHash: false, doNotCopy: false, hashAddressBar: false}); // ]]></script> <div class="share-buttons"><span class="st_pinterest_hcount"> </span> <span class="st_fblike_hcount"> </span> <span class="st_plusone_hcount"> </span></div>
Front-end Appearance
21. Contactinfo: Contact Map
<div class="contact-info"> <div class="inner"><iframe src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=123+Main+st.+Los+Angeles,+CA,+90012,+U.S.A+&sll=37.0625,-95.677068&sspn=34.176059,86.572266&ie=UTF8&hq=&hnear=123+S+Main+St,+Los+Angeles,+California+90012&t=m&ll=34.051877,-118.243704&spn=0.027023,0.072012&z=14&iwloc=A&output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="100%" height="555"></iframe> <div class="info-inner"><img src="{{media url="wysiwyg/contact-photo.jpg"}}" alt="GameStore" /> <div class="info-inner2"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<ul class="list-info"> <li class="address"><em class="icon-home"> </em><span>Address:</span> 123 Main st. Los Angeles, CA, 90012, U.S.A</li> <li class="phone"><em class="icon-phone"> </em><span>Phone:</span> (315) 457-0000</li> <li class="fax"><em class="icon-print"> </em><span>Fax:</span> (315) 457-1324</li> <li class="email"><em class="icon-envelope-alt"> </em><span>Email:</span> [email protected]</li> </ul> </div> </div> </div> </div>
Front-end Appearance
22. Colors
<div class="colors-setting"><label for="select-colors">Colors:</label> <a class="colors-default" href="{{store url=""}}?jmcolor=default"><span>default</span></a> <a class="colors-blue" href="{{store url=""}}?jmcolor=blue"><span>blue</span></a> <a class="colors-green" href="{{store url=""}}?jmcolor=green"><span>green</span></a> <a class="colors-red" href="{{store url=""}}?jmcolor=red"><span>red</span></a> <a class="colors-light" href="{{store url=""}}?jmcolor=light"><span>light</span></a><a class="colors-halloween" href="{{store url=""}}?jmcolor=halloween"><span>Halloween</span></a></div>
Front-end Appearance
Extension Configuration
1. Slideshow Extension
In the Magento Admin Panel, navigate to JoomlArt >> Slideshow and configure the default settings as the Back-end Settings.
Copy and paste the following code into the “Description for each item” field.
[desc img="banner01.jpg" url="pc.html"]<h3>GranD theft auto V</h3><span>now available</span>[/desc] [desc img="banner02.jpg" url="pc.html"]<h3>GranD theft auto V</h3><span>now available</span>[/desc] [desc img="banner03.jpg" url="pc.html"]<h3>GranD theft auto V</h3><span>now available</span>[/desc] [desc img="banner04.jpg" url="pc.html"]<h3>GranD theft auto V</h3><span>now available</span>[/desc] [desc img="banner05.jpg" url="pc.html"]<h3>GranD theft auto V</h3><span>now available</span>[/desc]
In order to get the slideshow displayed at the top position on the front-page, navigate to CMS >> Pages >> select the actual page >> Design tab. Copy and paste the following code into the “Layout Update XML” field.
<reference name="tops1"> <block type="cms/block" name="position-2"> <action method="setBlockId"><block_id>position-2</block_id></action> </block> </reference>
Front-end Appearance
For more detail, please check the documentation of the module.
2. Products Extension
In Gamestore, Magento extension Products supports as the Hot Right Now static block of the Mega Menu. First, to get this extension worked, please follow the Hot Right Now setup in Menu Configuration.
In the Magento Admin Panel, navigate to JoomlArt >> Products and configure the default settings as the Back-end Settings.
Front-end Appearance
For more detail, please check the documentation of the module.
3. Masshead Extension
Masshead Magento extension can be displayed at any position. In Gamestore Demo site, this extension is being used at the header of the category pages.
In the Magento Admin Panel, navigate to JoomlArt >> Masshead and configure the default settings as the Back-end Settings.
To get this extension for any categories, navigate to Catalog >> Manage Categories >> select the actual category as shown in Back-end Settings.
Copy and paste the following code into the “Custom Layout Update” tab.
<reference name="mass-head"> <block type="joomlart_jmmasshead/core" name="jmmasshead" > <action method="setData"><name>title</name><value>PC</value></action> <action method="setData"><name>description</name><value>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean blandit justo eget lorem congue ultrices. Praesent hendrerit euismod nisi sit amet gravida. Mauris accumsan pharetra luctus. Morbi feugiat dictum aliquam.</value></action> <action method="setData"><name>background</name><value>wysiwyg/head/banner01.png</value></action> </block> </reference>
Front-end Appearance
For more detail, please check the documentation of the module.
4. Basetheme Extension
4.1. Basetheme Configuration
In the Magento Admin Panel, navigate to JoomlArt >> Basetheme and configure the default settings as the Back-end Settings.
Front-end Appearance
4.2. Label Configuration
To label any products, follow these steps.
Step 1: At Theme Settings, select “Yes” value to enable Labelling function.
Step 2: Navigate to Catalog >> Attributes >> Manage Attributes and create a new attribute named Label.
- Properties -- Back-end Settings
- Manage Label/ Options -- Back-end Settings
Step 3: Navigate to Catalog >> Attributes >> Manage Attribute Sets to add the “Label” attribute into “Default Attribute Set”.
Step 4: Simply choose the label you want for each product as Back-end Settings.
Front-end Appearance
For more detail, please check the documentation of the module.
5. Tabs Extension
Navigate to JoomlArt >> Tabs and configure the default settings as Back-end Settings.
To display this module at the top position onto front-page, copy and paste the following code into the “Custom Design” tab.
<reference name="tops3"> <block type="joomlart_jmtabs/core" name="jmtabs"> <action method="addTabs_staticblock"> <title>All</title> <identifier>position-4</identifier> </action> <action method="addTabs_staticblock"> <title>PC</title> <identifier>position-5</identifier> </action> <action method="addTabs_staticblock"> <title>Xbox360</title> <identifier>position-6</identifier> </action> <action method="addTabs_staticblock"> <title>PS3</title> <identifier>position-7</identifier> </action> <action method="addTabs_staticblock"> <title>Wii-U</title> <identifier>position-8</identifier> </action> </block> </reference>
Front-end Appearance
For more detail, please check the documentation of the module.
6. Mega Menu Extension
Navigate to JoomlArt >> Mega Menu, enable and choose the animation effect for your menu as the Back-end Settings. For detailed configuration of each menu item, please refer to the Menu Configuration.
Front-end Appearance
For more detail, please check the documentation of the module.
7. Product Slider Extension
Navigate to JoomlArt >> Product Slider and configure the default settings as Back-end Settings.
To display this module at the top position onto front-page, copy and paste the following code into the “Custom Design” tab.
<reference name="mass-bottom"> <block type="cms/block" name="position-13"> <action method="setBlockId"><block_id>position-13</block_id></action> </block> </reference>
Front-end Appearance
For more detail, please check the documentation of the module.
Responsive Layout Configuration
As a responsive Magento theme, Gamestore supports OffCanvas menu for collapsed screens like mobiles and tablets.
Screenshot of Gamestore layout in devices.
Screenshot of Off Canvas for Gamestore layout in devices.
All the style files are located in the folder: skin/frontend/default/jm_gamestore/css.
In this particular theme, we support 3 styles: layout in desktop, tablet and mobile. Please be noted that, with the style files in hand, modification for the files need to be defined in the page.xml file located in: app/design/frontend/default/jm_gamestore/layout.