Imagem clicável lado a lado

21 de março de 2023

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

Adicione uma imagem principal clicável que pode ser direcionada para sua loja e até mesmo para fora dela. Fácil de personalizar.

O que você está comprando:

Imagem de banner clicável lado a lado
Opções para alterar o tamanho das imagens adicionadas

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. Vá para loja Admin Shopify > Temas > Ações > Editar código

2. Na pasta Seção, crie uma nova seção, nomeie-a como quiser e substitua o código padrão pelo código abaixo

 < div class = "image-sbs-banner--container" 
style = "gap: {{ section.settings.space_between | append: 'vw' }} ;
 preenchimento: {{ section.settings.padding_top | append: 'px' }} {{ section.settings.padding_side | append: 'px' }} {{ section.settings.padding_bottom | append: 'px' }} " >
 { % para bloco na seção. blocos % } 
{ % se bloco. configurações . link_da_imagem != em branco % }
 <a href="{{block.settings.image_link }}" > _ {{ block.settings.image_link }} _
 { % fim se % } 
< div class = "sbs-image--wrapper" style = "justify-content: {{ block.settings.content_placement }} ;" >
 { % atribuir largura_imagem = 'largura:' | acrescentar : bloco. configurações . tamanho da imagem % } 
{ % se bloco. configurações . imagem % }
 { { bloquear. configurações . imagem | URL_da_imagem : largura : 3840 | image_tag : carregando : 'preguiçoso' , 
classe : 'sbs-image' ,
 tamanhos : '(largura mínima: 750px) 50vw, 100vw' ,
 larguras : '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840' ,
 estilo : largura_da_imagem
 } }
 { % fim se % }
 </div> _ _ 
{ % se bloco. configurações . image_link != blank % } </ a > { % endif % }
 { % fim para % }
 </div> _ _
 <estilo> _ 
. imagem -sbs -banner --container {
 exibição : flexível ;
 largura : 100 %;
 }
 . sbs - imagem -- wrapper {
 exibição : flexível ;
 }
 . sbs - image --wrapper . sbs - imagem { 
altura : automático ;
 ajuste de objeto : contém ;
 posição do objeto : topo ;
 }
 . imagem - sbs - banner - contêiner a ,
 . sbs - imagem -- wrapper {
 largura : 100 %;
 } 
</ estilo >
 { % esquema % }
 {
 "name" : "Imagem lado a lado" ,
 "configurações" : [
 {
 "tipo" : "intervalo" ,
 "id" : "espaço_entre" , 
"min" : 0 ,
 "máximo" : 10 ,
 "passo" : 0,5 ,
 "unidade" : "vw" ,
 "label" : "Espaço entre" ,
 "padrão" : 1 , 
"info" : "O espaço entre as imagens é ajustado de acordo com o tamanho da tela"
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "padding_top" ,
 "min" : 0 ,
 "máximo" : 100 , 
" passo 1 ,
 "unidade" : "px" ,
 "label" : "Preenchimento superior" ,
 "padrão" : 0
 } ,
 {
 "tipo" : "intervalo" , 
"id" : "padding_side" ,
 "min" : 0 ,
 "máximo" : 100 ,
 " passo 1 ,
 "unidade" : "px" ,
 "label" : "Lado do preenchimento" , 
"padrão" : 0
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "padding_bottom" ,
 "min" : 0 ,
 "máximo" : 100 , 
" passo 1 ,
 "unidade" : "px" ,
 "label" : "Preenchimento inferior" ,
 "padrão" : 0
 }
 ] ,
 "max_blocks" : 2 , 
"blocos" : [
 {
 "type" : "imagem clicável" ,
 "name" : "Imagem clicável" ,
 "configurações" : [
 {
 "type" : "image_picker" , 
"rótulo" : "Imagem" ,
 "id" : "imagem"
 } ,
 {
 "tipo" : "url" ,
 "label" : "Link da imagem" ,
 "id" : "image_link"
 } , 
{
 "tipo" : "selecionar" ,
 "id" : "tamanho_da_imagem" ,
 "label" : "Tamanho da imagem" ,
 "padrão" : "50%" ,
 "opções" : [
 { 
"label" : "Extra Pequeno" ,
 "valor" : "25%"
 } ,
 {
 "rótulo" : "Pequeno" ,
 "valor" : "50%"
 } ,
 { 
"rótulo" : "Médio" ,
 "valor" : "75%"
 } ,
 {
 "rótulo" : "Grande" ,
 "valor" : "100%"
 }
 ]
 } ,
 { 
"tipo" : "selecionar" ,
 "id" : "content_placement" ,
 "label" : "Posicionamento de conteúdo" ,
 "padrão" : "centro" ,
 "opções" : [
 { 
"rótulo" : "Esquerda" ,
 "valor" : "início flexível"
 } ,
 {
 "rótulo" : "Direito" ,
 "valor" : "flex-end"
 } ,
 { 
"rótulo" : "Centro" ,
 "valor" : "centro"
 }
 ]
 }
 ]
 }
 ] ,
 "predefinições" : [
 {
 "name" : "Imagem lado a lado"
 }
 ] 
}
 { % termina o esquema % }