Adicionar ao carrinho um link para voltar à loja

É possível incluir um link Voltar à loja na página do carrinho que permita aos clientes retornar facilmente para procurar produtos depois de adicionar algo ao carrinho. As opções disponíveis permitem adicionar um link que leve os clientes de volta à página do catálogo, à página inicial ou à última página de coleção que estavam olhando.

Voltar à loja

Para adicionar um link Voltar à loja à página do carrinho:

  1. No diretório Seções, clique em cart-template.liquid. Se o tema não incluir esse arquivo, clique em cart.liquid no diretório Modelos.

  2. Encontre o código do botão Checkout com uma pesquisa no arquivo name="checkout". A linha de código desse botão varia em cada tema, mas se parece com esta:

<button type="submit" id="checkout" name="checkout" class="btn">
  {{ 'cart.general.checkout' | t }}
</button>
  1. A próxima etapa é colar uma nova linha de código para criar um link Voltar à loja. O código dependerá da página em que você quer colar o link:

Para adicionar um link que direcione à página do catálogo, cole este código em uma nova linha antes ou depois do código para o botão Checkout:

<a href="/collections/all" title="Continue shopping">Continue shopping</a>

Para adicionar um link que direcione à página inicial, cole este código em uma nova linha antes ou depois do código responsável pelo botão Checkout:

<a href="/" title="Continue shopping">Continue shopping</a>

Para adicionar um link que direciona à última coleção visualizada, cole este código em uma nova linha antes ou depois do código do botão Checkout:

<a
  id="continue-shopping"
  href=""
  title="Continue shopping">
  Continue shopping
</a>
  1. Clique em Salvar. Se você adicionou um link para a página do catálogo ou a página inicial, está tudo pronto. Se você adicionou um link para a última coleção visualizada, será necessário adicionar um JavaScript ao código do tema. Siga as próximas etapas.

  2. No diretório Layout, clique em theme.liquid.

  3. Encontre a tag de fechamento </body>, perto do final do arquivo. Cole o seguinte código acima da tag de fechamento </body>:

<script>
  if(Storage !== undefined) {

    var defaultLink = "/collections/all";

    {% if template contains 'collection' %}
      sessionStorage.collection = "{{ collection.url }}";
    {% endif %}

    {% if template contains 'cart' %}
      if( !sessionStorage.collection ) {
        sessionStorage.collection = defaultLink;
      }
      document.getElementById("continue-shopping").href = sessionStorage.collection;
    {% endif %}

    }
</script>
  1. Clique em salvar.

Adicionar estilo de botão (opcional)

Se você usa um tema gratuito da Shopify, aplique estilos ao link Voltar à loja para deixá-lo com a aparência de um botão. É possível adicionar um atributo de classe ao código do link para que o botão tenha o mesmo estilo dos demais botões de seu tema. Todos os temas gratuitos da Shopify usam o mesmo nome de classe para estilos de botão primários, e a maioria usa o mesmo nome de classe para estilos de botão secundários.

Adicione o atributo class="btn" à linha de código que você colou para incluir o link Voltar à loja. O código ficará assim:

<a href="/collections/all" title="Continue shopping" class="btn">
  Continue shopping
</a>

Se você usa um tema gratuito que não seja o Supply, adicione o atributo class="btn--secondary" à linha de código que você colou para incluir o2 link Voltar à loja. O código ficará assim:

<a href="/collections/all" title="Continue shopping" class="btn--secondary">
  Continue shopping
</a>

Se você usa o Supply, adicione o atributo class="btn-secondary" à linha de código que foi inserida com o objetivo de adicionar um link de Voltar à loja. O código deve ficar assim:

<a href="/collections/all" title="Continue shopping" class="btn-secondary">
  Continue shopping
</a>

Tudo pronto para começar a vender com a Shopify?

Experimente de graça