Substituir "Adicionar ao carrinho" por um link de contato

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

Observação

As etapas do tutorial são diferentes para temas com seções e sem seções. Um tema com seções permite arrastar e soltar elementos para organizar o layout da página inicial, mas um tema sem seções, não.

Para descobrir se seu tema é compatível com seções, acesse a página Editar código do tema. Se houver arquivos no diretório Seções, você usa um tema com seções. Os temas sem seções foram lançados antes de outubro de 2016 e não têm arquivos no diretório Seções.

Se você estiver usando um tema secionado, clique no botão Temas secionados e siga as instruções. Se você estiver usando um tema antigo não secionado, clique no botão Temas não secionados e siga as instruções.

---

Sectioned themes

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:

Narrative

Criar um novo modelo de produto no Narrative

Para substituir o botão Adicionar ao carrinho de um produto, é preciso criar um modelo de produto personalizado para ele.

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 Modelos, clique em Adicionar novo modelo.

2. Crie o modelo do produto:

   • No menu suspenso, selecione produto.
   • Dê ao modelo o nome de requires-contact.
   • Clique em Criar modelo.

3. Encontre o seguinte código:

{% section 'product-template' %}

Substitua por:

{% section 'product-template-requires-contact' %}

Esse código vincula seu novo modelo a uma nova seção de produtos que você criará nas próximas etapas.

1. Clique em Salvar.

Criar uma nova seção de produtos

1. No diretório Seções, clique em Adicionar uma nova seção.

2. Crie a seção:

   1. Dê à nova seção o nome de product-template-requires-contact.
   2. Clique em Criar seção.

3. Exclua todo o código-padrão no arquivo da seção para deixá-lo vazio.

4. No diretório Seções, clique em product-template.liquid. Copie todo o conteúdo do arquivo para a área de transferência.

5. Volte para a nova seção product-template-requires-contact.liquid e cole o código no arquivo.

6. Clique em Salvar.

Ocultar o botão "Adicionar ao carrinho"

1. No arquivo da seção product-template-requires-contact.liquid, encontre o código HTML para o Formulário de produto da página do produto. Para encontrá-lo, pesquise a palavra form no arquivo.

2. Quando você encontrar o código, encapsule-o nas tags do Liquid {% comment %} e {% endcomment %}. Esse procedimento interrompe a exibição do código na loja, mas permite que você o recoloque facilmente se quiser alterar o novo modelo mais tarde.

No Narrative, o código modificado fica assim:

{% comment %}
{% include 'product-form' %}
{% endcomment %}

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

É possível adicionar um link de e-mail que vai abrir o programa-padrão de e-mail do cliente e inserir o endereço de e-mail para contato com clientes de sua loja como destinatário. Para adicionar um link de e-mail:

1. 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:

<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

1. 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:

1. No diretório Modelos, clique em page.contact.liquid.
2. Encontre a tag do Liquid {% form 'contact' %} no arquivo.
3. 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.
4. Volte ao novo arquivo product.requires-contact.liquid no diretório Modelos.

Em uma nova linha abaixo da tag do Liquid {% endcomment %} que você adicionou, cole o código do formulário de contato.

1. 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:

<div class="form-vertical">

Em uma nova linha abaixo de {% endform %}, cole o seguinte:

</div>

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

1. No admin da Shopify, acesse Produtos.

2. Clique no nome de um produto em que você quer ocultar o botão Adicionar ao carrinho.

3. Na página do produto do admin da Shopify, em Loja virtual, escolha o novo modelo requires-contact no menu suspenso Modelo de tema.

4. Clique em Salvar.

Repita essas etapas para cada produto ao qual você quer adicionar o novo modelo.

Other

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.

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 Modelos, clique em Adicionar novo modelo.

2. Crie o modelo do produto:

   • No menu suspenso, selecione produto.
   • Dê ao modelo o nome de requires-contact.
   • Clique em Criar modelo.

3. Encontre o seguinte código:

{% section 'product-template' %}

Substitua por:

{% section 'product-template-requires-contact' %}

Esse código vincula seu novo modelo a uma nova seção de produtos que você criará nas próximas etapas.

1. Clique em Salvar.

Criar uma nova seção de produtos

1. No diretório Seções, clique em Adicionar uma nova seção.

2. Crie a seção:

   1. Dê à nova seção o nome de product-template-requires-contact.
   2. Clique em Criar seção.

3. Exclua todo o código-padrão no arquivo da seção para deixá-lo vazio.

4. No diretório Seções, clique em product-template.liquid. Copie todo o conteúdo do arquivo para a área de transferência.

5. Volte para a nova seção product-template-requires-contact.liquid e cole o código no arquivo.

6. Clique em Salvar.

Ocultar o botão "Adicionar ao carrinho"

1. No arquivo da nova seção product-template-requires-contact.liquid, encontre o código HTML para o botão Adicionar ao carrinho da página do produto. Para encontrá-lo, pesquise a palavra cart no arquivo.

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:

<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form_cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-formcart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>

1. Quando você encontrar o código, encapsule-o nas tags do Liquid {% comment %} e {% endcomment %}. Esse procedimento interrompe a exibição do código na loja, mas permite que você o recoloque facilmente se quiser alterar o novo modelo mais tarde.

No Debut, o código modificado fica assim:

{% comment %}
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-formcart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form_cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>
{% endcomment %}

Aviso

Não coloque as tags de comentário fora das tags <form> para a página do produto. Elas não devem vir antes ou depois das tags <form> ou </form>, caso contrário poderão ocorrer erros quando os clientes virem a página do produto.

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

É possível adicionar um link de e-mail que vai abrir o programa-padrão de e-mail do cliente e inserir o endereço de e-mail para contato com clientes de sua loja como destinatário. Para adicionar um link de e-mail:

1. 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:

<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

1. 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:

1. No diretório Modelos, clique em page.contact.liquid.
2. Encontre a tag do Liquid {% form 'contact' %} no arquivo.
3. 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.
4. Volte ao novo arquivo product-template-requires-contact.liquid no diretório Seções.
5. 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.
6. 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:

<div class="form-vertical"></div>

Em uma nova linha abaixo de {% endform %}, cole o seguinte:

</div>

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

1. No admin da Shopify, acesse Produtos.

2. Clique no nome de um produto em que você quer ocultar o botão Adicionar ao carrinho.

3. Na página do produto do admin da Shopify, em Loja virtual, escolha o novo modelo requires-contact no menu suspenso Modelo de tema.

4. Clique em Salvar.

Repita essas etapas para cada produto ao qual você quer adicionar o novo modelo.

Non-sectioned themes

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.

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 Modelos, clique em Adicionar novo modelo.
2. 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"

1. No novo arquivo product.requires-contact.liquid, encontre o código HTML do botão Adicionar ao carrinho. Pesquise a palavra cart.

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:

<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>

1. Quando você encontrar o código, encapsule-o nas tags do Liquid {% comment %} e {% endcomment %}. Esse procedimento interrompe a exibição do código na loja, mas permite que você o recoloque facilmente se quiser alterar o novo modelo mais tarde.

No Debut, o código modificado fica assim:

{% comment %}
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>
{% endcomment %}

Aviso

Não coloque as tags de comentário fora das tags <form> para a página do produto. Elas não devem vir antes ou depois das tags <form> ou </form>, caso contrário poderão ocorrer erros quando os clientes virem a página do produto.

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

1. 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:

Please <a href="mailto:{{ shop.email }}">contact us</a> if you are
interested in this product.

1. 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:

1. No diretório Modelos, clique em page.contact.liquid.
2. Encontre a tag do Liquid {% form 'contact' %} no arquivo.
3. 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.
4. Volte ao novo arquivo product.requires-contact.liquid no diretório Modelos.
5. 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.
6. 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:

<div class="form-vertical"></div>

Em uma nova linha abaixo de {% endform %}, cole o seguinte:

</div>

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

1. No admin da Shopify, acesse Produtos.
2. Clique no nome de um produto em que você quer ocultar o botão Adicionar ao carrinho.
3. Na página do produto do admin da Shopify, em Loja virtual, escolha o novo modelo requires-contact no menu suspenso Modelo de tema.
4. Clique em Salvar.

Repita essas etapas para cada produto ao qual você quer adicionar o novo modelo.