Barra lateral social/conectar

Social / Connect Sidebar

Compatibilidade: todos os temas do Shopify (o design pode variar)

Conecte-se ao seu cliente adicionando uma barra lateral social ao seu site. Você também pode adicionar seu telefone e contato de e-mail, se necessário. As opções sociais são Facebook, Instagram, Pinterest, Snapchat, Tiktock, Tumblr, Twitter, Vimeo, YouTube, e-mail, Discord e meio. Se você quiser adicionar mais, envie-nos uma mensagem usando "Converse conosco".

Você pode verificar a loja de demonstração aqui . Senha: made4uo

O que você está comprando:

  • Adicione uma barra lateral social dinâmica
  • Personalize a cor do ícone e a cor de fundo

O que torna nosso código melhor:

  • Não usamos bibliotecas externas, com isso dito, nosso código não terá nenhum efeito mínimo no desempenho de velocidade do seu site
  • Não deixamos nem adicionamos códigos para anunciar em nosso site
  • Nosso código é compatível com dispositivos móveis

Quaisquer problemas relacionados ao código serão corrigidos sem custo adicional, excluindo solicitações de customização de código. Basta entrar em contato conosco em "Converse conosco". Estamos a apenas um botão de distância.

Para iniciar:

1. Crie uma página. Na sua página de administração, vá para Loja online > Temas > Clique nos três pontos e em Editar código

2. Crie uma seção, arquivo líquido, e nomeie-a como "connect-sidebar" e substitua o código padrão pelo código abaixo. 

 <estilo> _
 . conectar - barra lateral - contêiner {
 posição : fixa ; 
direita : 0 ;
 altura : conteúdo máximo ;
 largura : conteúdo máximo ;
 índice z : 10 ;
 }
 . conectar - barra lateral -- wrapper { 
plano de fundo : { { seção. configurações . cor de fundo } } ;
 preenchimento : 2rem 1rem ;
 raio da borda : 3px ; 
caixa - sombra : rgb ( 17 17 26 / 10 % ) 0px 4px 16px , rgb ( 17 17 26 / 10 % ) 0px 8px 24px , 
rgb ( 17 17 26 / 10 % ) 0px 16px 56px ;
 }
 . conectar - barra lateral - ícones {
 exibição : flexível ;
 flex - direction : coluna ;
 lacuna : 10px ;
 } 
a. conectar - barra lateral - links {
 exibição : flexível ;
 flex - direction : coluna ;
 alinhar - itens : centro ;
 justificar - conteúdo : centro ;
 }
 . connect - sidebar --wrapper . conectar - barra lateral - título { 
alinhamento de texto : centro ;
 modo de escrita : vertical - rl ;
 orientação do texto : mista ;
 altura da linha : 2 ;
 intensidade da fonte : Negrito ;
 margem : automática ;
 preenchimento - inferior : 1rem ; 
largura : 100 %;
 }
 . conectar - barra lateral - título > *,
 . conectar - barra lateral - título h1 ,
 . conectar - barra lateral - título h2 ,
 . conectar - barra lateral - título h3 , 
. conectar - barra lateral - título p {
 margem : 0 ;
 }
 . conectar - barra lateral -- wrapper a {
 cor : var ( -ícone de cor ) ;
 decoração de texto : nenhuma ;
 } 
. conectar - barra lateral - ícones a {
 cursor : ponteiro ;
 cor : var ( -ícone - cor ) ;
 }
 a. conectar - barra lateral - links svg {
 preencha : var ( -ícone - cor ) ; 
largura : 30px ;
 }
 a. connect - sidebar - links : ativo ,
 a. connect - barra lateral - links : active svg {
 cor : var ( -ícone - ativo ) ; 
preencha : var ( -ícone - ativo ) ;
 }
 a. connect - barra lateral - links : hover svg {
 cor : var ( -ícone - ativo ) ;
 preencha : var ( -ícone - ativo ) ; 
escala : 1,1 ;
 }

 </ estilo >
 < div
 class = "connect-barra lateral--container"
 style = "--icon-color: {{ section.settings.icon_color }} ; --icon-active: {{ section.settings.icon_active }} "
 > 
< conectar - dados da barra lateral - ocultar - barra lateral = " {% if section.settings.show_hide %} true {% else %} false {% endif %} " >
 < div class = "connect-sidebar--wrapper" > 
{ % se seção. configurações . título ! = em branco % }
 < div class = "connect-sidebar--heading" > { { seção. configurações . título } } </ div > 
{ %- fim se % }
 < div class = "connect-sidebar--icons" >
 { % para bloco na seção. blocos % } 
{ % bloco de casos . configurações . ícone_social % }
 { % quando 'facebook' % }
 < um
 class = "connect-barra lateral--links"
 href = " {{ block.settings.social_link }} " 
título = " {{ block.settings.social_icon }} "
 alvo = "_blank"
 >
 { % renderizar 'ícone-facebook' % }
 </a> _
 { % quando 'instagram' % }
 < um 
class = "connect-barra lateral--links"
 href = " {{ block.settings.social_link }} "
 título = " {{ block.settings.social_icon }} "
 alvo = "_blank"
 >
 { % renderizar 'ícone-instagram' % }
 </a> _ 
{ % quando 'pinterest' % }
 < um
 class = "connect-barra lateral--links"
 href = " {{ block.settings.social_link }} "
 título = " {{ block.settings.social_icon }} "
 alvo = "_blank"
 > 
{ % renderizar 'icon-pinterest' % }
 </a> _
 { % quando 'snapchat' % }
 < um
 class = "connect-barra lateral--links"
 href = " {{ block.settings.social_link }} " 
título = " {{ block.settings.social_icon }} "
 alvo = "_blank"
 >
 { % renderizar 'icon-snapchat' % }
 </a> _
 { % quando 'tiktok' % }
 < um 
class = "connect-barra lateral--links"
 href = " {{ block.settings.social_link }} "
 título = " {{ block.settings.social_icon }} "
 alvo = "_blank"
 >
 { % renderizar 'icon-tiktok' % }
 </a> _ 
{ % quando 'tumblr' % }
 < um
 class = "connect-barra lateral--links"
 href = " {{ block.settings.social_link }} "
 título = " {{ block.settings.social_icon }} "
 alvo = "_blank"
 > 
{ % renderizar 'icon-tumblr' % }
 </a> _
 { % quando 'twitter' % }
 < um
 class = "connect-barra lateral--links"
 href = " {{ block.settings.social_link }} " 
título = " {{ block.settings.social_icon }} "
 alvo = "_blank"
 >
 { % renderizar 'ícone-twitter' % }
 </a> _
 { % quando 'vimeo' % }
 < um 
class = "connect-barra lateral--links"
 href = " {{ block.settings.social_link }} "
 título = " {{ block.settings.social_icon }} "
 alvo = "_blank"
 >
 { % renderizar 'icon-vimeo' % }
 </a> _ 
{ % quando 'youtube' % }
 < um
 class = "connect-barra lateral--links"
 href = " {{ block.settings.social_link }} "
 título = " {{ block.settings.social_icon }} "
 alvo = "_blank"
 > 
{ % renderizar 'ícone-youtube' % }
 </a> _
 { % quando 'telefone' % }
 < um
 class = "connect-barra lateral--links"
 href = " {{ block.settings.phone | prepend: " tel : "}} " 
título = " {{ block.settings.social_icon }} "
 >
 < svg
 largura = "25px"
 altura = "25px"
 viewBox = "0 0 890 890"
 >
 <g> _
 < caminho d = "M2.8.180.875c46.6.134.144.7.286.2.282.9.424.399c138.2.138.2.290.4.236.301.424.4.282.9c18.2.6.3.38.3.1.8.52-11.8 
l92,7-92,7l21,6-21,6c19,5-19,5,19,5-51,2,0-70,7l-143,5-143,4c-19,5-19,5-51,2-19,5-70,7,0l-38,899,38,9
 c-20,2,20,2-52,4,22,2-75,4,6c-44,7-34,8-89-73,899-131,9-116,8c-42,9-42,9-82-87,2-116,8-131,9c-17,601-22,6-15,601-54,7,4,6 -75
 l38,9-38,9c19,5-19,5,19,5-51,2,0-70,7l-143,5-143,5c-19,5-19,5-51,2-19,5-70,7,0l-21,6,21,6l-92,7,92,7
 C1.142.575-3.5.162.675.2.8.180.875z" />
 </ g >
 </svg> _
 </a> _
 { % quando 'e-mail' % } 
< um
 class = "connect-barra lateral--links"
 href = " {{ block.settings.social_link | prepend: " mailto : " }} "
 título = " {{ block.settings.social_icon }} "
 >
 < svg
 largura = "25px"
 altura = "25px" 
viewBox = "0 0 1920 1920"
 >
 < caminho d = "M1920 428.266v1189.54l-464.16-580.146-88.203 70.585 468.679 585.904H83.684l468.679-585.904-88.202-70.585L0 1617.805V4 28.265l959.944 832.441L1920 428.266ZM1919.932 226v52.627l-959.943 832.44L .045 278.628V226h1919.887Z" preenchimento - regra = "evenodd" />
 </svg> _
 </a> _ 
{ % quando 'discordância' % }
 < um
 class = "connect-barra lateral--links"
 href = " {{ block.settings.social_link | prepend: " mailto : " }} "
 título = " {{ block.settings.social_icon }} "
 >
 < svg 
aria - oculto = "verdadeiro"
 focalizável = "falso"
 role = "apresentação"
 class = "ícone ícone-discord"
 viewBox = "0 0 100 70"
 largura = "35px"
 altura = "25px"
 >
 <g> _ 
<g> _
 <g> _
 < classe de caminho = "discordância" d = "M78.11,7.43C72.79,4.79,67.17,2.92,61.4,1.86c-0.79,1.52-1.5,3.08-2.12,4.68c-6.14-0.97-12.37-0.97 -18,5,0
 c-0,57-1,46-1,43-3,31-2,12-4,68C32,85,2,9,27,2,4,77,21,86,7,43C12,45,21,86,8,21,39,49,9,93,57,05l0,0
 c6.18,4,91,13,09,8,66,20,42,11,09c1,67-2,4,3,13-4,96,4,37-7,64c-2,39-0,96-4,68-2,16-6,86-3,58l1,67-1,41
 c12,93,6,61,27,92,6,61,40,85,0c0,57,0,49,1,1,0,97,1,72,1,41c-2,21,1,41-4,54,2,61-6,94,3,58c1,28,2,69,2,79,5,25,4,49, 7,64 
c7,34-2,43,14,24-6,18,20,42-11,09l0,0C91,78,39,49,87,53,21,85,78,11,7,43z M36,61,47,19c-4,26-0,26-7,51-4,2-7,27-8,81
 c0-0,01,0-0,02,0-0,03c-0,28-4,58,2,93-8,53,7,16-8,83c0,04,0,0,07,0,0,11-0,01c4,21,0,21,7,47,4,07,7,28,8,63
 c0,0,07-0,01,0,14-0,01,0,21c0,16,4,55-3,07,8,4-7,27,8,66L36,61,47,19z M63,44,47,19c-4,26-0,28-7,5-4,23-7,27-8,84
 c-0,25-4,6,2,99-8,56,7,24-8,83c0,01,0,0,02,0,0,03,0c4,21,0,21,7,47,4,07,7,28,8,63c0,0,07-0,01,0,14-0,01,0,21
 c0.19,4,56-3,06,8,42-7,27,8,66V47,19z" />
 </ g >
 </ g >
 </ g > 
</svg> _
 </a> _
 { % quando 'médio' % }
 < um
 class = "connect-barra lateral--links"
 href = " {{ block.settings.social_link }} "
 título = " {{ block.settings.social_icon }} "
 > 
< svg
 aria - oculto = "verdadeiro"
 focalizável = "falso"
 role = "apresentação"
 class = "ícone ícone-médio"
 viewBox = "0 0 100 70"
 >
 <g> _
 <g> _ 
< classe de caminho = "st0" d = "M55.92,35c0,14.36-11.66,26-26.05,26S3.81,49.36,3.81,35S15.48,9,29.86,9S55.92,20.64,55.92,35" />
 < classe de caminho = "st0" d = "M84.5,35c0,13.52-5.83,24.48-13.03,24.48S58.44,48.52,58.44,35s5.83-24.48,13.03-24.48S84.5,21.48,84.5, 35" /> 
< classe de caminho = "st0" d = "M96.19,35c0,12.11-2.05,21.93-4.58,21.93c-2.53,0-4.58-9.82-4.58-21.93s2.05-21.93,4.58-21.93
 C94.14,13.07,96.19,22.89,96.19,35" />
 </ g >
 </ g >
 </svg> _
 </a> _
 { % final % } 
{ % fim para % }
 </div> _ _
 </div> _ _
 </ conectar - barra lateral >
 </div> _ _
 <roteiro> _
 classe e estende HTMLElement {
 construtor ( ) { 
super ( ) ;
 esse . t = isso . querySelector ( ".connect-sidebar--wrapper" ) ;
 if ( este . conjunto de dados . o == "verdadeiro" ) { 
esse . eu ( ) ;
 documento. addEventListener ( " rolar " , isto.h.ligar ( este ) ) ;
 }
 }
 eu ( ) { 
deixe e = novo IntersectionObserver ( ( e , t ) => {
 esse . você = e [ 0 ] . intersecçãoRect ;
 t. desconectar ( ) ;
 } ) ; 
e. observe ( isto ) ;
 }
 h ( ) {
 const e = documento. querySelector ( "cabeçalho" ) ;
 const t = documento. querySelector ( "rodapé" ) ; 
consts = isto . eu ( e ) ;
 const o = isto . eu ( t ) ;
 console. log ( "cabeçalho" , s , "rodapé" , o ) ; 
se ( s || o ) {
 esse . esconder ( ) ;
 } outro {
 esse . m ( ) ;
 }
 }
 eu ( ) { 
const e = documento. querySelector ( "cabeçalho" ) ;
 const t = documento. querySelector ( "rodapé" ) ;
 const s = e. getBoundingClientRect ( ) ;
 deixe o ; 
se ( t ) {
 o = t. getBoundingClientRect ( ) ;
 }
 retornar (
 ( s. topo >= 0 &&
 S. inferior <= 
( window. innerHeight || document. documentElement . clientHeight ) ) ||
 ( o. inferior >=
 ( window. innerHeight || document. documentElement . clientHeight ) && 
ó. topo <= documento. documentElement . altura do cliente &&
 S. topo <= documento. documentElement . altura do cliente )
 ) ;
 }
 esconder ( ) { 
esse . t . estilo . exibir = "nenhum" ;
 }
 m ( ) {
 esse . t . estilo . exibir = "bloco" ;
 }
 reiniciar ( ) { 
if ( este.p ) retornar ;
 esse . v . lista de classes . remover (
 "shopify-seção-cabeçalho-oculto" ,
 "shopify-section-header-sticky" ,
 "animar"
 ) ;
 }
 } 
elementos personalizados. define ( "conectar-barra lateral" , e ) ;
 </roteiro> _
 { % esquema % }
 {
 "name" : "Conectar barra lateral" ,
 "configurações" : [
 { 
"type" : "richtext" ,
 "id" : "título" ,
 "label" : "Siga-nos título" ,
 "default" : "<p>Siga-nos</p>"
 } ,
 {
 "tipo" : "cor" , 
"id" : "cor_de_fundo" ,
 "label" : "Cor de fundo" ,
 "padrão" : "#a1cce7"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "icon_color" , 
"label" : "Cor do ícone" ,
 "padrão" : "#000"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "icon_active" ,
 "label" : "Cor ativa do ícone" , 
"padrão" : "#2310f1"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "mostrar_ocultar" ,
 "label" : "Ocultar barra lateral quando cabeçalho e rodapé" ,
 "info" : "Ocultar redes sociais quando o cabeçalho e o rodapé estiverem sendo exibidos"
 } 
] ,
 "blocos" : [
 {
 "nome" : "sociais" ,
 "tipo" : "social" ,
 "configurações" : [
 {
 "tipo" : "selecionar" , 
"id" : "ícone_social" ,
 "label" : "Ícone social" ,
 "opções" : [
 {
 "valor" : "facebook" ,
 "rótulo" : "Facebook"
 } ,
 { 
"valor" : "instagram" ,
 "rótulo" : "Instagram"
 } ,
 {
 "valor" : "pinterest" ,
 "rótulo" : "Pinterest"
 } ,
 { 
"valor" : "snapchat" ,
 "rótulo" : "Snapchat"
 } ,
 {
 "valor" : "tiktok" ,
 "rótulo" : "Tiktok"
 } ,
 { 
"valor" : "tumblr" ,
 "rótulo" : "Tumblr"
 } ,
 {
 "valor" : "twitter" ,
 "rótulo" : "Twitter"
 } ,
 { 
"valor" : "vimeo" ,
 "rótulo" : "Vimeo"
 } ,
 {
 "valor" : "youtube" ,
 "rótulo" : "YouTube"
 } ,
 { 
"valor" : "telefone" ,
 "rótulo" : "Telefone"
 } ,
 {
 "valor" : "e-mail" ,
 "rótulo" : "E-mail"
 } ,
 { 
"valor" : "discordância" ,
 "rótulo" : "Discórdia"
 } ,
 {
 "valor" : "médio" ,
 "rótulo" : "Médio"
 }
 ] , 
"padrão" : "facebook"
 } ,
 {
 "tipo" : "url" ,
 "id" : "link_social" ,
 "label" : "Link social"
 } ,
 { 
"tipo" : "texto" ,
 "id" : "telefone" ,
 "rótulo" : "Número de telefone" ,
 "info" : "Se o bloqueio for telefone, forneça o número, por exemplo, +12345678900"
 }
 ]
 }
 ] , 
"predefinições" : [
 {
 "name" : "Conectar barra lateral"
 }
 ]
 }
 { % termina o esquema % }


3. Certifique-se de SALVAR

4. Em seguida, vá para a pasta Layout e abra o theme.liquid

5. Encontre “<main” e adicione o código acima dele. Certifique-se de SALVAR

{% section 'connect-sidebar' %}

Veja a imagem abaixo:

conectar barra lateral

6. Se você tiver a versão Dawn inferior a 8.0, a seção será adicionada automaticamente. Ele estará abaixo do cabeçalho quando você abrir o editor de temas.

Se você possui Dawn versão 8.0 e superior, abra o editor de temas clicando nos três pontos no canto superior esquerdo. Encontre a seção do cabeçalho e clique em “Adicionar seção” abaixo do cabeçalho. Encontre e clique em ‘Conectar barra lateral’. Faça a personalização de sua preferência.

É isso (",)

0 comentários

Deixe um comentário