Adicione o WhatsApp ao Shopify gratuitamente - sem aplicativo ou assinatura

 < div class = "whatsapp-widget-container {{section.settings.widget_position}} " > 
< div class = "whatsapp-widget" >
 < um
 href = "https://api.whatsapp.com/send?phone= {{section.settings.phone_number}} &text=Messaging%20from&#58%20 {% if request.path == " / " %} página inicial {% else %} {{request.path | remove: '/'}} {% endif %} %20"
 classe = "ícone ww" 
alvo = "_blank"
 style = "decoração de texto: nenhum; direção flexível: {{section.settings.flex_direction}} "
 >
 < svg viewBox = "0 0 32 32" > 
< caminho d = " M19.11 17.205c-.372 0-1.088 1.39-1.518 1.39a.63.63 0 0 1-.315-.1c-.802-.402-1.504-.817-2.163-1.447-.545 -.516-1.146-1.29-1.46-1.963a.426.426 0 0 1-.073-.215c0-.33,99-.945,99-1,49 0-.143-.73-2.09-.832-2.335-.143-. 372-.214-.487-.6-.487-.187 0-.36-.043-.53-.043-.302 0-.53.115-.746.315-.688.645-1.032 1.318-1.06 2.264v. 114c-0,015.99.472 1,977 1,017 2,78 1,23 1,82 2,506 3,41 4,554 4,34.616,287 2,035,888 2,722.888,817 0 2,15-0,515 2,478-1,318 .13-.33.244-.73.244-1.088 0-.058 0-.144- ... 0 1-1,72-5,272c0-4,955 4,04-8,995 8,997-8,995S25,2 10,845 25,2 15,8c0 4,958-4,04 8,998-8,998 8,998zm0-19,798c-5,96 0-10,8 4,842-10,8 10,8 0 1,964,53 3,898 1,546 5,574L5 27.176l5.974-1.92a10.807 10.807 0 0 0 16.03-9.455c0-5.958-4.842-10.8-10.802-10.8z" preenchimento - regra = "par ímpar" </ caminho > 
</svg> _
 { % se seção. configurações . mensagem ! = em branco % }
 < div class = "ww-message" > 
{ % se seção. configurações . logotipo_loja ! = em branco % }
 < img src = " {{section.settings.store_logo | img_url: '60 x 60' }} " alt = " {{section.settings.store_logo.alt}} " >
 { % fim se % } 
< span class = "ww-text" > { { seção. configurações . mensagem } } </ span >
 < intervalo
 class = "ww-behind {% if section.settings.flex_direction == 'row' %} ww-behind-left {% else %} ww-behind-right {% endif %} " 
</ intervalo >
 </div> _ _
 { % fim se % }
 </a> _
 </div> _ _
 </div> _ _
 <estilo> _
 . whatsapp - widget - contêiner { 
exibição : flexível ;
 inferior : 2rem ;
 posição : fixa ;
 índice z : 10 ;
 }
 . WhatsApp -- certo {
 justificar - conteúdo : flex - end ;
 direita : 2rem ;
 } 
. WhatsApp -- esquerda {
 justificar - conteúdo : flex - start ;
 esquerda : 2rem ;
 }
 . whatsapp - widget {
 altura : conteúdo máximo ;
 exibição : flexível ;
 alinhar - itens : centro ;
 lacuna : 2rem ; 
transição : transformação com facilidade de 0,5s ;
 }
 . whatsapp - widget : passar o mouse {
 transformar : escala ( 1.2 ) ;
 }
 . whatsapp - widget. www - ícone {
 exibição : flexível ;
 flex - direction : linha ; 
justificar - conteúdo : centro ;
 alinhar - itens : centro ;
 lacuna : 20px ;
 }
 . ww - mensagem {
 exibição : flexível ;
 alinhar - itens : centro ;
 lacuna : 10px ;
 raio da borda : 8px ; 
borda : 1px sólido #e2e2e2;
 altura mínima : conteúdo máximo ;
 alinhamento de texto : centro ;
 decoração de texto : nenhuma ;
 cursor : ponteiro ;
 quebra de palavra : quebra de palavra ;
 fundo : branco ; 
preenchimento : 10px 20px ;
 posição : relativa ;
 caixa - sombra : 2px 2px 15px 2px rgb ( 0 0 0 / 17 % ) ;
 família de fontes : Roboto , "Helvetica Neue" , sans - serif ;
 } 
. uau - atrás {
 transformar : traduzirY ( -50 % ) girar ( 135 graus ) ;
 posição : absoluta ;
 superior : 50 %;
 largura : 20px ;
 altura : 20px ; 
cor de fundo : branco ;
 }
 . ww - atrás - esquerda {
 esquerda : - 11px ;
 borda - direita : 1px sólido #e2e2e2;
 borda - inferior : 1px sólido #e2e2e2;
 }
 . ww - atrás - direita { 
direita : - 10px ;
 borda - esquerda : 1px sólido #e2e2e2;
 borda - topo : 1px sólido #e2e2e2;
 }
 . whatsapp - widget svg {
 preenchimento : rgb ( 255 , 255 , 255 ) ; 
índice z : 1 ;
 raio da borda : 50px ;
 cor de fundo : rgb ( 77 , 194 , 71 ) ; 
box - shadow : rgb ( 0 0 0 / 40 % ) 2px 2px 6px ;
 cursor : ponteiro ;
 }
 . whatsapp - widget svg {
 altura : 65px ;
 largura : 65px ;
 }
 </ estilo > 
{ % esquema % }
 {
 "nome" : "WhatsApp" ,
 "configurações" : [
 {
 "tipo" : "texto" ,
 "id" : "número_telefone" , 
"rótulo" : "Número de telefone" ,
 "info" : "Adicionar com CEP ex: +10123456789"
 } ,
 {
 "type" : "image_picker" ,
 "id" : "logo_loja" ,
 "label" : "Logotipo da loja" 
} ,
 {
 "tipo" : "texto" ,
 "id" : "mensagem" ,
 "label" : "Etiqueta da mensagem" ,
 "default" : "Envie-nos uma mensagem" ,
 "info" : "Deixe a mensagem em branco para mostrar apenas o ícone" 
} ,
 {
 "tipo" : "selecionar" ,
 "id" : "widget_position" ,
 "default" : "whatsapp--right" ,
 "label" : "Posição do widget" ,
 "opções" : [
 { 
"valor" : "whatsapp--esquerda" ,
 "rótulo" : "esquerda"
 } ,
 {
 "valor" : "whatsapp--certo" ,
 "rótulo" : "certo"
 }
 ]
 } ,
 { 
"tipo" : "selecionar" ,
 "id" : "flex_direction" ,
 "padrão" : "linha" ,
 "label" : "Posição do ícone do WhatsApp" ,
 "opções" : [
 { 
"valor" : "linha reversa" ,
 "label" : "Ícone à direita"
 } ,
 {
 "valor" : "linha" ,
 "label" : "Ícone à esquerda"
 }
 ]
 }
 ] , 
"predefinições" : [
 {
 "nome" : "WhatsApp"
 }
 ]
 }
 { % termina o esquema % }