Pixeri

So you are about to install our responsive Magento theme Sterix -- the professional Magento fashion theme for eCommerce Magento stores. The theme is packed up with long-listed complementary Magento extensions.
Sterix is fully responsive and supports Off-canvas menu for collapsed screen devices. There are two ways to install a UberTheme Magento theme like Sterix:

  • General Installation: Applicable if you have installed a Magento base on your server before.
  • Quickstart Installation: Applicable if you want to get a whole new site as per Demo.

Decide which way to follow. Once downloaded, unzip the package to get the 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 Wall already integrated to match the demo.
  • source: contains all source files of the theme.

Provided that you have installed the Magento base already, General Installation will help you adapt the theme and its extensions with your current site.

Note: Your store must be ready before the installation. If not, get it done quickly by following the Magento Installation Guide. See also the following docs for general installations and configurations.

For more details, please check the documentation of the specific extension here.

1. Create Static Blocks:

The Pixeri front-page uses 20 static blocks on theme:

Static Blocks list

To create these blocks, go to CMS > Static Block > and select page that you want to display this block on (e.g: Home page):

Static Blocks

You can add a new block by click on Add New Block button to create new block and input the content of this block as you need. Please see here.

1.1. Information:

Backend settings as in Demo

HTML Code:

<div class="block block-info">
<div class="block-title"><strong><span>Information</span></strong></div>
<div class="block-content">
<ul class="list">
<li><a title="About Us" href="{{store direct_url="about-magento-demo-store"}}">About Us</a></li>
<li><a title="Customer Service" href="{{store direct_url="customer-service"}}">Customer Service</a></li>
<li><a title="Site Map" href="{{store direct_url="catalog/seo_sitemap/category"}}">Site Map</a></li>
<li><a title="Search Terms" href="{{store direct_url="catalogsearch/term/popular"}}">Search Terms</a></li>
</ul>
</div>
</div>

Front-end Appearance

1.2. Services -- support:

Backend settings as in Demo.

HTML Code:

<div class="block block-customer">
<div class="block-title"><strong><span>Services - support</span></strong></div>
<div class="block-content">
<ul class="list">
<li><a title="Advanced Search" href="{{store direct_url="catalogsearch/advanced"}}">Advanced Search</a></li>
<li><a title="Shipping Options" href="#">Shipping Options</a></li>
<li><a title="Returns and Exchanges" href="#">Returns and Exchanges</a></li>
<li><a title="Product Recall" href="#">Product Recall</a></li>
</ul>
</div>
</div>

Front-end Appearance

1.3. Order and Shipping:

Backend settings as in Demo.

HTML Code:

<div class=" col-3">
<div class="block block-list">
<div class="block-title"><strong> <span>Contact us</span> </strong></div>
<div class="block-content">
<div class="text-intro">Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like</div>
<ul class="contact-list">
<li class="phone"><a title="phone" href="javascript:void(0)">(+844) 763 22 89</a></li>
<li class="mail"><a title="mail" href="mailto:info@joomsolutions.com">info@joomsolutions.com</a></li>
<li class="skype"><a title="skype" href="skype:account_name?chat">Skype</a></li>
</ul>
</div>
</div>
</div>

Front-end Appearance

1.4. Payment method :

Backend settings as in Demo.

HTML Code:

<div class="block block-payment">
<div class="block-content">
<ul class="icon-payment clearfix">
<li><a href="#"><img title="payment" src="{{media url="demo/payicon-01.png"}}" alt="payment 1" /></a></li>
<li><a href="#"><img title="payment" src="{{media url="demo/payicon-02.png"}}" alt="payment 2" /></a></li>
<li><a href="#"><img title="payment" src="{{media url="demo/payicon-03.png"}}" alt="payment 3" /></a></li>
<li><a href="#"><img title="payment" src="{{media url="demo/payicon-04.png"}}" alt="payment 4" /></a></li>
</ul>
</div>
</div>

Front-end Appearance

1.5. 3 in 1 :

Backend settings as in Demo.

HTML Code:

<div class="col-3">
<div class="row">{{widget type="cms/widget_block" template="cms/widget/static_block/default.phtml" block_id="23"}}</div>
<div class="row">{{widget type="cms/widget_block" template="cms/widget/static_block/default.phtml" block_id="24"}}</div>
<div class="row">{{widget type="cms/widget_block" template="cms/widget/static_block/default.phtml" block_id="14"}}</div>
</div>

Front-end Appearance

1.6. Nulla Imperdiet :

Backend settings as in Demo.

HTML Code:

<div class="col-1">
<div class="block block-shop-map">
<div class="block-title"><strong><span>Shop Map</span></strong></div>
<div class="block-content">
<div class="demo-image"><a href="#"><img title="payment" src="{{media url="demo/sam-04.jpg"}}" alt="image demo" /></a></div>
<div class="text-intro">8st Floor, HCMCC Building, 249A Thuy Khue Road. Tay Ho District, Hanoi, Vietnam</div>
</div>
</div>
</div>

Front-end Appearance

1.7. Static content white :

Backend settings as in Demo.

HTML Code:

<div class="col-3">
<div class="block block-white">
<div class="block-title"><strong><span>Static content white</span></strong></div>
<div class="block-content">
<div class="demo-image"><a href="#"><img title="payment" src="{{media url="demo/sam-03.jpg"}}" alt="image demo" /></a></div>
<div class="article-name"><a href="#">Glenn - Marc Goldstein</a></div>
<div class="text-intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sapien purus, semper non luctus eget, egestas at urna. Suspendisse potenti.</div>
<div class="readon"><a href="#">Read More</a></div>
</div>
</div>
</div>

Front-end Appearance

1.8. Static content red :

Backend settings as in Demo.

HTML Code:

<div class="col-2">
<div class="block block-red">
<div class="block-title"><strong><span>Static content red</span></strong></div>
<div class="block-content">
<div class="demo-image"><a href="#"><img title="payment" src="{{media url="demo/sam-02.jpg"}}" alt="image demo" /></a></div>
<div class="article-name"><a href="#">Et si on vivait tous ensemble?</a></div>
<div class="text-intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sapien purus, semper non luctus eget, egestas at urna. Suspendisse potenti.</div>
<div class="readon"><a href="#">Read More</a></div>
</div>
</div>
</div>

Front-end Appearance

1.9. Static content blue :

Backend settings as in Demo.

HTML Code:

<div class="col-1">
<div class="block block-blue">
<div class="block-title"><strong><span>Static content blue</span></strong></div>
<div class="block-content">
<div class="demo-image"><a href="#"><img title="payment" src="{{media url="demo/sam-01.jpg"}}" alt="image demo" /></a></div>
<div class="article-name"><a href="#">Et si on vivait tous ensemble?</a></div>
<div class="text-intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sapien purus, semper non luctus eget, egestas at urna. Suspendisse potenti.</div>
<div class="readon"><a href="#">Read More</a></div>
</div>
</div>
</div>

Front-end Appearance

1.10. 4 in 1 :

Backend settings as in Demo.

HTML Code:

<div class="col-2">
<div class="row clearfix">{{widget type="cms/widget_block" template="cms/widget/static_block/default.phtml" block_id="11"}} {{widget type="cms/widget_block" template="cms/widget/static_block/default.phtml" block_id="12"}}</div>
<div class="row clearfix">{{widget type="cms/widget_block" template="cms/widget/static_block/default.phtml" block_id="22"}} {{widget type="cms/widget_block" template="cms/widget/static_block/default.phtml" block_id="13"}}</div>
</div>

Front-end Appearance

1.11. Coming Soon :

Backend settings as in Demo.

HTML Code:

<div class="block-slider2 block-skyblue">{{block type="joomlart_jmproductsslider/list" name="jmproductsslider" template="joomlart/jmproductsslider/list2.phtml" title="Comming Soon" use_scrollerbar="0" number_items="1" itemwidth="620" itemheight="250" show_readmore="1" max="220" quanlity="5" }}</div>

Front-end Appearance

1.12. Contact us :

Backend settings as in Demo.

HTML Code:

<li><a title="Phasellus ullamcorper" href="{{store direct_url="contacts"}}">Contact Information</a></li>
<li><a title="Imperdiet diam et" href="#">Imperdiet diam et</a></li>
<li><a title="Mignissim" href="#">Mignissim</a></li>
<li><a title="Nam sit amet" href="#">Nam sit amet</a></li>
</ul>
</div>
</div>

Front-end Appearance

1.13. Our Newsletter :

Backend settings as in Demo.

HTML Code:

<div class="block block-subscribe">
<div class="block-title"><strong><span>Our Newsletter</span></strong></div>
<div class="block-content">
<div class="text-intro">Duis ultriceharetra gna. Donec sanesmalesuada orcnec sit amet erorem ipsum dolor sit amt consc .</div>
{{block type="newsletter/subscribe" name="right.newsletter" template="newsletter/subscribe.phtml"}}</div>
</div>

Front-end Appearance

1.14. Connect me :

Backend settings as in Demo.

HTML Code:

<div class="block block-conect">
<div class="block-title"><strong><span>Connect me</span></strong></div>
<div class="block-content">
<ul class="clearfix">
<li><a href="#"><img title="twitter" src="{{media url="demo/icon-twitter.png"}}" alt="twitter" /></a></li>
<li><a href="#"><img title="Facebook" src="{{media url="demo/icon-facebook.png"}}" alt="facebook" /></a></li>
<li><a href="#"><img title="google+" src="{{media url="demo/icon-google+.png"}}" alt="google+" /></a></li>
</ul>
</div>
</div>

Front-end Appearance

1.15. Popular Tab :

Backend settings as in Demo.

HTML Code:

<div>{{block type="joomlart_jmproductsslider/list" name="jmproductsslider" template="joomlart/jmproductsslider/list.phtml" use_scrollerbar="1" }}</div>

Front-end Appearance

1.16. Featured Tab :

Backend settings as in Demo.

HTML Code:

<div>{{block type="joomlart_jmproductsslider/list" name="jmproductsslider" template="joomlart/jmproductsslider/list.phtml" use_scrollerbar="1" catsid="16,17"}}</div>

Front-end Appearance

1.17. Guest’s vote Tab :

Backend settings as in Demo.

HTML Code:

<div>{{block type="joomlart_jmproductsslider/list" name="jmproductsslider" template="joomlart/jmproductsslider/list.phtml" use_scrollerbar="1" mode="top_rated" }}</div>

Front-end Appearance

1.18. Spotlight Tab :

Backend settings as in Demo.

HTML Code:

<div>{{block type="joomlart_jmcategorylist/list" name="jmcategorylist" template="joomlart/jmcategorylist/list.phtml" mode="best_buy"}}</div>

Front-end Appearance

1.19. Top Tab :

Backend settings as in Demo.

HTML Code:

<div>{{block type="joomlart_jmcategorylist/list" name="jmcategorylist" template="joomlart/jmcategorylist/list.phtml" mode="top_rated"}}</div>

Front-end Appearance

1.20. Top Most :

Backend settings as in Demo.

HTML Code:

<div>{{block type="joomlart_jmcategorylist/list" name="jmcategorylist" template="joomlart/jmcategorylist/list.phtml" mode="most_reviewed"}}</div>

Front-end Appearance

2. Product Extension:

To push this extension into front page like our demo site, go to CMS > Pages

Then click on Homepage > Content tab

Please fill in Content parameter with syntax below:

PHP Code:

<div>{{block type="joomlart_jmproducts/list" name="home.jmproducts.list" template="joomlart/jmproducts/list.phtml" }}</div>

Navigate to System > Configuration > Products and configure default criteria as per screen-short below for Product List

Then, see how it works on front-page:

You can configure the Number Of Products or Number Of Items/Row as you need.

3. ProductSlider Extension:

Pixeri used Products Slider extension with empty name

Navigate to System > Configuration > Products Slider and configure default criteria as per screen-short below:

Products Slider

Note:
To be able to use Product attribute of Type of product display, you need to create a new attribute.

Front-end Appearance

4. Tabs Extension:

Navigate to System > Configuration > Tabs and configure default criteria as per screen-short below:

To push this extension onto front page on top, go to CMS > Pages > Homepage > In Design tab, please fill in Layout Update XML parameter as below :

PHP Code:

<reference name="mass-top">            
    <block type="joomlart_jmtabs/core" name="jmtabs">
        <action method="addTabs_staticblock">
            <title>Popular</title>
            <identifier>position-18</identifier>
            <use_scrollerbar>0</use_scrollerbar>use_scrollerbar>
        </action>
        <action method="addTabs_staticblock">
            <title>Featured</title>
            <identifier>position-19</identifier>
            <use_scrollerbar>0</use_scrollerbar>use_scrollerbar>
        </action>
        <action method="addTabs_staticblock">
            <title>Guest's vote</title>
            <identifier>position-20</identifier>
            <use_scrollerbar>0</use_scrollerbar>use_scrollerbar>
        </action>
    </block>
</reference>

<reference name="content-top">
    <block type="cms/block" name="position-05">
        <action method="setBlockId"><block_id>position-05</block_id></action>
    </block>
</reference>  

See how it works in demo site:

5. Category List Extension:

Navigate to System > Configuration > Category List and configure default criteria as per screen-short below:

Category List

To push this extension into front page like our demo site, access your site’s folder: ..\app\design\frontend\default\jm_pixeri\layout > Open file jmtabs.xml and declare extension position in this file as below

PHP Code:

<action method="addTabs_staticblock">
                    <title>Spotlight</title>
                    <identifier>side-col-tab-01</identifier>
                </action>  
                              
                <action method="addTabs_staticblock">
                    <title>Top</title>
                    <identifier>side-col-tab-02</identifier>
                </action>                
            
                <action method="addTabs_staticblock">
                    <title>Most</title>
                    <identifier>side-col-tab-03</identifier>
                </action>  

See how it works in demo site:

6. How to configure Menu as Pixeri Demo site :

Pixeri uses Mega Menu. Follow the below guide below to get it configured properly.

To enable Mega Menu, please navigate backend > System > Configuration > Mega Menu

To add menu items, please navigate backend > Mega Menu > Manage Menu Item. You must create add new Menu Group. The settings below belong to English group. Other group has similar settings menu item

6.1. DVD Menu :

Front-end appreance:

Item 1: DVD Item -- Menu Backend Settings

Item 2: Action Item -- Menu Backend Settings

Item 3: Anime & Manga Item -- Menu Backend Settings

Item 4: Featured Products Item -- Menu Backend Settings

6.2. Bru-ray Menu :

Front-end appreance:

Item 1: Bru-ray Item -- Menu Backend Settings

Item 2: Anime & Manga Item -- Menu Backend Settings

Item 3: Action & Love Item -- Menu Backend Settings

Item 4: Adventure Item -- Menu Backend Settings

Note:
Other menu items have similar settings with items above.

7. Page Configuration :

7.1. Pixeri -- Magento theme for online movies DVD shop :

Page Information Tab: Backend Settings

Content Tab: Backend Settings

Paste the code below on Content field:

HTML Code:

<div>{{block type="joomlart_jmproducts/list" name="home.jmproducts.list" template="joomlart/jmproducts/list.phtml" }}</div>

Design Tab: Backend Settings

Paste the code below on Layout Update XML field:

HTML Code:

<reference name="mass-top">            
    <block type="joomlart_jmtabs/core" name="jmtabs">
        <action method="addTabs_staticblock">
            <title>Popular</title>
            <identifier>position-18</identifier>
            <use_scrollerbar>0</use_scrollerbar>use_scrollerbar>
        </action>
        <action method="addTabs_staticblock">
            <title>Featured</title>
            <identifier>position-19</identifier>
            <use_scrollerbar>0</use_scrollerbar>use_scrollerbar>
        </action>
        <action method="addTabs_staticblock">
            <title>Guest's vote</title>
            <identifier>position-20</identifier>
            <use_scrollerbar>0</use_scrollerbar>use_scrollerbar>
        </action>
    </block>
</reference>

7.2. 404 Not Found 1 :

Page Information Tab: Backend Settings

Content Tab: Backend Settings

Paste the code below on Content field:

HTML Code:

<div class="page-head-alt">
<h3>Whoops, our bad...</h3>
</div>
<dl><dt>The page you requested was not found, and we have a fine guess why.</dt><dd>
<ul class="disc">
<li>If you typed the URL directly, please make sure the spelling is correct.</li>
<li>If you clicked on a link to get here, the link is outdated.</li>
</ul>
</dd></dl>
<p> </p>
<dl><dt>What can you do?</dt><dd>Have no fear, help is near! There are many ways you can get back on track with Magento Demo Store.</dd><dd>
<ul class="disc">
<li><a onclick="history.go(-1);" href="#">Go back</a> to the previous page.</li>
<li>Use the search bar at the top of the page to search for your products.</li>
<li>Follow these links to get you back on track!<a href="{{store url=""}}">Store Home</a><a href="{{store url="customer/account"}}">My Account</a></li>
</ul>
</dd></dl>
<p> </p>
<p><img style="margin-right: 15px;" src="{{skin url='images/media/404_callout1.jpg'}}" alt="" /><img src="{{skin url='images/media/404_callout2.jpg'}}" alt="" /></p>

Design Tab: Backend Settings