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

Nesta página
Incluir um link "Voltar à loja" na página do carrinho
Desktop
- No admin da Shopify, acesse Loja virtual > Temas.
- Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
- No diretório Seções, clique em
cart-template.liquid
. Se o tema não incluir esse arquivo, clique emcart.liquid
no diretório Modelos. -
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>
5. O próximo passo é colar uma nova linha de código para criar um link Continuar comprando. Vale lembrar que isso depende da página que você quer vincular ao link: * para direcionar à página de catálogo, cole o código a seguir na nova linha antes ou depois do código do 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 para o 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 para o botão Checkout:
<a
id="continue-shopping"
href=""
title="Continue shopping">
Continue shopping
</a>
6. 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 incluir um JavaScript no código do tema. Siga as próximas etapas.
7. No diretório Layout, clique em theme.liquid
.
8. 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>
9. Clique em Salvar.
iPhone
- No app da Shopify, toque no botão ….
- Na seção canais de vendas, toque em loja virtual.
- Toque em gerenciar temas.
- Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
- No diretório Seções, clique em
cart-template.liquid
. Se o tema não incluir esse arquivo, clique emcart.liquid
no diretório Modelos. -
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>
- 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 para o 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 para o botão Checkout:
<a
id="continue-shopping"
href=""
title="Continue shopping">
Continue shopping
</a>
- 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.
- No diretório Layout, clique em
theme.liquid
. -
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>
- Clique em Salvar.
Android
- No app da Shopify, toque no botão ….
- Na seção canais de vendas, toque em loja virtual.
- Toque em gerenciar temas.
- Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
- No diretório Seções, clique em
cart-template.liquid
. Se o tema não incluir esse arquivo, clique emcart.liquid
no diretório Modelos. -
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>
- 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 para o 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 para o botão Checkout:
<a
id="continue-shopping"
href=""
title="Continue shopping">
Continue shopping
</a>
- 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.
- No diretório Layout, clique em
theme.liquid
. -
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>
- 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":
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 o 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>