Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Navegação mobile com tabs

A Navegação mobile com tabs melhora a Navegação mobile baseada no botão "Hamburguer".

Esta melhoria seria uma nova versão, por isso é importante que primeiro tenha a Navegação mobile implementada para deixar de ter algo assim:

Para ter algo assim:

Esta nova navegação distribui os links da seguinte forma:

  • Todos os link relacionados a páginas que não são categorias vão passar a aparecerem dentro do painel que é exibido ao fazer o clique no botão Hamburguer.
  • Os links de idiomas e relacionados a conta do cliente (criar conta ou login) também passarão para o painel  ao clicar no Hamburguer
  • Teremos três tabs principais que sobrepões o fluxo de compra e são:
    • Inicio: Continuará sendo um link que leva para a home da loja
    • Produtos: Ao ser clicado mostrará a lista de todas as categorias e subcategorias da loja
    • Carrinho: Dependendo se sua loja tem o Carrinho de compras rápidas ou não, mostrará o mesmo e levará o cliente para a página de carrinho.
  • Por último temos um botão pra realizar a busca que aos ser clicado mostrará o campo para realizar a mesma.

Os seguinte passos estão baseados no modelo Lifestyle, o qual usa Bootstrap 2 mas se seu modelo usa Bootstrap 3 deverá apenas mudar as class de CSS "visible-phone" e "hidden-phone" para "visible-xs" e  "hidden-xs".

1. No arquivo navigation-mobile.tpl substitua todo seu conteúdo pelo seguinte:

<div class="visible-phone js-mobile-nav mobile-nav js-search-container">
    <div class="js-mobile-first-row mobile-nav_first-row row-fluid">
        <div class="mobile-nav_hamburger-btn visible-phone pull-left">
            <div class="menu-btn">
                <i class="fa fa-bars mobile-nav_hamburger-btn-icon"></i>
            </div>
        </div>
        <div class="mobile-nav_page-title">
            {% snipplet "mobile-page-title.tpl" %}
        </div>
        <div class="js-toggle-mobile-search js-toggle-mobile-search-open mobile-nav_search-btn visible-phone text-center pull-right">
            <i class="fa fa-search mobile-nav_search-btn-icon"></i>
        </div>
    </div>
    <div class="js-mobile-search-row row-fluid mobile-nav_search-row">
        <form action="{{ store.search_url }}" method="get" class="js-search-form mobile-nav_search-form">
            <div class="input-prepend">
                <span class="add-on js-search-back-btn js-toggle-mobile-search mobile-nav_search-back-btn">
                    <i class="fa fa-chevron-left mobile-nav_search-icon" aria-hidden="true"></i>
                </span>
                <input class="mobile-nav_search-input text-input span2 js-mobile-nav-search-input js-search-input" type="search" autocomplete="off" name="q" placeholder="{{ 'buscar' | translate }}"/>
                 <button type="submit" class="add-on search-submit mobile-nav_search-submit" value="">
                     <i class="fa fa-search mobile-nav_search-icon"></i>
                </button>
            </div>
        </form>
    </div>
    <div class="js-mobile-nav-second-row mobile-nav_second-row container-fluid mobile-second-row">
        {% snipplet "navigation/navigation-mobile-tabs.tpl" %}
    </div>
</div>
<div class="js-search-suggest search-suggest">
    {# AJAX container for search suggestions #}
</div>
{# Categories list for mobile #}
<div class="js-categories-mobile-container" style="display:none;">
    <ul class="mobile-nav_main-categories-container list-style-none p-fixed full-height full-width p-left-none p-right-none">
        <li>
            <a class="d-block text-decoration-none text-wrap no-link p-all border-top border-bottom mobile-nav_all-categories-link font-bold text-uppercase"  href="{{ store.products_url }}">
                {{ 'Ver todos los productos' | translate }}
            </a>
        </li>
        {% snipplet "navigation/navigation-mobile-categories.tpl" %}
    </ul>
    {% for category in categories %}
        {% snipplet "navigation/navigation-mobile-categories-panels.tpl" %}
    {% endfor %}
</div>

Logo em seguida crie uma pasta chamada navigation dentro da pasta snipplets. Que ficaria assim /snipplets/navigation

2. Crie os seguintes arquivos com seus respectivo nomes dentro da pasta navigation:

Nome: navigation-mobile-categories.tpl
Este arquivo vai listar todas as categorias da loja

{% for category in categories %}
    {% if category.subcategories %}
        <li class="mobile-nav_category-list-item mobile-nav_category-list-item-w-subitems mobile-subitems-container">
            <span data-target="js-category-{{ category.id }}" class="mobile-nav_category-list-item-link js-open-mobile-subcategory">
                {{ category.name }}
                <i class="fa fa-chevron-right mobile-right-panel_arrow-right"></i>
            </span>
        </li>
    {% else %}
        <li class="mobile-nav_category-list-item">
            <a class="mobile-nav_category-list-item-link" href="{{ category.url }}">
                {{ category.name }}
            </a>
        </li>
    {% endif %}
{% endfor %}

Nome: navigation-mobile-tabs.tpl
Este arquivo vai conter os componentes relacionados as tabs de navegação

<div class="mobile-nav_tabs-container visible-phone">
    <a href="{{ store.url }}" class="mobile-nav_tab {% if store.is_catalog %}mobile-nav_tab-half{% endif %} {% if template == 'home' %} mobile-nav_tab-selected mobile-nav_tab-current-page{% endif %} pull-left">
        <i class="fa fa-home mobile-nav_tab-icon"></i>
        <span class="mobile-nav_tab-text">{{ 'Inicio' | translate }}</span>
    </a>
    <a {% if categories %}href="#"{% else %}href="{{ store.products_url }}"{% endif %} class="mobile-nav_tab {% if categories %}js-toggle-mobile-categories{% endif %} {% if store.is_catalog %}mobile-nav_tab-half{% endif %} {% if template == 'category' or template == 'product' %} mobile-nav_tab-selected mobile-nav_tab-current-page{% endif %} pull-left">
        <i class="fa fa-th-list mobile-nav_tab-icon mobile-nav_tab-list-icon"></i>
        <span class="mobile-nav_tab-text">{{ 'Productos' | translate }}</span>
    </a>
    {% if not store.is_catalog %}
        {% if settings.ajax_cart %}
            <a href="#" class="mobile-nav_tab js-toggleCart js-toggleCart-ajax p-relative {% if template == 'cart' %} mobile-nav_tab-selected mobile-nav_tab-current-page{% endif %} pull-left">
                <i class="fa fa-shopping-cart mobile-nav_tab-icon"></i>
                <div class="mobile-tav_cart-text-container d-inline-block">
                    <span class="mobile-nav_tab-text">{{ 'Carrito' | translate }}</span>
                    {% if template != 'cart' %}
                        <span id="mobile-cart-amount" class="mobile-nav_tab-cart-amount">{{ "{1}" | translate(cart.items_count ) }}</span>
                    {% endif %}
                </div>
            </a>
        {% else %}
            <div class="mobile-nav_tab {% if template == 'cart' %} mobile-nav_tab-selected mobile-nav_tab-current-page{% endif %} pull-left">
            {% if cart.items_count > 0 %}
            <a href="{{ store.cart_url }}">
            {% else %}
            <a href="#" class="js-trigger-empty-cart-alert">
            {% endif %}
                <i class="fa fa-shopping-cart mobile-nav_tab-icon"></i>
                <div class="mobile-tav_cart-text-container d-inline-block">
                    <span class="mobile-nav_tab-text">{{ 'Carrito' | translate }}</span>
                    {% if template != 'cart' %}
                       <span id="mobile-cart-amount" class="mobile-nav_tab-cart-amount">{{ "{1}" | translate(cart.items_count ) }}</span>
                    {% endif %}
                </div>
            </a>
            </div>
            <div class="js-mobile-nav-empty-cart-alert alert alert-info mobile-nav_empty-cart-alert p-fixed">{{ "El carrito de compras está vacío." | translate }}</div>
        {% endif %}
    {% endif %}
</div>

Nome: navigation-mobile-categories-panels.tpl
Este arquivo vai mostrar os "painéis" que aparecerão animados da direita quando navegar sobre as subcategorias mobile

<ul id="js-category-{{ category.id }}" class="mobile-nav_subcategories-panel mobile-nav_subcategories-panel mobile-right-panel" style="display:none;">
    <a class="js-go-back-mobile-categories mobile-right-panel_header" href="#">
        <i class="fa fa-arrow-left mobile-right-panel_arrow-left"></i>
        <span class="mobile-right-panel_header-text">{{ category.name }}</span>
    </a>
    <li class="mobile-nav_category-list-item">
        <a class="mobile-nav_all-categories-link" href="{{ category.url }}">
        {{ "Ver toda esta categoría" | translate }}
        </a>
    </li>
    {% snipplet "navigation/navigation-mobile-categories.tpl" with categories = category.subcategories %}
</ul>
{% for subcategory in category.subcategories %}
    {% snipplet "navigation/navigation-mobile-categories-panels.tpl" with category = subcategory %}
{% endfor %}

Nome: navigation-hamburguer-panel.tpl
Este arquivo contem o painel que aparece animado da esquerda da tela quando clicar no botão "Hamburguer".

<div class="mobile-sidenav_first-row p-half-bottom">
    <span class="mobile-sidenav_close-btn p-absolute"><i class="fa fa-times menu-btn mobile-sidenav_close-btn-icon pull-right p-half-all"></i></span>
    {% if languages | length > 1 %}
        <div class="mobile-sidenav_mobile-languages languages span12 clear pull-left p-quarter-left p-half-top p-double-right">
            {% for language in languages %}
                {% set class = language.active ? "active" : "" %}
                <a href="{{ language.url }}" class="{{ class }} pull-left p-half-all border-top-none-xs border-bottom-none-xs">{{ language.country | flag_url | img_tag(language.name) }}</a>
            {% endfor %}
        </div>
    {% endif %}
    <ul class="clear-both">
        <div class="mobile-sidenav_mobile-accounts">
             {% if not customer %}
                {% if store.customer_accounts != 'mandatory' %}
                    <li>{{ "Crear cuenta" | translate | a_tag(store.customer_register_url, '', 'd-block container text-decoration-none text-wrap no-link border-bottom-none-xs border-top-none-xs') }}</li>
                {% endif %}
                <li>{{ "Iniciar sesión" | translate | a_tag(store.customer_login_url, '', 'd-block container text-decoration-none text-wrap no-link border-top-none-xs') }}</li>
            {% else %}
                <li>{{ "Mi cuenta" | translate | a_tag(store.customer_home_url, '', 'd-block container text-decoration-none text-wrap no-link border-bottom-none-xs border-top-none-xs') }}</li>
                <li>{{ "Cerrar sesión" | translate | a_tag(store.customer_logout_url, '', 'd-block container text-decoration-none text-wrap no-link border-top-none-xs') }}</li>
            {% endif %}
        </div>
    </ul>
</div>
<div class="mobile-sidenav_second-row clear-both">
    <ul>
        {% snipplet "navigation/navigation-hamburguer-list.tpl" %}
    </ul>
</div>

Nome: navigation-hamburguer-list.tpl
Este arquivo, como seu nome indica, mostrará a lista de páginas dentro do painel relacionado ao botão Hamburguer.

{% for item in navigation %}
    {% if not item.isRootCategory and not item.isHomePage  %}
	    {% if item.subitems %}
	    	<li class="item-with-subitems p-relative">
	    		<div class="js-mobile-sidenav-pages-link-container mobile-sidenav_pages-link-container">
		            <a class="d-block clear-both text-decoration-none text-wrap no-link p-double-right" href="{{ item.url }}">
		                {{ item.name }}
		            </a>
		             <span class="text-center  mobile-sidenav_pages-arrow js-toggle-page-accordion c-pointer p-quarter-all p-absolute"><i class="fa fa-chevron-down p-half-all mobile-sidenav_pages-arrow-icon"></i></span> 
		         </div>
 				<ul class="d-none pages-accordion subpages-container p-none">
					{% snipplet "navigation/navigation-hamburguer-list.tpl" with navigation = item.subitems %}
				</ul>
			</li>
		{% else %}
			 <li>
	            <a class="d-block clear-both text-decoration-none text-wrap no-link" href="{{ item.url }}">
	                {{ item.name }}</a>
	         </li>
		{% endif %}
    {% endif %}
{% endfor %}

3. Crie um novo arquivo chamado mobile-page-title.tpl dentro da pasta snipplets. Este arquivo deve conter o seguinte:

{% if template == 'home' %}
    {{ "Inicio" | translate }}
{% endif %}
{% if template == 'category' %}
    {{ category.name }}
{% endif %}
{% if template == 'page' %}
    {{ page.name }}
{% endif %}
{% if template == 'product' %}
    {{ product.name }}
{% endif %}
{% if template == 'cart' %}
    {% if settings.ajax_cart %}
    	{{ "Edición del carrito de compras" | translate }}
    {% else %}
    	{{ "Carrito de Compras" | translate }}
    {% endif %}
{% endif %}
{% if template == 'contact' %}
    {{ "Contacto" | translate }}
{% endif %}
{% if template == 'search' %}
    {{ "Resultados de búsqueda" | translate }}
{% endif %}
{% if template == '404' %}
    {{ "La página no existe" | translate }}
{% endif %}
{% if template == 'account.login' %}
    {{ "Iniciar sesión" | translate }}
{% endif %}
{% if template == 'account.register' %}
    {{ "Crear cuenta" | translate }}
{% endif %}
{% if template == 'account.reset' %}
    {{ "Cambiar Contraseña" | translate }}
{% endif %}
{% if template == 'account.orders' %}
    {{ "Mi cuenta" | translate }}
{% endif %}
{% if template == 'account.info' %}
    {{ "Mi cuenta" | translate }}
{% endif %}
{% if template == 'account.address' %}
    {{ "Dirección" | translate }}
{% endif %}
{% if template == 'account.addresses' %}
    {{ "Mis direcciones" | translate }}
{% endif %}
{% if template == 'account.order' %}
    {{ "Orden {1}" | translate(order.number) }}
{% endif %}

4. No arquivo layout.tpl vamos precisar fazer várias mudanças.

A primeira que precisa fazer é esconder todos os componentes que não serão vistos no mobile mas sim eu sua versão desktop usando a classe de CSS "hidden-phone" para Bootstrap 2 e "hidden-xs" para Bootstrap 3. Esses componentes são: 

Tudo que está relacionado aos links de idiomas, contas e ao campo de busca:

E tudo relacionado a navegação de desktop, exceto a logo da loja:

5. Em layout.tpl substitua tudo o que se encontra dentro do arquivo do componente com a classe de CSS "pushy".

<nav class="pushy pushy-left mobile-sidenav">
    ....
</nav>

Dentro do mesmo componente adicione a chamada de um dos tpls que criamos anteriormente:

<nav class="pushy pushy-left mobile-sidenav">
    {% snipplet "navigation/navigation-hamburguer-panel.tpl" %}
</nav>

6. Ainda em layout.tpl englobará todo o HTML (menos os componentes que foram escondidos para mobile no passo 4 e o componente que foi modificado no passo 5) dentro de uma div com a classe CSS "main-content"

O conteúdo dentro dessa div deverá ser similar ao resultado em azul na imagem abaixo (incluindo banners, {% template_content %} e o rodapé):

Assegure-se que fora dessa div e antes de abri-la adicione a seguinte chamado do tpl navigation-mobile.tpl

Deveria ficar algo como no seguinte em seu código:

... contenido escondido para mobile
{% snipplet "navigation/navigation-mobile.tpl" %}
<div class="main-content">
    ...contenido del sitio
</div>

Por sua vez tanto a div "main-content" quanto navigation-mobile.tpl e o conteúdo escondido durante o passo 4 deveriam seguir permanecendo englobados dentro da div con o id "container", no entanto o componente com a classe "pushy" deve estar fora, sendo da seguinte forma:

<nav class="pushy pushy-left mobile-sidenav">
    {% snipplet "navigation/navigation-hamburguer-panel.tpl" %}
</nav>
<div class="site-overlay"></div>
<div id="container">
    ... contenido escondido para mobile
    {% snipplet "navigation/navigation-mobile.tpl" %}
    <div class="main-content">
        ...contenido del sitio
    </div>
</div>

Logo abaixo do componente pushy 

<div class="js-search-backdrop search-backdrop backdrop js-toggle-mobile-search container-fluid full-width" style="display: none;"></div>

7. Chegou o momento de aplicar o javascript relacionado com esta funcionalidade. Ele será colocado dentro de layout.tpl mas primeiro devemos modificar o JS relacionado a primeira versão da navegação mobile.

Apague o seguinte código:

$(".mobile-dropdown").click(function(){
    $(this).next("#accordion").slideToggle(300);
    $(this).toggleClass("dropdown-selected");
});

Dentro de um $(document).ready adicione o seguinte código ao final do arquivo onde se encontra o resto do Javascript da loja

$(document).ready(function(){

    // Mobile navigation main element
    var $top_nav = $(".js-mobile-nav");
    var $page_main_content = $(".main-content");
    var $mobile_categories_btn = $(".js-toggle-mobile-categories");
    var $main_categories_mobile_container = $(".js-categories-mobile-container");
    var $search_backdrop = $(".js-search-backdrop");

    // Mobile search
    $(".js-toggle-mobile-search").click(function(e){
        e.preventDefault;
        var $mobile_tab_navigation = $(".js-mobile-nav-second-row");
        $(".js-mobile-first-row").toggle();
        $(".js-mobile-search-row").toggle();
        $mobile_tab_navigation.toggle();
        $(".js-search-input").val();
        $search_backdrop.toggle().toggleClass("search-open");
        if(!$("body").hasClass("mobile-categories-visible")){
            $("body").toggleClass("overflow-none");
        }else{
            $("body").removeClass("mobile-categories-visible");
        }
        $main_categories_mobile_container.hide();
        if($search_backdrop.hasClass("move-up")){
            $page_main_content.removeClass("move-up").addClass("move-down");
            $search_backdrop.removeClass("move-up").addClass("move-down");
            setTimeout(function() { 
                $page_main_content.removeClass("move-down");
            }, 200);
        }else{
            $page_main_content.removeClass("move-down").addClass("move-up");
            $search_backdrop.removeClass("move-down").addClass("move-up");
        }
        if($mobile_categories_btn.hasClass("mobile-nav_tab-selected")){
            $mobile_categories_btn.removeClass("mobile-nav_tab-selected");
            $(".mobile-nav_tab-current-page").addClass("mobile-nav_tab-selected");
        }
    });
    var $mobile_search_input = $(".js-mobile-nav-search-input");
    $(".js-toggle-mobile-search-open").click(function(e){
        e.preventDefault;
        $mobile_search_input.focus();
    });
    $(".js-search-back-btn").click(function(e){
        $(".js-search-suggest").hide();
        $mobile_search_input.val('');
    });
    // Mobile categories 
    $top_nav.addClass("move-down").removeClass("move-up");
    $mobile_categories_btn.click(function(e){
        e.preventDefault();
        $("body").toggleClass("overflow-none mobile-categories-visible");
        if($mobile_categories_btn.hasClass("mobile-nav_tab-selected")){
            $mobile_categories_btn.removeClass("mobile-nav_tab-selected");
            $(".mobile-nav_tab-current-page").addClass("mobile-nav_tab-selected");
        }else{
            $mobile_categories_btn.addClass("mobile-nav_tab-selected");
            $(".mobile-nav_tab-current-page").removeClass("mobile-nav_tab-selected");
        }
        $main_categories_mobile_container.toggle();
        if($top_nav.hasClass("move-up")){
            $main_categories_mobile_container.toggleClass("move-list-up");
        }
    });

    // Mobile subcategories navigation
    $(".js-open-mobile-subcategory").click(function(e){
        e.preventDefault();
        var $this = $(this);
        var this_link_id_val = $this.data("target");
        var $subcategories_panel_to_be_visible = $this.closest($main_categories_mobile_container).find("#" + this_link_id_val);
        $subcategories_panel_to_be_visible.detach().insertAfter(".js-categories-mobile-container > ul:last-child");
        $subcategories_panel_to_be_visible.addClass("animation-panel-right-close").show();
        setTimeout(function(){
            $subcategories_panel_to_be_visible.toggleClass("animation-panel-right-open animation-panel-right-close");
        },100);
    });

    $(".js-go-back-mobile-categories").click(function(e){
        e.preventDefault();
        var $this = $(this);
        var $subcategories_panel_to_be_closed = $this.closest(".mobile-nav_subcategories-panel");
        $(".mobile-nav_subcategories-panel").scrollTop(0);
        $subcategories_panel_to_be_closed.toggleClass("animation-panel-right-open animation-panel-right-close");
        setTimeout(function() { 
            $subcategories_panel_to_be_closed.removeClass("animation-panel-right-close").hide();
        },300);
    });

    //Pages inside hamburguer sidenav navigation
    $(".js-toggle-page-accordion").click(function(e){
        e.preventDefault();
        $(this).toggleClass("mobile-sidenav_pages-arrow-selected").closest(".js-mobile-sidenav-pages-link-container").next(".pages-accordion").slideToggle(300);
    });

    // Empty cart alert (only if AJAX cart widget is not active)
    $(".js-trigger-empty-cart-alert").click(function(e){
        e.preventDefault();
        $(".js-mobile-nav-empty-cart-alert").fadeIn(100).delay(1500).fadeOut(500);
    });
    // Show and hide part of nav depending scroll up or down
    var didScroll;
    var lastScrollTop = 0;
    var delta = 20;
    var navbarHeight = $('header').outerHeight();

    $(window).scroll(function(event){
        didScroll = true;
    });

    setInterval(function() {
        if (didScroll) {
            hasScrolled();
            didScroll = false;
        }
    }, 250);

    function hasScrolled() {
        var st = $(this).scrollTop();
        
        // Make sure they scroll more than delta
        if(Math.abs(lastScrollTop - st) <= delta)
            return;
        
        // If they scrolled down and are past the navbar, add class .move-up.
        if (st > lastScrollTop && st > navbarHeight){
            // Scroll Down
                if(!$("body").hasClass("mobile-categories-visible")){
                    $top_nav.addClass("move-up").removeClass("move-down");
                }
                $(".backdrop").addClass("move-up").removeClass("move-down");
        } else {
            // Scroll Up
            if(st + $(window).height() < $(document).height()) {
                if(!$("body").hasClass("mobile-categories-visible")){
                    $top_nav.removeClass("move-up").addClass("move-down");
                }
                $top_nav.removeClass("move-up").addClass("move-down");
                $(".backdrop").removeClass("move-up").addClass("move-down");
            }
        }
        
        lastScrollTop = st;
    }

  //Mobile cart update
  $('.js-toggleCart').click(function(){
      var ajax_cart_value = $('#cart-amount').text();
      $("#mobile-cart-amount").html(ajax_cart_value);
  });

});

8. Agora precisamos adicionar o CSS correspondente.

Recomendamos que adicione as seguintes classes "helpers" ao final da folha de estilos comum, por exemplo style.css.

/****** PROPERTIES HELPERS ******/
 
/*CSS properties helpers minified, to unminify it you have to copy the code and paste it here http://unminify.com/, after that paste the unminified code here */

.text-danger{color:red}.border-box{box-sizing: border-box}.c-pointer{cursor:pointer}.f-none{float:none!important}.d-none{display:none}.d-inline{display:inline}.d-block{display:block}.d-inline-block{display:inline-block}.p-relative{position:relative!important}.p-absolute{position:absolute}.p-fixed{position:fixed}.clear-both{clear:both}.opacity-80{opacity:.8}.opacity-50{opacity:.5}.full-height{height:100%}.full-width{width:100%}.z-index-above{z-index:999999}.m-top{margin-top:20px}.m-bottom{margin-bottom:20px}.m-right{margin-right:20px}.m-left{margin-left:20px}.m-all{margin:20px}.m-half-top{margin-top:10px!important}.m-half-bottom{margin-bottom:10px!important}.m-half-right{margin-right:10px}.m-half-left{margin-left:10px!important}.m-half-all{margin:10px}.m-quarter-top{margin-top:5px!important}.m-quarter-right{margin-right:5px}.m-quarter-bottom{margin-bottom:5px}.m-quarter-left{margin-left:5px}.m-none-left{margin-left:0!important}.m-quarter-all{margin:5px}.m-double-top{margin-top:40px}.m-double-right{margin-right:40px}.m-double-bottom{margin-bottom:40px}.m-auto{margin:auto}.m-none{margin:0!important}.m-none-bottom{margin-bottom:0}.m-none-top{margin-top:0!important}.m-center{margin:0 auto;position:relative;display:block}.p-double-top{padding-top:40px!important}.p-double-right{padding-right:40px!important}.p-double-bottom{padding-bottom:40px!important}.p-double-left{padding-left:40px!important}.p-top{padding-top:20px!important}.p-none-top{padding-top:0!important}.p-right{padding-right:20px!important}.p-right-none{padding-right:0!important}.p-left-none{padding-left:0!important}.p-bottom{padding-bottom:20px!important}.p-none-bottom{padding-bottom:0!important}.p-left{padding-left:20px!important}.p-all{padding:20px!important}.p-half-top{padding-top:10px!important}.p-half-right{padding-right:10px!important}.p-half-bottom{padding-bottom:10px!important}.p-half-left{padding-left:10px!important}.p-half-all{padding:10px!important}.p-quarter-top{padding-top:5px!important}.p-quarter-right{padding-right:5px}.p-quarter-bottom{padding-bottom:5px}.p-quarter-left{padding-left:5px}.p-quarter-all{padding:5px}.p-none{padding:0!important}.col-tight{padding-left:8px;padding-right:8px}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-nowrap{white-space:nowrap}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-wrap{-ms-word-break:break-all;word-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;hyphens:auto}.font-weight-normal{font-weight:400}.text-decoration-none{text-decoration:none}.text-line-through{text-decoration:line-through}.text-underline{text-decoration:underline}.font-italic{font-style:italic}.font-normal{font-weight:normal}.font-bold{font-weight:700}.line-height-inherit{line-height:inherit}.line-height-initial{line-height:initial}ul.list-style-none li{list-style:none}.mail-to a,.mail-to a:hover,.no-link,.no-link:focus,.no-link:hover{text-decoration:none}.border-radius-none{border-radius:0}.overflow-none{overflow:hidden}.overflow-y{overflow-y:auto}

/* Mobile Helpers */
@media (max-width: 767px) {
  .full-width-xs{width:100%!important}.clear-both-xs{clear:both}.f-none-xs{float:none!important}.pull-left-xs{float: left!important;}.d-inline-block-xs{display:inline-block!important}.p-none-xs{padding:0!important}.p-left-none-xs{padding-left:0}.p-right-none-xs{padding-right:0}.p-half-left-xs{padding-left:10px!important}.p-quarter-left-xs{padding-left:5px}.p-quarter-right-xs{padding-right:5px}.p-half-right-xs{padding-right:10px!important}.p-top-xs{padding-top:20px}.p-half-top-xs{padding-top:10px}.p-bottom-xs{padding-bottom:20px}.p-half-bottom-xs{padding-bottom:10px}.p-double-bottom-xs{padding-bottom:40px}.m-none-xs{margin:0!important}.m-bottom-xs{margin-bottom:20px}.m-half-bottom-xs{margin-bottom:10px}.m-quarter-bottom-xs{margin-bottom:5px!important}.m-top-xs{margin-top:20px!important}.m-half-top-xs{margin-top:10px}.m-quarter-top-xs{margin-top:5px}.m-none-top-xs{margin-top:0}.m-half-right-xs{margin-right:10px!important}.text-center-xs{text-align:center}.text-left-xs{text-align:left}.col-tight-xs{padding-left:8px;padding-right:8px}.drop-shadow-xs{-moz-box-shadow:0 0 3px #ccc;-webkit-box-shadow:0 0 3px #ccc;box-shadow:0 0 3px #ccc}.border-top-none-xs{border-top:0!important}.border-bottom-none-xs{border-bottom:0!important}.horizontal-container{overflow-x:scroll;width:100%;margin:0px}.horizontal-container::-webkit-scrollbar{width:1px;height:0}.horizontal-container::-webkit-scrollbar-track{background:0 0;border-radius:10px}.horizontal-container::-webkit-scrollbar-thumb{border-radius:1px}.horizontal-container ul, .horizontal-products-scroller{white-space:nowrap}
}

Em seguida nesta mesma folha de estilos

@media (max-width: 767px) {
    .mobile-nav{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 4000;
        transition: top .3s cubic-bezier(.16,.68,.43,.99);
        -moz-transition: top .3s cubic-bezier(.16,.68,.43,.99); 
        -webkit-transition:top .3s cubic-bezier(.16,.68,.43,.99); 
        -o-transition: top .3s cubic-bezier(.16,.68,.43,.99);
        box-shadow: 0 2px 2px 0 rgba(0,0,0,.04),0 3px 1px -2px rgba(0,0,0,.04),0 1px 5px 0 rgba(0,0,0,.04);
    }
    .mobile-nav_first-row{
        width: 100%;
        height: 50px;
    }
    .mobile-nav_search-row{
        height: 60px;
    }
    /* Mobile Panels */
    .mobile-right-panel{
        position: fixed;
        top: 0;
        z-index: 4000;
        box-sizing:border-box;
        width: 100%;
        height: 100%;
        padding: 0 0 300px 0;
        overflow: auto;
        -webkit-box-shadow: -4px 0px 17px 0px rgba(0,0,0,0.23);
        -moz-box-shadow: -4px 0px 17px 0px rgba(0,0,0,0.23);
        box-shadow: -4px 0px 17px 0px rgba(0,0,0,0.23);
        -webkit-overflow-scrolling: touch;
    }
    .mobile-right-panel_header{
        position: relative;
        display: block;
        padding: 20px 10px;
        clear: both;
        text-decoration: none;
        ms-word-break: break-all;
        word-wrap: break-word;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;
    }
    .mobile-right-panel_header-text{
        display: inline-block;
        clear: both;
        margin-left: 34px;
        font-size: 18px; 
    }
    .mobile-right-panel_arrow-right{
        position: absolute;
        top: 50%;
        right: 10px;
        margin-top: -12px;
        font-size: 24px;
    }
    .mobile-right-panel_arrow-left{
        position: absolute;
        top: 18px;
        font-size: 22px;
    }
    /* Mobile moving content animation*/
    .move-down{
        top: 0;
        transition: all .5s cubic-bezier(.16,.68,.43,.99);
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
    .move-up{
        top: 0;
        transition: all .5s cubic-bezier(.16,.68,.43,.99);
        -webkit-transform: translate3d(0,-45px,0);
        -moz-transform: translate3d(0,-45px,0);
        -ms-transform: translate3d(0,-45px,0);
        -o-transform: translate3d(0,-45px,0);
        transform: translate3d(0,-45px,0);
    }
    .main-content.move-up{
        padding-top: 115px;
    }
    .has_store_bar_thin .main-content.move-down{
        padding-top: 113px;
    }
    /*Mobile Search*/
    .add-on.mobile-nav_search-back-btn,
    .add-on.mobile-nav_search-submit{
        height: auto;
        border:0;
        background: none;
        margin-top: 12px;
    }
    .mobile-nav_search-btn{
        width: 10%;
    }
    .mobile-nav_search-submit{
        z-index: 99;
        position: absolute;
        right: 10px;
    }
    .mobile-nav_search-form{
        padding: 0 12px;
    }
    input.mobile-nav_search-input{
        width: 80%!important;/* Necesary to overide bootstra*/
        height: 50px;
        margin-top: 3px;
        margin-left: 10px;
        padding: 10px;
        border: 0;
        font-size: 14px;
        font-weight: normal;
    }
    input.mobile-nav_search-input:focus{
        box-shadow: none;
    }
    .mobile-nav_search-btn-icon{
        font-size: 24px;
        right: 15px;
        padding-top: 12px;
        padding-right:10px;
        padding-bottom: 10px; 
    }
    .backdrop{
        top: 0;
        left: 0;
        height: 140%; /* Height to always take full height even then the mobile nav moves up on scroll or the device keyboard is visible*/
        background-color: rgba(0,0,0,0.5); /* Dark overlay when cart or search is active */
        position: fixed;
        z-index: 3000;
    }
    /*Mobile Logo and page title*/
    .mobile-nav_page-title{
        float: left;
        width: 70%;
        margin-left: 5px;
        margin-top: 16px;
        font-size: 16px;
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .logo img{
        max-height: 75px;
        margin: 15px 0;
        max-width: 60%;
    }
    .logo.mobile-logo-home img{
        max-height: 100px;
        max-width: 80%;
    }
    /*Hamburguer Navigation*/
    .mobile-nav_hamburger-btn{
        width: 40px;
    }
    .mobile-nav_hamburger-btn-icon{
        padding: 12px 10px 10px 10px;
    }
    .pushy-active{
        margin: 0; 
        height: 100%; 
        overflow: hidden;
        position: absolute;
    }
    .pushy{
        position: fixed;
        z-index: 99999;
        left: -50px;
        display: block;
         -webkit-overflow-scrolling: touch;
        overflow-y: auto;
    }
    .site-overlay, 
    .pushy-active .site-overlay{
        display: block;
    }
    .pushy-active .site-overlay{
        height: 120%;
        top: -60px;
    }
    .pushy{
        width: 250px; /* Changed the width to 400px */
    }
    .pushy-left{
        transform: translate3d(-250px,0,0);
        -webkit-transform: translate3d(-250px,0,0);
        -moz-transform: translate3d(-250px,0,0);
        -ms-transform: translate3d(-250px,0,0);
        -o-transform: translate3d(-250px,0,0);
    }
    .pushy-open{
        left: 0px;
    }
    .container-push, .push-push{
        transform: translate3d(250px,0,0);
        -webkit-transform: translate3d(250px,0,0);
        -moz-transform: translate3d(250px,0,0);
        -ms-transform: translate3d(250px,0,0);
        -o-transform: translate3d(250px,0,0);
    }
    .mobile-sidenav a{
        border-bottom: 0px;
        padding: 20px;
        color: #F2F2F2;
        font-weight: normal;
    }
    .mobile-sidenav_pages-arrow-selected i{
        transform-origin: center;
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
    }
    /*Mobile tab navigation*/
    .mobile-nav_second-row{
        display: block;
    }
    .mobile-nav_tab,
    .mobile-nav_tab:hover{
        position: relative;
        width: 33.33333333%;
        padding: 10px 0;
        text-align: center;
        text-decoration: none;
    }
    .mobile-nav_tab-half{
        width: 50%;
    }
    .mobile-nav_tab-text{
        display: inline-block;
        text-transform: uppercase;
        font-size: 12px;
    }
    .mobile-nav_tab-icon{
        font-size: 19px;
        margin: 0;
        padding: 0;
    }
    .mobile-nav_tab-icon.mobile-nav_tab-list-icon{
        font-size: 15px;
    }
    i.fa.fa-shopping-cart{
        font-size: 18px;
    }
    .mobile-nav_search-icon{
        font-size: 24px;
    }
    .mobile-nav_tab-cart-amount{
        height: 17px;
        float: right;
        z-index: 1;
        padding: 0 4px;
        margin: 0 5px;
        font-size: 12px;
        font-weight: bold;
        line-height: 16px;
    }
    .alert.mobile-nav_empty-cart-alert{
        width: 90%;
        top: 110px;
        left: 5%;
    }
    /* Mobile Categories Dropdown */
    .mobile-nav_main-categories-container{
        box-sizing: border-box;
        z-index: 3000;
        padding-bottom: 250px;
        top: 90px;
        bottom: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Mobile subcategories panels */
    .mobile-nav_category-list-item{
        clear: both;
        padding: 0;
    }
    .mobile-nav_category-list-item-link{
        position: relative;
        display: block;
        clear: both;
        padding: 20px 15px;
        text-decoration: none;
        -ms-word-break: break-all;
        word-wrap: break-word;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;
    }
    a.mobile-nav_category-list-item-link{
        text-decoration: none;
    }
    .mobile-nav_all-categories-link{
        display: block;
        clear: both;
        padding: 20px 15px;
        text-decoration: none;
        font-size: 12px;
        text-transform: uppercase;
        font-weight: 700;
    }
    /* Mobile subcategories panels */
    .mobile-nav_subcategories-panel{
        top: 93px;
        z-index: 3000;
    }
    .move-list-up .mobile-nav_main-categories-container,
    .move-list-up .mobile-nav_subcategories-panel{
       top: 44px;
    }
    /*Mobile categories and pages buttons*/
    .mobile-nav_main-categories-container .mobile-category-item.no-mobile-subitems:last-child > a{
        border-bottom: 0;
    }
    .mobile-sidenav_pages-arrow{
        top: 15px;
        right: 10px;
        margin-top: -10px;
        font-size: 20px;
    }
    /* Mobile animations */
    .animation-panel-right-open{
        transition: all .5s cubic-bezier(.16,.68,.43,.99);
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
    .animation-panel-right-close{
        transition: all 1.5s cubic-bezier(.16,.68,.43,.99);
        -webkit-transform: translate3d(200%,0,0);
        -moz-transform: translate3d(200%,0,0);
        -ms-transform: translate3d(200%,0,0);
        -o-transform: translate3d(200%,0,0);
        transform: translate3d(200%,0,0);
    }
}

Luego en tu hoja de estilos SASS deberás agregar lo siguiente (las variables dependerán de cada plantilla):

@media (max-width: 767px) {
    /**** MOBILE NAVIGATION ****/
    .mobile-nav{
        background-color:$back ;
    }
    #header, 
    #header-slim{
        border-bottom:0;
    }
    /*Mobile Tab Nav*/
    i.mobile-nav_tab-icon{
        color: $txt;
    }
    .mobile-nav_tab-text{
        font-family: $fontheadprod;
    }
    .mobile-nav_tab-selected .mobile-nav_tab-icon,
    .mobile-nav_tab-selected .mobile-nav_tab-text{
        color: $primary;
    }
    .mobile-nav_tab-cart-amount{
        background-color: $primary;
        color:$back;
    }
    /*Mobile search*/
    input.mobile-nav_search-input{
        background-color:$back;
    }
    /* Mobile Categories Links */
    .mobile-nav_main-categories-container{
        background-color:lighten($back, 3%);
        box-shadow: 2px 0px 1px 1px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    }
    .mobile-sidenav_pages-arrow-selected i{
        background-color: $primary;
    }
    .mobile-nav_category-list-item-link,
    .mobile-nav_all-categories-link{
        color: $txt;
        border-bottom: 1px solid rgba($txt, .3);
    }
    .mobile-nav_all-categories-link{
        background-color:darken($back, 2%);
    }
    .mobile-nav_category-list-item-link:hover{
        color: $txt;
    }
    .mobile-right-panel{
        background-color:lighten($back, 3%); 
    }
    .mobile-right-panel_header,
    .mobile-right-panel_arrow-right,
    .mobile-right-panel_arrow-left{
        color: $primary;
    }
    .mobile-nav_main-categories-container li a:active,
    .mobile-nav_main-categories-container li a:active span, 
    .mobile-nav_category-list-item-link:active, 
    .mobile-nav_category-list-item-link:active .mobile-right-panel_arrow-right, 
    .mobile-nav_main-categories-container a:active .mobile-right-panel_arrow-left,
    .mobile-right-panel_header:active,
    .mobile-right-panel_header:active .mobile-right-panel_arrow-left{
        background-color:$primary;
        color:$back;
    }
    /* Hamrbuguer nav */
    .pushy a:hover{
        background:$primary;
        text-decoration:none;
    }
    i.mobile-sidenav_pages-arrow-icon{
        background:rgba(131, 131, 131, 0.4);
        color:white;
    }
    i.mobile-nav_hamburger-btn-icon{
      font-size: 24px;
      color: $txt;
    }
    .mobile-sidenav_first-row,
    .item-with-subitems > .pages-accordion{
        background:rgba(131, 131, 131, 0.4);
        color:white;
    }
}

9. Neste último passo só deverá adicionar os textos relacionados a nova funcionalidade dentro do arquivo translations.txt. Adicionando o seguinte:

es "Inicio"
pt "Início"
en "Home"

es "Ver toda esta categoría"
pt "Ver tudo desta categoria"
en "See all this category"

es "Todos los productos"
pt "Todos os produtos"
en "All products"

Pronto! finalizada a aplicação da nova navegação mobile com tabs na sua loja!

Os seguinte passos são anexos em caso você tenha em sua loja implementado as melhorias do Carrinho de compras rápidas ou Sugestão de busca

Anexo 1: No caso de ter o Carrinho de compras rápidas

Se a sua loja tem implementado o Carrinho de compras rápidas sugerimos que aplique as seguintes melhorias:

Abra o arquivo cart_ajax.tpl, vamos dividi-lo em duas partes: uma parte para o componente que mostra o ícone, o valor e a quantidade de produtos no carrinho; por outro lado o componente do painel que é mostrado ao adicionar um produto no carrinho:

Dentro do arquivo ajax_cart.tpl corte o seguinte código:

<div id="ajax-cart" class="cart-summary">
    <a href="#" class="js-toggleCart">
      <span class="items">
        <span id="cart-amount">{{ "{1}" | translate(cart.items_count ) }}</span> 
        <small>x</small> 
        <span id="cart-total">{{ cart.total | money }}</span>
      </span>
      <span class="item-img"><i class="fa fa-shopping-cart"></i></span>
    </a>
</div>

e cole em um novo arquivo chamado cart-widget-ajax.tpl, que pode ser localizado dentro da pasta snipplets.

Agora renomeie o arquivo ajax_cart.tpl para cart-panel-ajax.tpl. Este arquivo terá, a partir de agora, somente o código relacionado ao painel que contém o detalhe do carrinho: 

<div id="ajax-cart-details" style="display: none;">
  <div id="store-curr" class="hidden">{{ store.currency }}</div>
  <div class="subtotal-price hidden" data-priceraw="{{ cart.total }}"></div>
  <button type="button" class="button close-cart js-toggleCart">
    <i class="fa fa-angle-left" aria-hidden="true"></i> 
    <span class="hidden-phone">{{ "Seguir comprando" | translate }}</span> 
    <span class="visible-phone">{{ "Volver" | translate }}</span></button>
  <h2>{{ "Resumen del carrito de compras" | translate }}</h2>
  <table id="cart-table" class="table table-striped">
    <thead>
      <tr>
        <th>{{ "Producto" | translate }}</th>
        <th>{{ "Cantidad" | translate }}</th>
        <th>{{ "Precio" | translate }}</th>
        <th>{{ "Subtotal" | translate }}</th>
      </tr>
    </thead>
    <tbody id="cart-table-body">
      {% if cart.items %}
        {% for item in cart.items %}
        <tr>
          <td>{{ item.name }}</td>
          <td>{{ item.quantity }}</td>
          <td>{{ item.unit_price | money }}</td>
          <td>{{ item.subtotal | money }}</td>
        </tr>
        {% endfor %}
      {% endif %}
    </tbody>
    <tfoot>
      <tr>
        <th></th>
        <th></th>
        <th>{{ "Total" | translate }}</th>
        <th id="cart-table-total">{{ cart.total | money }}</th>
      </tr>
    </tfoot>
  </table>
  <div id="ajax-cart-shipping">
    {% snipplet "shipping_cost_calculator.tpl" with shipping_calculator_show = settings.shipping_calculator_cart_page %}
  </div>
  <div id="ajax-cart-totalwshipping" class="total-price"></div>
  <div class="row-fluid clearfix ajax-cart-bottom">
    <div class="span6 edit-cart">
      <a href="{{ store.cart_url }}" class="btn btn-link sst ssb">{{ 'Editar carrito' | translate }}</a>
    </div>
    {% set cart_total = (settings.cart_minimum_value * 100) %}
    <div class="span6" {{ cart.total < cart_total ? 'style="display:none"' }} id="ajax-cart-submit-div">
      <form action="{{ store.cart_url }}" method="post">
        <input class="button pull-right" type="submit" name="go_to_checkout" value="{{ 'Iniciar Compra' | translate }}"/>
        </form>
    </div>
    <div class="span12" {{ cart.total >= cart_total ? 'style="display:none"' }} id="ajax-cart-minumum-div">
        <div class="alert alert-warning" role="alert">
          <h4 class="text-center">{{ "El monto mínimo de compra (subtotal) es de" | translate }} {{ cart_total | money }}</h4>
        </div>
    </div>
    <input type="hidden" id="ajax-cart-minimum-value" value="{{ cart_total }}"/>
  </div>
</div>
<div id="ajax-cart-backdrop" class="js-toggleCart full-width" style="display: none;"></div>

Dentro do arquivo layout.tpl adicione o seguinte código logo após fechar a div com a classe "main-content".

<div class="main-content">
...
</div>
{# AJAX Cart Panel #}
{% if not store.is_catalog and template != 'cart' and settings.ajax_cart %}
    {% snipplet "cart-panel-ajax.tpl" %}
{% endif %}

Ainda no layout.tpl renomeie a chamada do arquivo ajax_cart.tpl para cart-widget-ajax.tpl.

Deixaria de ter algo assim:

{% if not store.is_catalog and template != 'cart' %}
    {% if settings.ajax_cart %}
        {% snipplet "cart_ajax.tpl" as "cart" %}
    {% else %}
        {% snipplet "cart.tpl" as "cart" %}
    {% endif %}
{% endif %}

Para ter algo assim:

{% if not store.is_catalog and template != 'cart' %}
  <div class="hidden-phone">
      {% if settings.ajax_cart %}
          {% snipplet "cart-widget-ajax.tpl" as "cart" %}
      {% else %}
          {% snipplet "cart-widget.tpl" as "cart" %}
      {% endif %}
  </div>
{% endif %}

Anexo 2: Em caso de ter a Sugestão de busca

Se já tem a Sugestão de busca em sua loja, recomendamos que adicione o seguinte CSS

Na sua folha de estilos comuns, por exemplo style.css adicione o seguinte:

@media (max-width: 767px) {
    /* Search suggestions */
    .search-suggest{
        position: fixed;
        top: 64px;
        z-index: 3000;
        display: none;
        height: 100%;
        width: 100%;
        box-sizing:border-box;
        margin: 0;
        padding-bottom: 1000px;
        overflow-y: scroll;
    }
    .search-suggest_link{
        padding: 20px 15px;
        font-size: 14px;
    }
}

Por último, em sua folha de estilos SASS adicione o seguinte:

@media (max-width: 767px) {
    /* Search Suggestons */
    .search-backdrop{
        background: rgba($back, .9);
    }
}

No arquivo config/translations.txt, verifique se já existe o bloco abaixo, caso não exista, adicione:

es "Carrito"
pt "Carrinho"
en "Cart”