Mostrar a Shop Promise na página do produto

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.

Se por acaso o selo não estiver sendo exibido corretamente, será necessário posicionar de modo manual o módulo Shop Promise.

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

Dica

Se você usa um tema da Shopify, mas não sabe ler nem editar o código, entre em contato com nosso Atendimento ao cliente para fazer a atualização. Saiba mais sobre a Política de design da Shopify. Se você usa um tema de terceiros, entre em contato com o desenvolvedor do tema ou contrate um Parceiro da Shopify.

Atualizar a página do produto

Dica

Antes de fazer as alterações, duplique o tema e modifique a cópia. Assim, será fácil reverter as alterações se necessário.

Etapas:

Desktop

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

2. Localize o tema para edição, clique no ícone do para abrir o menu de ações e, em seguida, 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>

iPhone

1. No app da Shopify, toque no . .
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>

Android

1. No app da Shopify, toque no . .
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 ✓.

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.

Dica

Se você usa um tema da Shopify, mas não sabe ler nem editar o código, entre em contato com nosso Atendimento ao cliente para fazer a atualização. Saiba mais sobre a Política de design da Shopify. Se você usa um tema de terceiros, entre em contato com o desenvolvedor do tema ou contrate um Parceiro da Shopify.

Etapas:

Desktop

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>

iPhone

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>

Android

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>

Adicionar HTML personalizado ou Liquid para o módulo Promise

Se o seu tema aceitar blocos personalizados, é possível usar um bloco Liquid personalizado para adicionar o módulo Shop Promise à sua página de produto, sem precisar editar o código do tema.

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

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.
2. Encontre o tema que você quer editar e clique em Personalizar.
3. Navegue até uma página de produto usando o seletor de modelos na barra de menu superior.
4. No menu da barra lateral, localize 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, normalmente abaixo do bloco de botões Comprar.
2. Clique em Salvar para aplicar suas alterações.

Se você quiser especificar uma preferência de tema (escuro ou claro), faça uma das seguintes ações:

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

Ou

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

iPhone

1. No app da Shopify, toque no . e, em seguida, toque na Loja virtual.
2. Toque em Gerenciar temas.
3. Encontre seu tema ativo e toque em Personalize.
4. Navegue até uma página de produto usando o seletor de modelos na parte superior.
5. Toque na seção Informações do produto.
6. Toque em Adicionar bloco e selecione Liquid personalizado.
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, normalmente abaixo do bloco de botões Comprar.
2. Toque em Salvar para aplicar suas alterações.

Se você quiser especificar uma preferência de tema (escuro ou claro), faça uma das seguintes ações:

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

Ou

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

Android

1. No app da Shopify, toque no . e, em seguida, toque na Loja virtual.
2. Toque em Gerenciar temas.
3. Encontre seu tema ativo e toque em Personalize.
4. Navegue até uma página de produto usando o seletor de modelos na parte superior.
5. Toque na seção Informações do produto.
6. Toque em Adicionar bloco e selecione Liquid personalizado.
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, normalmente abaixo do bloco de botões Comprar.
2. Toque em Salvar para aplicar suas alterações.

Se você quiser especificar uma preferência de tema (escuro ou claro), faça uma das seguintes ações:

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

Ou

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

Dica

Nem todos os temas aceitam blocos Liquid personalizados. Se o seu tema não tiver essa opção, siga as instruções para posicionar manualmente os módulos de Shop Promise editando o código do seu tema.