Minisite

So you are about to install our professional Magento theme for eCommerce Magento stores. The theme is packed up with long-listed complementary Magento extensions.
There are two ways to install a UberTheme Magento theme:

  • 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 the theme 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.

The Minisite front-page uses 9 static blocks on Theme:

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

List of static blocks

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

About our shop:

Configure default parameters as below:

Parameters explanation:

  • Block title: Title of Block.
  • Identifier: define ID of Block
  • Store View: choose view option for block
  • Status: Enable/Disable to public to Front-page
  • Content: This is the content of block. You can add image or text content to custom extension by clicking HTML source editor to enter content as you would like.
  • HTML Code:
  • <div class="ja-box">
    <div class="block block-about">
    <div class="block-content clearfix"><img class="left" style="margin-right: 10px;" src="{{media url="demo/sam-10.png"}}" alt="" />
    <p class="block-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas sem quam. Nulla facilisi. Etiam quis lacus erat, sed fringilla libero. Praesent quis nisi quis libero tristique pellentesque nec at augue. Vestibulum pharetra nibh id diam lobortis iaculis. Suspendisse potenti. Aenean nec neque ut erat gravida arius. Nullam non mi id justo luctus vulputate. Nullam aliquet, tortor sed facilisis molestie.</p>
    </div>
    </div>
    </div>
    

    To push this extension onto front-page like our demo site, please insert this php code into page.xml file.

  • Bottom Spotlight:
  • <reference name="botsl1">
                <block type="cms/block" name="position-11">
                    <action method="setBlockId"><block_id>position-11</block_id></action>
                </block>
            </reference>
    		

    Refresh your front-page to see how it works

Popular tags:

  • Content: This is the content of block. You can add image or text content to custom extension by clicking HTML source editor to enter content as you would like.
  • HTML Code:
  • <div class="ja-box" style="width: 27%;">{{block type="tag/popular" name="tags_popular" template="tag/popular.phtml"}}</div>
    

    To push this extension onto front-page like our demo site, please insert this php code into page.xml file.

  • Bottom Spotlight:
  • <reference name="botsl">
                <block type="cms/block" name="position-9">
                    <action method="setBlockId"><block_id>position-9</block_id></action>
                </block>
            </reference>

    Refresh your front-page to see how it works:

    Order Support:

    • Content: This is the content of block. You can add image or text content to custom extension by clicking HTML source editor to enter content as you would like.
    • HTML Code:
    • <div class="ja-box" style="width: 15.5%;">
      <div class="block block-order-support">
      <div class="block-title"><strong><span>Order Support</span></strong></div>
      <div class="block-content clearfix">
      <ul class="clearfix">
      <li><a href="#">Order Status</a></li>
      <li><a href="#">Shipping & Store Pickup</a></li>
      <li><a href="#">International Orders</a></li>
      <li><a href="#">Store Pickup</a></li>
      <li><a href="#">Returns and Refunds</a></li>
      </ul>
      </div>
      </div>
      </div>
      

      To push this extension onto front-page like our demo site, please insert this php code into page.xml file.

    • Bottom Spotlight:
    • <reference name="botsl">
                  <block type="cms/block" name="position-6">
                      <action method="setBlockId"><block_id>position-6</block_id></action>
                  </block>
              </reference> 

      Refresh your front-page to see how it works:

      Connect with us:

      • Content: This is the content of block. You can add image or text content to custom extension by clicking HTML source editor to enter content as you would like.
      • HTML Code:
      • <div class="ja-box ja-box-last" style="width: 22.2%;">
        <div class="block block-connect">
        <div class="block-title"><strong><span>Connect with us</span></strong></div>
        <div class="block-content clearfix">
        <p>Nullam non mi id justo luctus vulputate. Subscribe to all rss or just section you care..</p>
        <ul class="clearfix">
        <li><a href="//www.facebook.com"><img src="{{media url="demo/icon/icon-facebook.png"}}" alt="facebook" /></a></li>
        <li><a href="//twitter.com"><img src="{{media url="demo/icon/icon-twitter.png"}}" alt="twitter" /></a></li>
        <li><a href="//www.linkedin.com"><img src="{{media url="demo/icon/icon-linkedin.png"}}" alt="linkedin" /></a></li>
        </ul>
        </div>
        </div>
        </div>
        

        To push this extension onto front-page like our demo site, please insert this php code into page.xml file.

      • Bottom Spotlight:
      • <reference name="botsl">
                    <block type="cms/block" name="position-10">
                        <action method="setBlockId"><block_id>position-10</block_id></action>
                    </block>
                </reference> 

        Refresh your front-page to see how it works:

        Product Support:

        • Content: This is the content of block. You can add image or text content to custom extension by clicking HTML source editor to enter content as you would like.
        • HTML Code:
        • <div class="ja-box" style="width: 17.5%;">
          <div class="block block-product-support">
          <div class="block-title"><strong><span>Product Support</span></strong></div>
          <div class="block-content clearfix">
          <ul class="clearfix">
          <li><a href="#">Order Support</a></li>
          <li><a href="#">Order Status</a></li>
          <li><a href="#">Shipping & Store Pickup</a></li>
          <li><a href="#">International Orders</a></li>
          <li><a href="#">Store Pickup</a></li>
          </ul>
          </div>
          </div>
          </div>
          

          To push this extension onto front-page like our demo site, please insert this php code into page.xml file.

        • Bottom Spotlight:
        • <reference name="botsl">
                      <block type="cms/block" name="position-7">
                          <action method="setBlockId"><block_id>position-7</block_id></action>
                      </block>
                  </reference>
          

          Refresh your front-page to see how it works:

          Legal:

          • Content: This is the content of block. You can add image or text content to custom extension by clicking HTML source editor to enter content as you would like.
          • HTML Code:
          • <div class="ja-box ja-box-last" style="width: 17.5%;">
            <div class="block block-legal">
            <div class="block-title"><strong><span>Legal</span></strong></div>
            <div class="block-content clearfix">
            <ul class="clearfix">
            <li><a href="#">Conditions of Use</a></li>
            <li><a href="#">Legal Notices</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">California Privacy Rights</a></li>
            <li><a href="#">Price Match Guarantees</a></li>
            </ul>
            </div>
            </div>
            </div>
            

            To push this extension onto front-page like our demo site, please insert this php code into page.xml file.

          • Bottom Spotlight:
          • <reference name="botsl">
                        <block type="cms/block" name="position-8">
                            <action method="setBlockId"><block_id>position-8</block_id></action>
                        </block>
                    </reference>
            

            Refresh your front-page to see how it works:

Product Slider Module

Minisite used Product Slider extensions, named: New Arrivals.

Navigate to System >> Configuration >> Products Slider and configure default criteria as per screenshot below:

Note: Go to Catalog > Manage Categories, see the Category ID that you would like to display on Product Slider.

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 :

<reference name="content-top">
    <block type="joomlart_jmproductsslider/list" name="jmproductsslider" />
</reference>

Slideshow Module

Navigate to System>Configuration>SlideShow and configure default criteria as per screenshot below:

  • Extension Settings:
  • Animation Settings:
  • Thumbnail Settings:
  • Control Settings:
  • Description and Products Settings:
  • Note: In Minisite, displayed image is from Image Folder: media/jmslideshow.

    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 :

    <reference name="slideshow">
        <block type="joomlart_jmslideshow/list" name="jmslideshow" />
    </reference>