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.

Caso contrário, 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. 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>

iPhone

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>

Android

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.

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>