Criando uma Barra de Anúncios para oferecer descontos e vender mais em sua loja Shopify

Uma barra (ou banner) de anúncio permite exibir informações e promover descontos na página inicial ou em todas as páginas do site personalizando tudo pelo Editor de Temas.

Esta é uma ferramenta muit útil para promover produtos ou ações promocionais específicas e objetivas para aumentar suas vendas.

Imagine que você quer oferecer Frete Grátis em compras acima de R$100.

Agora pense que, sem esta informação cada visitante do seu site pode desistir de comprar simplesmente por não ter esta informação clara em algum lugar do seu site. Se, por exmeplo, deixar apenas no rodapé do site ou na descrição do produto, cada visitante terá que percorrer todo o seu site e dependerá do interesse de ler todo o conteúdo até o rodapé ou toda a descrição do produto.

Se você usar uma barra comunicando isso com objetividade, tudo resolvido!
Você comunicou com objetividade sua promoção.

Alguns sites (como submarino) na versão desktop, até exibe barras de anúncios no estilo banner de publicidade usando imagens.

Tudo vai depender, é claro, da sua criatividade e da necessidade da sua loja. Eu já desenvolvi uma de acordo com a necessidade do cliente que era simplesmente ter 2 (sim, duas) barras de anúncios. Uma para divulgar o frete e outra para oferecer cupom de desconto ao clicar na barra.

Então, vou comparilhar o código para você poder criar o modelo mais básico de Barra de Anúncios. Com pouca personalização mas bem útil.

1. Crie um novo arquivo na pasta sections do seu tema e cole o código abaixo neste arquivo. Salve este arquivo como barra-de-anuncio.liquid.
2. No arquivo theme.liquid, faça uma requisição da barra de anúncio com um identificador usado para acessar os atributos do arquivo Liquid e insira o código {% section 'barra-de-anuncio' %} onde deseja exibir a barra.
   
   Por exemplo:
   
   Se deseja no topo da página principal
   insira o código acima do objeto
   {{ content_for_layout }}
3. Agora você acabou de fazer uma requisição da barra de anúncio na página inicial e em todas as páginas que podem ser atribuídas a partir do Editor. Ainda falta o código para o arquivo barra-de-anuncio.liquid:

{%- if section.settings.exibe_barra -%}
  {%- if section.settings.apenas_na_home == false or template.name == 'index' -%}    {%- if section.settings.link_barra == blank -%}
      <div>
    {%- else -%}
      <a href="{{ section.settings.link_barra }}" >
    {%- endif -%}      <p>{{ section.settings.texto_barra | escape }}</p>    {%- if section.settings.link_barra == blank -%}
      </div>
    {%- else -%}
      </a>
    {%- endif -%}  {%- endif -%}
{%- endif -%}{% schema %}
{
  "name": "Barra de Anúncios",
  "settings": [
    {
      "type": "checkbox",
      "id": "exibe_barra",
      "label": "Exibir Barra de Anúncios",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "apenas_na_home",
      "label": "Apenas na Home",
      "default": true
    },
    {
      "type": "text",
      "id": "texto_barra",
      "label": "Texto da barra",
      "default": "Informe alguma coisa aqui!"
    },
    {
      "type": "url",
      "id": "link_barra",
      "label": "Link da Barra"
    }
  ]
}
{% endschema %}

Prontinho!

Observação: excluí intencionalmente o CSS e o JavaScript. Por padrão (caso queria vender temas na Loja de Temas Shopify, precisa usar as strings de tradução ter seu tema compatível com qualquer tema.