Adicionar ao carrinho um link para voltar à loja

Aviso

Os temas vintage não estão disponíveis na Loja de temas. Esses temas não têm os recursos incluídos nos temas da Online Store 2.0 da Shopify, e os temas vintage gratuitos só recebem atualizações para correções de segurança.

Observação

Se você usa um tema gratuito da Shopify, entre em contato com o Atendimento ao cliente da Shopify para solicitar ajuda com o tutorial, que requer 15 minutos para o design. Para saber mais, consulte o Atendimento para temas.

Observação

Esta personalização se aplica a temas vintage da Shopify, e não aos temas da Online Store 2.0.

• Descubra a versão da arquitetura do tema da loja
• Conheça as personalizações para temas da Online Store 2.0.

É 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.

Incluir um link "Voltar à loja" na página do carrinho

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

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

iPhone

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

Android

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

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 por 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:

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

### For a link that goes to your home page

To add a link that goes to your home page, paste the following code on a new line either before or after the code for the **Checkout** button:

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

### For a link that goes to the last collection viewed

To add a link that goes to the last collection viewed, paste the following code on a new line either before or after the code for the **Checkout** button:

<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 da parte inferior 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 principais, e a maioria usa o mesmo nome de classe para estilos de botão secundários.

Para aplicar o estilo do botão principal ao link "Voltar à loja":

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>

Para aplicar o estilo de botão secundário ao link "Voltar à loja":

Aviso

A inclusão dessa classe não tem efeito no Boundless.

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>