Exibir conteúdo na página de status do pedido de acordo com critérios

Aviso

Este é um tutorial avançado e não foi desenvolvido pela Shopify. Seu uso requer conhecimento de linguagens de web design, como HTML, CSS, JavaScript e Liquid. Por isso, sugerimos contratar um Parceiro da Shopify se você não se sentir confortável em acompanhar estas instruções.

Observação

Não é mais possível usar scripts adicionais para personalizar a página de status do pedido.

Lojistas nos planos Basic, Shopify e Advanced podem fazer personalizações na página de status do pedido pelo editor de checkout e contas. Quem está no Shopify Plus pode usar o Checkout Extensibility para isso.

É possível exibir conteúdo na página de status do pedido com base nos seguintes critérios:

• locais de seus clientes
• um pedido de determinado produto
• uma forma de frete

Exibir conteúdo com base na localização dos clientes

Você pode adicionar uma mensagem personalizada à página de status do pedido que é mostrada somente a clientes com endereços de entrega em uma determinada região. Por exemplo, você pode optar por mostrar uma mensagem apenas para clientes que moram em Nova York, EUA. Você pode especificar quantos locais desejar.

Etapas:

Desktop

1. No admin da Shopify, acesse Configurações > Checkout.
2. Na caixa de texto Scripts adicionais, cole o seguinte código de exemplo:

<script>
{% if checkout.shipping_address.country_code == 'US' and checkout.shipping_address.province_code == 'NY' %}
    Shopify.Checkout.OrderStatus.addContentBox(
    '<h2>YOUR TITLE HERE</h2>',
    '<p>YOUR MESSAGE HERE</p>'
    )
{% endif %}
</script>

1. Edite o código para especificar onde os clientes precisam estar para receber a mensagem personalizada. Para fazer isso, você precisa editar as abreviações de país e estado dentro da instrução do Liquid {% if %} na parte superior do bloco de código. A mensagem no exemplo acima é definida para ser exibida para os clientes que moram em Nova York, EUA.

   • Para mostrar a mensagem aos clientes em um estado diferente, substitua NY pela abreviação de estado de sua escolha. Para encontrar a abreviação postal para usar em um estado dos EUA, você pode verificar essa lista de abreviações de estado da USPS.
   • Para mostrar a mensagem aos clientes em Nova York, bem como a outro estado, adicione and checkout.shipping_address.province_code == 'XX', em que XX é a abreviação do estado de sua escolha. Para adicionar mais estados, repita esta etapa.
   • Para mostrar a mensagem aos clientes em um país diferente, substitua US pela abreviação de país de sua escolha. Você também precisa substituir NY por uma abreviatura de estado ou província no novo país. Se preferir não especificar um estado, exclua o seguinte: and checkout.shipping_address.province_code == 'NY'.
   • Para saber mais sobre como escrever instruções if, consulte a referência do Liquid sobre Tags de controle de fluxo.

2. Faça um pedido de teste para ver os resultados na página de status do pedido.

iPhone

1. No app da Shopify, toque no botão … e em Configurações.
2. Na seção Configurações da loja , toque em Checkout.
3. Na caixa de texto Scripts adicionais, cole o seguinte código de exemplo:

<script>
{% if checkout.shipping_address.country_code == 'US' and checkout.shipping_address.province_code == 'NY' %}
    Shopify.Checkout.OrderStatus.addContentBox(
    '<h2>YOUR TITLE HERE</h2>',
    '<p>YOUR MESSAGE HERE</p>'
    )
{% endif %}
</script>

1. Edite o código para especificar onde os clientes precisam estar para receber a mensagem personalizada. Para fazer isso, você precisa editar as abreviações de país e estado dentro da instrução do Liquid {% if %} na parte superior do bloco de código. A mensagem no exemplo acima é definida para ser exibida para os clientes que moram em Nova York, EUA.

   • Para mostrar a mensagem aos clientes em um estado diferente, substitua NY pela abreviação de estado de sua escolha. Para encontrar a abreviação postal para usar em um estado dos EUA, você pode verificar essa lista de abreviações de estado da USPS.
   • Para mostrar a mensagem aos clientes em Nova York, bem como a outro estado, adicione and checkout.shipping_address.province_code == 'XX', em que XX é a abreviação do estado de sua escolha. Para adicionar mais estados, repita esta etapa.
   • Para mostrar a mensagem aos clientes em um país diferente, substitua US pela abreviação de país de sua escolha. Você também precisa substituir NY por uma abreviatura de estado ou província no novo país. Se preferir não especificar um estado, exclua o seguinte: and checkout.shipping_address.province_code == 'NY'.
   • Para saber mais sobre como escrever instruções if, consulte a referência do Liquid sobre Tags de controle de fluxo.

2. Faça um pedido de teste para ver os resultados na página de status do pedido.

Android

1. No app da Shopify, toque no botão … e em Configurações.
2. Na seção Configurações da loja , toque em Checkout.
3. Na caixa de texto Scripts adicionais, cole o seguinte código de exemplo:

<script>
{% if checkout.shipping_address.country_code == 'US' and checkout.shipping_address.province_code == 'NY' %}
    Shopify.Checkout.OrderStatus.addContentBox(
    '<h2>YOUR TITLE HERE</h2>',
    '<p>YOUR MESSAGE HERE</p>'
    )
{% endif %}
</script>

1. Edite o código para especificar onde os clientes precisam estar para receber a mensagem personalizada. Para fazer isso, você precisa editar as abreviações de país e estado dentro da instrução do Liquid {% if %} na parte superior do bloco de código. A mensagem no exemplo acima é definida para ser exibida para os clientes que moram em Nova York, EUA.

   • Para mostrar a mensagem aos clientes em um estado diferente, substitua NY pela abreviação de estado de sua escolha. Para encontrar a abreviação postal para usar em um estado dos EUA, você pode verificar essa lista de abreviações de estado da USPS.
   • Para mostrar a mensagem aos clientes em Nova York, bem como a outro estado, adicione and checkout.shipping_address.province_code == 'XX', em que XX é a abreviação do estado de sua escolha. Para adicionar mais estados, repita esta etapa.
   • Para mostrar a mensagem aos clientes em um país diferente, substitua US pela abreviação de país de sua escolha. Você também precisa substituir NY por uma abreviatura de estado ou província no novo país. Se preferir não especificar um estado, exclua o seguinte: and checkout.shipping_address.province_code == 'NY'.
   • Para saber mais sobre como escrever instruções if, consulte a referência do Liquid sobre Tags de controle de fluxo.

2. Faça um pedido de teste para ver os resultados na página de status do pedido.

Exibir conteúdo com base em um pedido de um produto específico

Saiba como iterar pelo seu checkout.line_items para ver se o produto especial está no pedido.

Etapas:

Desktop

1. No admin da Shopify, acesse Configurações > Checkout.
2. Role a tela para baixo até a seção Scripts adicionais.
3. Copie o seguinte código para sua área de transferência (command + c num Mac, ctrl + c num PC).

<script>
  {% for line in checkout.line_items %}
    // DEBUG looking at {{ line.title }}
    {% if line.title == 'Downloadable product' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        '<p>Download your product <a href="#">Here!</a></p>'
      )
    {% endif %}
  {% endfor %}
</script>

1. Cole o código na caixa Scripts adicionais. (aperte ctrl + V num PC ou command + V num Mac)
2. Conclua um pedido de teste para ver a página de status do pedido.

iPhone

1. No app da Shopify, toque no botão … e em Configurações.
2. Na seção Configurações da loja , toque em Checkout.
3. Role a tela para baixo até a seção Scripts adicionais.
4. Copie o seguinte código para sua área de transferência (command + c num Mac, ctrl + c num PC).

<script>
  {% for line in checkout.line_items %}
    // DEBUG looking at {{ line.title }}
    {% if line.title == 'Downloadable product' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        '<p>Download your product <a href="#">Here!</a></p>'
      )
    {% endif %}
  {% endfor %}
</script>

1. Cole o código na caixa Scripts adicionais. (aperte ctrl + V num PC ou command + V num Mac)
2. Conclua um pedido de teste para ver a página de status do pedido.

Android

1. No app da Shopify, toque no botão … e em Configurações.
2. Na seção Configurações da loja , toque em Checkout.
3. Role a tela para baixo até a seção Scripts adicionais.
4. Copie o seguinte código para sua área de transferência (command + c num Mac, ctrl + c num PC).

<script>
  {% for line in checkout.line_items %}
    // DEBUG looking at {{ line.title }}
    {% if line.title == 'Downloadable product' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        '<p>Download your product <a href="#">Here!</a></p>'
      )
    {% endif %}
  {% endfor %}
</script>

1. Cole o código na caixa Scripts adicionais. (aperte ctrl + V num PC ou command + V num Mac)
2. Conclua um pedido de teste para ver a página de status do pedido.

Exibir conteúdo com base na forma de frete

Utilize um script de condição com a variável checkout.shipping_method.title para mostrar conteúdo na página de status do pedido quando uma forma de frete específica tiver sido usada para um pedido.

Por exemplo, você pode ter uma opção de retirada na loja para clientes que moram perto o suficiente da sua loja física. Se eles selecionarem essa opção, será possível fornecer o endereço de varejo da loja na página de status do pedido.

Etapas:

Desktop

1. No admin da Shopify, acesse Configurações > Checkout.
2. Role a tela para baixo até a seção Scripts adicionais.
3. Copie o seguinte código para sua área de transferência (command + c em um Mac, ctrl + c em um PC).

  <script>
    // DEBUG {{ checkout.shipping_method.title }} has been used
    {% if checkout.shipping_method.title == 'Pick-up at the store' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        `<p>Okay, we're ready for you to collect your products from 17 Mapple Crescent, Toronto. Our store is open 9:00 to 5:00 every day.</p>`
      )
    {% endif %}
  </script>

1. Cole o código na caixa Scripts adicionais. (command + v em um Mac, ctrl + v em um PC)
2. Conclua um pedido de teste para ver a página de status do pedido.

iPhone

1. No app da Shopify, toque no botão … e em Configurações.
2. Na seção Configurações da loja , toque em Checkout.
3. Role a tela para baixo até a seção Scripts adicionais.
4. Copie o seguinte código para sua área de transferência (command + c em um Mac, ctrl + c em um PC).

  <script>
    // DEBUG {{ checkout.shipping_method.title }} has been used
    {% if checkout.shipping_method.title == 'Pick-up at the store' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        `<p>Okay, we're ready for you to collect your products from 17 Mapple Crescent, Toronto. Our store is open 9:00 to 5:00 every day.</p>`
      )
    {% endif %}
  </script>

1. Cole o código na caixa Scripts adicionais. (command + v em um Mac, ctrl + v em um PC)
2. Conclua um pedido de teste para ver a página de status do pedido.

Android

1. No app da Shopify, toque no botão … e em Configurações.
2. Na seção Configurações da loja , toque em Checkout.
3. Role a tela para baixo até a seção Scripts adicionais.
4. Copie o seguinte código para sua área de transferência (command + c em um Mac, ctrl + c em um PC).

  <script>
    // DEBUG {{ checkout.shipping_method.title }} has been used
    {% if checkout.shipping_method.title == 'Pick-up at the store' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        `<p>Okay, we're ready for you to collect your products from 17 Mapple Crescent, Toronto. Our store is open 9:00 to 5:00 every day.</p>`
      )
    {% endif %}
  </script>

1. Cole o código na caixa Scripts adicionais. (command + v em um Mac, ctrl + v em um PC)
2. Conclua um pedido de teste para ver a página de status do pedido.