SwissUpLabs Logo

Argento 1.8.4 - 1.8.5 Manual Upgrade

To switch to new homepage and footer please follow the next steps:

app/design/frontend/argento/pure/template/page/html/footer.phtml

Old footer block is not used anymore, so you can copy your custom content from it into new footer_cms block.

Manual homepage code update
  • Slider row:

    old code:

    <div class="homeslider">
        {{widget type="easyslide/insert" slider_id="argento_pure"}}
    </div>
    

    new code:

    <div class="row">
        <div class="col-md-12">
            <div class="homeslider">
                {{widget type="easyslide/insert" slider_id="argento_pure"}}
            </div>
        </div>
    </div>
    
  • Categories row:

    old code:

    <div class="hidden-phone-off">
        {{widget type="easycatalogimg/widget_list" category_count="4" column_count="4" show_image="1" resize_image="1" image_width="180" image_height="180" subcategory_count="1" template="tm/easycatalogimg/list.phtml"}}
    </div>
    

    new code:

    <div class="row">
        <div class="col-md-12">
            {{widget type="easycatalogimg/widget_list" category_count="4" column_count="4" show_image="1" resize_image="1" image_width="180" image_height="180" subcategory_count="1" template="tm/easycatalogimg/list.phtml"}}
        </div>
    </div>
    
  • Banner row:

    old code:

    <div class="hidden-tablet hidden-phone">
        {{widget type="easybanner/widget_placeholder" placeholder_name="argento-home-content"}}
    </div>
    

    new code:

    <div class="row hidden-tablet hidden-phone">
        <div class="col-md-12">
            {{widget type="easybanner/widget_placeholder" placeholder_name="argento-home-content"}}
        </div>
    </div>
    
  • Tabs row:

    old code:

    <div class="tab-container">
        {{widget type="highlight/product_new" title="New arrivals" products_count="12" column_count="4" template="tm/highlight/product/grid.phtml" class_name="highlight-new" show_page_link="1" page_title="All new products &raquo;" img_width="200" img_height="200"}}
        {{widget type="highlight/product_bestseller" title="Bestsellers" products_count="12" column_count="4" template="tm/highlight/product/grid.phtml" class_name="highlight-bestsellers" show_page_link="1" page_title="All bestsellers &raquo;" img_width="200" img_height="200"}}
        {{widget type="highlight/product_attribute_yesno" attribute_code="recommended" title="Recommended products" products_count="12" column_count="4" template="tm/highlight/product/grid.phtml" class_name="highlight-attribute-recommended" img_width="200" img_height="200"}}
        {{widget type="highlight/product_special" title="On sale" products_count="12" column_count="4" template="tm/highlight/product/grid.phtml" class_name="highlight-special" show_page_link="1" page_title="All on sale products &raquo;" img_width="200" img_height="200"}}
        <div class="block-about block-highlight">
            <div class="block-title"><span>About Us</span></div>
            <div class="block-content" style="padding: 7px 7px;">
                <div class="col3-set">
                    <div class="col-1">
                        <p style="line-height:1.2em;"><small>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi luctus. Duis lobortis. Nulla nec velit. Mauris pulvinar erat non massa. Suspendisse tortor turpis, porta nec, tempus vitae, iaculis semper, pede.</small></p>
                        <p style="color:#888; font:1.2em/1.4em georgia, serif;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi luctus. Duis lobortis. Nulla nec velit. Mauris pulvinar erat non massa. Suspendisse tortor turpis, porta nec, tempus vitae, iaculis semper, pede. Cras vel libero id lectus rhoncus porta.</p>
                    </div>
                    <div class="col-2">
                        <p><strong style="color:#de036f;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi luctus. Duis lobortis. Nulla nec velit.</strong></p>
                        <p>Vivamus tortor nisl, lobortis in, faucibus et, tempus at, dui. Nunc risus. Proin scelerisque augue. Nam ullamcorper. Phasellus id massa. Pellentesque nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc augue. Aenean sed justo non leo vehicula laoreet. Praesent ipsum libero, auctor ac, tempus nec, tempor nec, justo. </p>
                        <p>Maecenas ullamcorper, odio vel tempus egestas, dui orci faucibus orci, sit amet aliquet lectus dolor et quam. Pellentesque consequat luctus purus. Nunc et risus. Etiam a nibh. Phasellus dignissim metus eget nisi. Vestibulum sapien dolor, aliquet nec, porta ac, malesuada a, libero. Praesent feugiat purus eget est. Nulla facilisi. Vestibulum tincidunt sapien eu velit. Mauris purus. Maecenas eget mauris eu orci accumsan feugiat. Pellentesque eget velit. Nunc tincidunt.</p>
                    </div>
                    <div class="col-3">
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi luctus. Duis lobortis. Nulla nec velit. Mauris pulvinar erat non massa. Suspendisse tortor turpis, porta nec, tempus vitae, iaculis semper, pede. Cras vel libero id lectus rhoncus porta. Suspendisse convallis felis ac enim. Vivamus tortor nisl, lobortis in, faucibus et, tempus at, dui. Nunc risus. Proin scelerisque augue. Nam ullamcorper </p>
                        <p><strong style="color:#de036f;">Maecenas ullamcorper, odio vel tempus egestas, dui orci faucibus orci, sit amet aliquet lectus dolor et quam. Pellentesque consequat luctus purus.</strong></p>
                        <p>Nunc et risus. Etiam a nibh. Phasellus dignissim metus eget nisi.</p>
                        <div class="divider"></div>
                        <p>To all of you, from all of us at Magento Demo Store - Thank you and Happy eCommerce!</p>
                        <p style="line-height:1.2em;"><strong style="font:italic 2em Georgia, serif;">John Doe</strong><br/><small>Some important guy</small></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        new TabBuilder();
        new IScroll($$('.tab-container .tabs-wrapper')[0], {
            click: true,
            tap  : true,
            bindToWrapper: true,
            scrollX: true,
            scrollY: false
        });
    </script>
    

    new code:

    <div class="row tab-container">
        {{widget type="highlight/product_new" title="New arrivals" products_count="12" column_count="4" template="tm/highlight/product/grid.phtml" class_name="highlight-new" show_page_link="1" page_title="All new products &raquo;" img_width="200" img_height="200"}}
        {{widget type="highlight/product_bestseller" title="Bestsellers" products_count="12" column_count="4" template="tm/highlight/product/grid.phtml" class_name="highlight-bestsellers" show_page_link="1" page_title="All bestsellers &raquo;" img_width="200" img_height="200"}}
        {{widget type="highlight/product_attribute_yesno" attribute_code="recommended" title="Recommended products" products_count="12" column_count="4" template="tm/highlight/product/grid.phtml" class_name="highlight-attribute-recommended" img_width="200" img_height="200"}}
        {{widget type="highlight/product_special" title="On sale" products_count="12" column_count="4" template="tm/highlight/product/grid.phtml" class_name="highlight-special" show_page_link="1" page_title="All on sale products &raquo;" img_width="200" img_height="200"}}
        <div class="block-about block-highlight">
            <div class="block-title"><span>About Us</span></div>
            <div class="block-content" style="padding: 7px 7px;">
                <div class="row">
                    <div class="col-md-4 col-sm-4">
                        <p style="line-height:1.2em;"><small>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi luctus. Duis lobortis. Nulla nec velit. Mauris pulvinar erat non massa. Suspendisse tortor turpis, porta nec, tempus vitae, iaculis semper, pede.</small></p>
                        <p style="color:#888; font:1.2em/1.4em georgia, serif;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi luctus. Duis lobortis. Nulla nec velit. Mauris pulvinar erat non massa. Suspendisse tortor turpis, porta nec, tempus vitae, iaculis semper, pede. Cras vel libero id lectus rhoncus porta.</p>
                    </div>
                    <div class="col-md-4 col-sm-4">
                        <p><strong style="color:#de036f;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi luctus. Duis lobortis. Nulla nec velit.</strong></p>
                        <p>Vivamus tortor nisl, lobortis in, faucibus et, tempus at, dui. Nunc risus. Proin scelerisque augue. Nam ullamcorper. Phasellus id massa. Pellentesque nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc augue. Aenean sed justo non leo vehicula laoreet. Praesent ipsum libero, auctor ac, tempus nec, tempor nec, justo. </p>
                        <p>Maecenas ullamcorper, odio vel tempus egestas, dui orci faucibus orci, sit amet aliquet lectus dolor et quam. Pellentesque consequat luctus purus. Nunc et risus. Etiam a nibh. Phasellus dignissim metus eget nisi. Vestibulum sapien dolor, aliquet nec, porta ac, malesuada a, libero. Praesent feugiat purus eget est. Nulla facilisi. Vestibulum tincidunt sapien eu velit. Mauris purus. Maecenas eget mauris eu orci accumsan feugiat. Pellentesque eget velit. Nunc tincidunt.</p>
                    </div>
                    <div class="col-md-4 col-sm-4">
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi luctus. Duis lobortis. Nulla nec velit. Mauris pulvinar erat non massa. Suspendisse tortor turpis, porta nec, tempus vitae, iaculis semper, pede. Cras vel libero id lectus rhoncus porta. Suspendisse convallis felis ac enim. Vivamus tortor nisl, lobortis in, faucibus et, tempus at, dui. Nunc risus. Proin scelerisque augue. Nam ullamcorper </p>
                        <p><strong style="color:#de036f;">Maecenas ullamcorper, odio vel tempus egestas, dui orci faucibus orci, sit amet aliquet lectus dolor et quam. Pellentesque consequat luctus purus.</strong></p>
                        <p>Nunc et risus. Etiam a nibh. Phasellus dignissim metus eget nisi.</p>
                        <div class="divider"></div>
                        <p>To all of you, from all of us at Magento Demo Store - Thank you and Happy eCommerce!</p>
                        <p style="line-height:1.2em;"><strong style="font:italic 2em Georgia, serif;">John Doe</strong><br/><small>Some important guy</small></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        new TabBuilder();
        new IScroll($$('.tab-container .tabs-wrapper')[0], {
            click: true,
            tap  : true,
            bindToWrapper: true,
            scrollX: true,
            scrollY: false
        });
    </script>
    
  • Brands slider row:

    old code:

    <div class="block brands-home hidden-phone">
        <div class="block-title">
            <span>Featured Brands</span>
        </div>
        <div class="block-content">
            <a href="#" id="left">Left</a>
            <a href="#" id="right">Right</a>
            <div id="slider-brands-container" class="slider-wrapper">
                <ul class="list-brands slider-brands" id="slider-brands">
                    <li><a href="#"><img src="{{skin url="images/catalog/brands/gucci.jpg"}}" alt="" width="150" height="80"/></a></li>
                    <li><a href="#"><img src="{{skin url="images/catalog/brands/lv.jpg"}}" alt="" width="100" height="80"/></a></li>
                    <li><a href="#"><img src="{{skin url="images/catalog/brands/ck.jpg"}}" alt="" width="130" height="80"/></a></li>
                    <li><a href="#"><img src="{{skin url="images/catalog/brands/chanel.jpg"}}" alt="" width="170" height="80"/></a></li>
                    <li><a href="#"><img src="{{skin url="images/catalog/brands/guess.jpg"}}" alt="" width="130" height="80"/></a></li>
                    <li><a href="#"><img src="{{skin url="images/catalog/brands/versace.jpg"}}" alt="" width="145" height="80"/></a></li>
                    <li><a href="#"><img src="{{skin url="images/catalog/brands/gucci.jpg"}}" alt="" width="150" height="80"/></a></li>
                    <li><a href="#"><img src="{{skin url="images/catalog/brands/lv.jpg"}}" alt="" width="100" height="80"/></a></li>
                    <li><a href="#"><img src="{{skin url="images/catalog/brands/ck.jpg"}}" alt="" width="130" height="80"/></a></li>
                    <li><a href="#"><img src="{{skin url="images/catalog/brands/chanel.jpg"}}" alt="" width="170" height="80"/></a></li>
                    <li><a href="#"><img src="{{skin url="images/catalog/brands/guess.jpg"}}" alt="" width="130" height="80"/></a></li>
                    <li><a href="#"><img src="{{skin url="images/catalog/brands/versace.jpg"}}" alt="" width="145" height="80"/></a></li>
                </ul>
            </div>
            <script type="text/javascript">
                new Slider("slider-brands-container", "left", "right", {shift: 'auto'});
            </script>
        </div>
    </div>
    

    new code:

    <div class="row">
        <div class="col-md-12">
            <div class="block brands-home hidden-phone">
                <div class="block-title">
                    <span>Featured Brands</span>
                </div>
                <div class="block-content">
                    <a href="#" id="left">Left</a>
                    <a href="#" id="right">Right</a>
                    <div id="slider-brands-container" class="slider-wrapper">
                        <ul class="list-brands slider-brands" id="slider-brands">
                            <li><a href="#"><img src="{{skin url="images/catalog/brands/gucci.jpg"}}" alt="" width="150" height="80"/></a></li>
                            <li><a href="#"><img src="{{skin url="images/catalog/brands/lv.jpg"}}" alt="" width="100" height="80"/></a></li>
                            <li><a href="#"><img src="{{skin url="images/catalog/brands/ck.jpg"}}" alt="" width="130" height="80"/></a></li>
                            <li><a href="#"><img src="{{skin url="images/catalog/brands/chanel.jpg"}}" alt="" width="170" height="80"/></a></li>
                            <li><a href="#"><img src="{{skin url="images/catalog/brands/guess.jpg"}}" alt="" width="130" height="80"/></a></li>
                            <li><a href="#"><img src="{{skin url="images/catalog/brands/versace.jpg"}}" alt="" width="145" height="80"/></a></li>
                            <li><a href="#"><img src="{{skin url="images/catalog/brands/gucci.jpg"}}" alt="" width="150" height="80"/></a></li>
                            <li><a href="#"><img src="{{skin url="images/catalog/brands/lv.jpg"}}" alt="" width="100" height="80"/></a></li>
                            <li><a href="#"><img src="{{skin url="images/catalog/brands/ck.jpg"}}" alt="" width="130" height="80"/></a></li>
                            <li><a href="#"><img src="{{skin url="images/catalog/brands/chanel.jpg"}}" alt="" width="170" height="80"/></a></li>
                            <li><a href="#"><img src="{{skin url="images/catalog/brands/guess.jpg"}}" alt="" width="130" height="80"/></a></li>
                            <li><a href="#"><img src="{{skin url="images/catalog/brands/versace.jpg"}}" alt="" width="145" height="80"/></a></li>
                        </ul>
                    </div>
                    <script type="text/javascript">
                        new Slider("slider-brands-container", "left", "right", {shift: 'auto'});
                    </script>
                </div>
            </div>
        </div>
    </div>
    
  • create footer_cms block with the following settings:

    1. Title: footer_cms
    2. Identifier: footer_cms
    3. Status: Enabled
    4. Content:
    
    <div class="footer-cms-container">
        <div class="footer-cms">
          <div class="row footer-set">
              <div class="col-md-5 col-sm-6 col-customer-info">
                  <div class="block block-footer-links">
                  <div class="block-title"><span>Customer Information</span></div>
                  <div class="block-content">
                      <ul class="footer-links">
                        <li>
                          <ul>
                            <li><a href="{{store direct_url="block"}}">Blog</a></li>
                            <li><a href="{{store direct_url="location"}}">Store locator</a></li>
                            <li><a href="{{store direct_url="media"}}">Media</a></li>
                            <li><a href="{{store direct_url="help-center"}}">Help Center</a></li>
                          </ul>
                        </li>
                        <li>
                          <ul>
                            <li><a href="{{store direct_url="customer/account"}}">My Account</a></li>
                            <li><a href="{{store direct_url="sales/order/history"}}">Order Status</a></li>
                            <li><a href="{{store direct_url="wishlist"}}">Wishlist</a></li>
                            <li><a href="{{store direct_url="exchanges"}}">Returns and Exchanges</a></li>
                          </ul>
                        </li>
                        <li class="last">
                          <ul>
                            <li><a href="{{store direct_url="our-company"}}">Our Company</a></li>
                            <li><a href="{{store direct_url="about"}}">About us</a></li>
                            <li><a href="{{store direct_url="careers"}}">Careers</a></li>
                            <li><a href="{{store direct_url="shipping"}}">Shipping</a></li>
                          </ul>
                        </li>
                      </ul>
                  </div>
                  </div>
                  <img width="200" height="60" style="margin-top: 10px;" src="{{skin url="images/security_sign.gif"}}" srcset="{{skin url="images/security_sign@2x.gif"}} 2x" alt="Security Seal"/>
              </div>
              <div class="col-md-3 col-sm-6 col-about">
                  <div class="block footer-about">
                      <div class="block-title"><span>About us</span></div>
                      <div class="block-content">
                          <p>Argento is more than just another template created for Magento. It was created right from the ground based on the best ecommerce stores practices.</p>
                      </div>
                  </div>
                  <div class="block footer-social">
                      <div class="block-title"><span>Join our community</span></div>
                      <div class="block-content">
                          <ul class="icons">
                              <li class="facebook"><a href="facebook.com">Facebook</a></li>
                              <li class="twitter"><a href="twitter.com">Twitter</a></li>
                              <li class="youtube"><a href="youtube.com">YouTube</a></li>
                              <li class="rss"><a href="rss.com">Rss</a></li>
                          </ul>
                      </div>
                  </div>
              </div>
              <div class="col-md-4 col-sm-12 col-contact">
                  {{block type="newsletter/subscribe" name="newsletter.footer" template="newsletter/subscribe.phtml"}}
                  <div class="block footer-call-us">
                      <div class="block-title"><span>Call us</span></div>
                      <div class="block-content">
                          <p class="footer-phone">1.800.555.1903</p>
                          <p>We're available 24/7. Please note the more accurate the information you can provide us with the quicker we can respond to your query.</p>
                      </div>
                  </div>
              </div>
          </div>
        </div>
    </div>
    
Remove compatibility css
  • open file

    app/design/frontend/argento/pure/layout/theme.xml
    

    and remove line 8 with code:

    <action method="addItem"><type>skin_css</type><name>css/old-pure.css</name></action>
    
  • delete css file skin/frontend/argento/pure/css/old-pure.css

Edit this Page