Mostrar a Shop Promise na página do produto

Esta página foi impressa em Sep 20, 2024. Para a versão mais recente, acesse https://help.shopify.com/pt-BR/manual/fulfillment/setup/shop-promise/product-page.

Pedidos qualificados enviados nos Estados Unidos em cinco dias corridos ou menos aparecem com o selo Shop Promise nas páginas dos produtos e ao lado da data prevista para o recebimento. Assim, você mostra aos clientes que oferece entrega rápida e confiável.

Depois que a solicitação para a Shop Promise for aprovada, acesse a página do produto pelo editor de temas para confirmar se o selo aparece corretamente.

Caso contrário, será necessário posicionar de modo manual o módulo Shop Promise.

Nesta página

Posicionar manualmente o módulo Shop Promise

Se você souber como ler e editar o código do tema, identifique onde fazer as alterações e atualize a página do produto.

Identificar onde fazer as alterações

O código para o módulo Shop Promise precisa ser incluído no formulário em questão na página do produto, semelhante a {%- form 'product', product -%}. Esse recurso pode ser encontrado em diversos locais de acordo com o tema; estes são os mais comuns:

  • main-product.liquid
  • product-form.liquid
  • product-template.liquid
  • product.liquid

Atualizar a página do produto

Etapas:

  1. No admin da Shopify, acesse Loja virtual > Temas.
  2. Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
  3. Abra o arquivo relevante.
  4. Encontre a linha que contém {%- if block.settings.show_dynamic_checkout -%} ou {{ form | payment_button }}.
  5. Crie uma nova linha logo abaixo de {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} e cole o seguinte código nela: 
<div class="delivery-promise__promise-container"></div>
  1. Clique em Salvar.

O resultado deve ser semelhante ao seguinte:

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>
  1. No app da Shopify, toque no botão ….
  2. Na seção canais de vendas, toque em loja virtual.
  3. Toque em Gerenciar temas.
  4. Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
  5. Abra o arquivo relevante.
  6. Encontre a linha que contém {%- if block.settings.show_dynamic_checkout -%} ou {{ form | payment_button }}.
  7. Crie uma nova linha logo abaixo de {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} e cole o seguinte código nela: 
<div class="delivery-promise__promise-container"></div>
  1. Toque em Salvar.

O resultado deve ser semelhante ao seguinte:

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>
  1. No app da Shopify, toque no botão ….
  2. Na seção canais de vendas, toque em loja virtual.
  3. Toque em Gerenciar temas.
  4. Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
  5. Abra o arquivo relevante.
  6. Encontre a linha que contém {%- if block.settings.show_dynamic_checkout -%} ou {{ form | payment_button }}.
  7. Crie uma nova linha logo abaixo de {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} e cole o seguinte código nela: 
<div class="delivery-promise__promise-container"></div>
  1. Toque em Salvar.

O resultado deve ser semelhante ao seguinte:

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>

Substituir manualmente o tema do módulo Shop Promise

O módulo Shop Promise tem um tema escuro e claro. O módulo usa automaticamente o tema que tenha a taxa de contraste mais alta em comparação com a cor de fundo da página do produto.

Se você estiver à vontade para ler e editar o código do tema, poderá substituir o tema selecionado do módulo adicionando um atributo de dados ao elemento âncora usado para posicionar manualmente o módulo Shop Promise.

Antes de fazer alterações, duplique seu tema e edite o tema duplicado para que você possa reverter facilmente as alterações.

Etapas:

  1. Siga as instruções para posicionar manualmente o módulo Shop Promise na página do produto e mantenha o editor de temas aberto.
  2. Adicione um atributo de dados do tema ao seu elemento âncora recém-criado definido como escuro ou claro.
  3. Clique em Salvar.

O resultado deve ser semelhante a um dos seguintes:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

Ou

<div class="delivery-promise__promise-container" data-theme="light"></div>
  1. Siga as instruções para posicionar manualmente o módulo Shop Promise na página do produto e mantenha o editor de temas aberto.
  2. Adicione um atributo de dados do tema ao seu elemento âncora recém-criado definido como escuro ou claro.
  3. Toque em Salvar.

O resultado deve ser semelhante a um dos seguintes:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

Ou

<div class="delivery-promise__promise-container" data-theme="light"></div>
  1. Siga as instruções para posicionar manualmente o módulo Shop Promise na página do produto e mantenha o editor de temas aberto.
  2. Adicione um atributo de dados do tema ao seu elemento âncora recém-criado definido como escuro ou claro.
  3. Toque em Salvar.

O resultado deve ser semelhante a um dos seguintes:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

Ou

<div class="delivery-promise__promise-container" data-theme="light"></div>

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

Experimente de graça