Todas as coleções
Códigos CSS e HTML
Inserir botão flutuante do Instagram e Facebook na loja
Inserir botão flutuante do Instagram e Facebook na loja

Aprenda como inserir o botão do Instagram e Facebook acima do botão nativo do Whatsapp em sua loja.

Clara Parente avatar
Escrito por Clara Parente
Atualizado há mais de uma semana

Esta customização foi criada por nosso lojista e apresentado em nossa Comunidade. Conheça a Comunidade da LI, por lá você pode interagir com nossos lojistas e nossos tópicos.

Como inserir o botão flutuante do Instagram e do Facebook?

Neste artigo vamos te ensinar como inserir um botão flutuante do Instagram e Facebook acima do botão flutuante do Whatsapp nativo da Loja Integrada.

Ainda não ativou o botão flutuante do Whatsapp? Siga esse passo a passo.

Vamos para o passo a passo:

01 - No painel da sua loja vá em: Visual > Incluir código HTML

02 - Clique em Adicionar código

02 - Em seguida, preencha com as seguintes informações:

  • Descrição: Botão flutuante

  • Local publicação: Rodapé

  • Página de publicação: Todas as páginas

  • Tipo: HTML

    Copie o código abaixo, e substitua os links da Loja Integrada pelo Facebook e Instagram da sua loja. Cole o código no campo Conteúdo.

❗ Substituir os links da Loja Integrada pelo Facebook e Instagram da sua loja:

<!-- FACEBOOK --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <a href="https://www.facebook.com/lojaintegrada" style="position:fixed;width:72px;height:72px;bottom:190px;right:16px;background-color:#385898;color:#FFF;border-radius:50px;text-align:center;font-size:30px;box-shadow: 1px 1px 2px #888; z-index:1000;" target="_blank"> <i style="margin-top:22px" class="fa fa-facebook"></i> <!-- FIM FACEBOOK --> <!-- 2921a5be-9bf9-11ec-b909-0242ac120002 --> <!--INSTAGRAM--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <a href="https://www.instagram.com/lojaintegrada" style="position:fixed;width:72px;height:72px;bottom:290px;right:16px;background: #D6249F;background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%,#D6249F 60%,#285AEB 90%);;color:#FFF;border-radius:50px;text-align:center;font-size:30px;box-shadow: 1px 1px 2px #888; z-index:1000;" target="_blank"> <i style="margin-top:22px" class="fa fa-instagram"></i> <!-- FIM INSTAGRAM -->

Pronto! Os botões flutuantes logo aparecerão na sua loja dessa maneira:


A Loja Integrada não se responsabiliza pela personalização deste código, pois o comportamento pode ser diferente dependendo do tema e outras personalizações. Qualquer mudança no layout inesperada, recomendamos a remoção do código.

Respondeu à sua pergunta?