Substituir "Adicionar ao carrinho" por um link de contato
É possível substituir o botão Adicionar ao carrinho por um link de e-mail ou um formulário de contato. Por exemplo, talvez você queira substituir o botão Adicionar ao carrinho por produtos que não estão à venda no momento ou por produtos feitos por encomenda.
Temas com ou sem seções
Nesta página
Etapas para temas com seções
Selecionar seu tema
As etapas desta personalização variam se você está usando o tema Narrative ou outro tema gratuito criado pela Shopify. Clique no botão de seu tema antes de seguir as instruções abaixo:
Etapas para temas sem seções
Criar um novo modelo de produto
Para substituir o botão Adicionar ao carrinho de um produto, é preciso criar um modelo de produto personalizado para ele.
Etapas:
- 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 Modelos, clique em Adicionar novo modelo.
- Crie o modelo do produto:
- No menu suspenso, selecione produto.
- Dê ao modelo o nome de
requires-contact
. - Clique em Criar modelo.
Ocultar o botão "Adicionar ao carrinho"
- No novo arquivo
product.requires-contact.liquid
, encontre o código HTML do botão Adicionar ao carrinho. Pesquise a palavracart
.
O código para o botão Adicionar ao carrinho pode variar de um tema para outro. Para localizá-lo, busque primeiro a tag <input>
ou <button>
com um texto como Add to cart
, AddToCart
ou add-to-cart
.
No Debut, o código do botão Adicionar ao carrinho é assim:
- Quando você encontrar o código, coloque-o entre as tags
{% comment %}
e{% endcomment %}
do Liquid. Assim, o código não aparecerá mais na loja, mas você ainda poderá acessá-lo se quiser alterar o novo modelo mais tarde.
No Debut, o código modificado fica assim:
- Clique em Salvar.
Adicionar um link de e-mail ou um formulário de contato
Agora que o botão Adicionar ao carrinho está oculto, adicione o conteúdo que você quer exibir.
Link de e-mail
- Em uma nova linha abaixo da tag do Liquid
{% endcomment %}
que você incluiu na última etapa, adicione o código HTML para um link de e-mail:
- Clique em Salvar.
Formulário de contato
É possível copiar o código no modelo da página de contato de seu tema para adicionar um formulário de contato ao novo modelo de produto. Para adicionar um formulário de contato:
- No diretório Modelos, clique em
page.contact.liquid
. -
Encontre a tag do Liquid
{% form 'contact' %}
no arquivo. -
Copie todo o código entre a tag do Liquid
{% form 'contact' %}
e a tag do Liquid{% endform %}
. Inclua as tags de formulário Liquid no código copiado. - Volte ao novo arquivo
product.requires-contact.liquid
no diretório Modelos. -
Encontre a tag de fechamento
</form>
no arquivo. Em uma nova linha abaixo da tag de fechamento</form>
, cole o código do formulário de contato. - A próxima etapa é encapsular o código que você acabou de colar em tags div HTML. O atributo de classe incluído no código da tag div assegura que o formulário de contato seja renderizado corretamente na página.
Em uma nova linha acima de {% form 'contact' %}
, cole o seguinte código:
Em uma nova linha abaixo de {% endform %}
, cole o seguinte:
- Clique em Salvar.
Atribuir o novo modelo a um produto
Agora que o modelo está concluído, é possível atribuí-lo a todos os produtos para os quais você quer ocultar o botão Adicionar ao carrinho.
- No admin da Shopify, acesse Produtos.
- Clique no nome de um produto em que você quer ocultar o botão Adicionar ao carrinho.
- Na página do produto do admin da Shopify, em Loja virtual, escolha o novo modelo requires-contact no menu suspenso Modelo de tema.
- Clique em Salvar.
Repita essas etapas para cada produto ao qual você quer adicionar o novo modelo.