Ajuda
Fazer login

Exibição do Shop Promise na página do produto

O selo Shop Promise é exibido ao lado das datas de entrega e nas páginas de produto para entregas qualificadas, com estimativa de entrega em até cinco dias corridos no território dos Estados Unidos. Esse selo informa aos clientes que o pedido inclui entrega rápida e confiável.

Depois de ativar o Shop Promise, acesse a página do produto usando o editor de temas para confirmar se o selo Shop Promise é exibido corretamente.

Se o selo não for exibido corretamente, verifique se os botões de checkout acelerado estão ativados na loja. Você também tem várias opções para personalizar a exibição do selo Shop Promise.

Nesta página

Posicionar manualmente o módulo do Shop Promise

Se você tiver familiaridade com a leitura e a edição de códigos de tema, poderá identificar onde fazer alterações e atualizar a página do produto.

Identificar onde fazer as alterações

O código do módulo do Shop Promise precisa ser incluído no formulário de produto na página do produto, que deve ser semelhante a {%- form 'product', product -%}. O módulo do Shop Promise pode ser encontrado em vários locais, dependendo do tema. Estes são alguns locais comuns:

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

Atualizar a página do produto

Etapas:

Desktop

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

  2. Encontre o tema que você quer editar, clique no ícone Horizontal menu para abrir o menu de ações e, depois, clique 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 texto nela:

<div class="delivery-promise__promise-container"></div>
  1. Clique em Salvar.

O resultado deve ser semelhante a este:

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

  1. No Shopify app, toque no ícone Menu.

  2. Na seção Canais de vendas, toque em Loja virtual > Gerenciar todos os temas.

  3. Encontre o tema que você quer editar, toque no botão … para abrir o menu de ações e, depois, toque em Editar código.

  4. Abra o arquivo relevante.

  5. Encontre a linha que contém {%- if block.settings.show_dynamic_checkout -%} ou {{ form | payment_button }}.

  6. Crie uma nova linha logo abaixo de {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} e cole o seguinte texto nela:

<div class="delivery-promise__promise-container"></div>
  1. Toque em Salvar ou ✓.

O resultado deve ser semelhante a este:

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

Substituir manualmente o tema do módulo do Shop Promise

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

Se você tiver familiaridade com a leitura e a edição do 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 do Shop Promise.

Antes de fazer qualquer alteração, duplique o tema e edite a cópia para poder reverter as alterações com facilidade.

Etapas:

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

O resultado deve ser semelhante a um destes:

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

Ou

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

O resultado deve ser semelhante a um destes:

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

Ou

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

Adicionar HTML ou Liquid personalizado para o módulo Promise

Se o tema for compatível com blocos personalizados, você poderá usar um bloco de Liquid personalizado para adicionar o módulo do Shop Promise à página do produto sem editar o código do tema.

Etapas para adicionar o módulo Promise com um bloco de Liquid personalizado:

Desktop

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

  2. Encontre o tema que você quer editar e clique em Editar tema.

  3. Acesse uma página de produto usando o seletor de modelo na barra de menus superior.

  4. No menu da barra lateral, encontre a seção Informações do produto.

  5. Clique em Adicionar bloco e selecione Liquid personalizado na lista de blocos disponíveis.

  6. No campo de texto do Liquid personalizado, cole o seguinte código:

<div class="delivery-promise__promise-container"></div>
  1. Posicione o bloco arrastando-o para o local desejado, geralmente abaixo do bloco de botões de compra.
  2. Clique em Salvar para aplicar as alterações.

Se quiser especificar uma preferência de tema (dark ou light), use uma das seguintes opções:

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

Ou

<div class="delivery-promise__promise-container" data-theme="light"></div>
Dispositivo móvel

  1. No Shopify app, toque no ícone Menu.

  2. Na seção Canais de vendas, toque em Loja virtual > Gerenciar todos os temas.

  3. Encontre o tema ativo e toque em Editar tema.

  4. Acesse uma página de produto usando o seletor de modelo na parte superior.

  5. Toque na seção Informações do produto.

  6. Toque em Adicionar bloco e selecione Custom Liquid.

  7. No campo de texto do Liquid personalizado, cole o seguinte código:

<div class="delivery-promise__promise-container"></div>
  1. Posicione o bloco arrastando-o para o local desejado, geralmente abaixo do bloco de botões de compra.
  2. Toque em Salvar para aplicar as alterações.

Se quiser especificar uma preferência de tema (dark ou light), use uma das seguintes opções:

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

Ou

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

Idiomas compatíveis com o selo Shop Promise

Consulte a tabela a seguir para ver os idiomas em que o selo Shop Promise pode ser exibido. Se o idioma da sua loja não for compatível, o selo Shop Promise será exibido em inglês.

Idiomas em que o selo Shop Promise pode ser exibido.
Chinês (simplificado)Chinês (tradicional)CroataTcheco
DinamarquêsHolandêsInglêsFinlandês
FrancêsAlemãoGregoHíndi
HúngaroIndonésioItalianoJaponês
CoreanoLituanoMalaioNorueguês (Bokmål)
PolonêsPortuguês (Brasil)Português (Portugal)Romeno
RussoEslovacoEslovenoEspanhol
SuecoTailandêsTurcoVietnamita