Compatibilidade: Compatível com a maioria dos temas do Shopify, do Debut ao Dawn (todos os temas GRATUITOS do Shopify 2.0
Com o novo Shopify 2.0, o tema Dawn tem esta seção de colagem, mas é limitada a apenas três itens. Neste tutorial vamos criar uma seção com colagem de mais de 100 fotos. Você também pode usar imagens GIF. Eu criei outra colagem com posição definida na galeria aqui .
NOTA: O vídeo abaixo pode ser diferente da aparência real. Por favor, verifique a loja de demonstração aqui . Senha: made4uo
Criei diversas galerias de imagens que você pode gostar, veja a seguir:
O que você está comprando:
- Uma seção para sua própria colagem
- Atribua quantas colunas você deseja para visualização em desktop, visualização em tablet e visualização em dispositivos móveis
- Escolha a proporção da imagem entre paisagem, retrato e quadrado
- Atribua a cor do texto, a cor do texto da imagem e a cor da sombra da caixa
- O título da colagem será exibido quando a imagem for clicada
- Capaz de clicar uma vez para ampliar a imagem para o meio em vez de passar o mouse
- Capaz de clicar duas vezes na imagem antes de aplicar zoom para abrir o link (se o link for fornecido)
- Clique na imagem ampliada para fechar
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.
1. Vá para sua loja online > Temas > Ações > Editar código
2. Vá para a pasta Seção, crie uma seção, você pode nomeá-la como quiser
3. Na seção recém-criada, substitua o código existente pelo código abaixo
< div class = "customCollageContainer" style = "--top-bottom-padding: {{ section.settings.top_bottom_padding | append: " px " }} ; --left-right-padding: {{ section.settings.left_right_padding | append: " px " }} ;largura máxima: {{ section.settings.max_width | append: " px " }} ;" > < h2 class = "customCollageTitle" style = "color: {{ section.settings.title_text }} " > { { seção. configurações . custom_collage_title } } </ h2 > < div class = "customCollage" estilo = " --collage-box-shadow: {{ section.settings.collage_box_shadow }} ; --desktop-grid-columns: repetir( {{ section.settings.desktop_columns }} , {{ 100 | divided_by: section.settings.desktop_columns | append: " % " }} ); --tablet-grid-columns: repetir( {{ section.settings.tablet_columns }} , {{ 100 | divided_by: section.settings.tablet_columns | append: " % " }} ); --mobile-grid-columns: repetir ( {{ section.settings.mobile_columns }} , {{ 100 | divided_by: section.settings.mobile_columns | append: " % " }} ) " > { % para bloco na seção. blocos % } { % se bloco. configurações . link_da_imagem != em branco % } < um href = " {{ block.settings.image_link }} " class = "customBlock" título = " {{ block.settings.title }} " style = "proporção de aspecto: {{ section.settings.aspect_ratio }} ;" > { % outro % } < div href = " {{ block.settings.image_link }} " class = "customBlock" título = " {{ block.settings.title }} " style = "proporção de aspecto: {{ section.settings.aspect_ratio }} ;" > { % fim se % } < entrada tipo = "caixa de seleção" class = "zoom de imagem" id = "zoom- {{ forloop.index }} " nome = "zoom de imagem" onclick = "checkOnlyOne(este)" > < label for = "zoom- {{ forloop.index }} " style = "proporção de aspecto: {{ section.settings.aspect_ratio }} ;" > { %- tamanhos de captura -% } ( largura mínima : { { configurações. largura_da_página } } px ) { { configurações. largura_da_página | menos : 100 | dividido_por : 1,6667 } } px , ( largura mínima : 750px ) calc ( ( 100vw - 130px ) / 1,667 ) , calc ( ( 100vw - 50px ) / 1,667 ) { %- captura final -% } { % se bloco. configurações . colagem_imagem ! = em branco % } { { bloquear. configurações . colagem_imagem | URL_da_imagem : largura : 3840 | imagem_tag : carregando : 'preguiçoso' , largura : bloco. configurações . colagem_imagem . largura , altura : bloco. configurações . colagem_imagem . altura , classe : 'collageImage' , larguras : '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200' , tamanhos : tamanhos , título : bloco. configurações . título , alt : bloquear. configurações . colagem_imagem . alternativo - } } { % fim se % } </ rótulo > { % se bloco. configurações . link_da_imagem != em branco % } </a> _ { % outro % } </div> _ _ { % fim se % } { % fim para % } </div> _ _ </div> _ _ <roteiro> _ function checkOnlyOne ( caixa de seleção ) { var caixas de seleção = documento. getElementsByName ( 'zoom de imagem' ) caixas de seleção. forEach ( ( caixa ) => { caixa if ( caixa ! == caixa de seleção ) . verificado = falso } ) } </roteiro> _ <estilo> _ . customCollageContainer { margem : automática ; } . colagem personalizada { largura : 100 %; altura : 100 %; exibição : grade ; preenchimento : var ( -preenchimento superior - inferior ) var ( -preenchimento esquerdo - direito ) ; posição : relativa ; justificar - itens : centro ; alinhar - itens : centro ; justificar - conteúdo : centro ; grid - template - colunas : var ( -desktop - grid - colunas ) ; } . colagemImagem { largura : 100 %; altura : 100 %; ajuste ao objeto : capa ; raio da borda : 5px ; exibição : bloco ; } . bloco personalizado { largura : 100 %; altura : automático ; preenchimento : 0,5rem ; } entrada. imagem - zoom { Mostrar nenhum ; altura : 0 ; largura : 0 ; } . imagem - zoom : verificado + rótulo { posição : absoluta ; largura : 40 %; altura : automático ; inserção : 0 ; margem : automática ; preenchimento : 1vw ; fundo : branco ; box - shadow : 0 0 3vw var ( -collage - box - shadow ) ; } . customCollageImageTitle { Mostrar nenhum ; alinhamento de texto : centro ; posição : relativa ; superior : 50 %; esquerda : 50 %; altura da linha : 1,1 ; tamanho da fonte : clamp ( 12px , 2vw , 18px ) ; transformar : traduzir ( -50 % , -50 % ) ; peso da fonte : 700 ; } período. customCollageImageTitle . customCollageSecondImage { topo : 0 ; esquerda : 0 ; transformar : traduzir ( 0 %, 0 % ) ; margem superior : pinça ( 1rem , 4vw , 4rem ) ; } período. customCollageImageTitle . customCollageBottomImage { topo : calc ( 100 % -clamp ( 1rem , 4vw , 4rem ) ) ; esquerda : 0 ; transformar : traduzirY ( -100 % ) ; } . imagem - zoom : rótulo verificado. customCollageImageTitle { exibição : bloco ; } . customCollageTitle { alinhamento de texto : centro ; margem - inferior : 0 ; tamanho da fonte : clamp ( 15px , 5vw , 45px ) ; } Tela @media somente e ( largura máxima : 750px ) { . colagem personalizada { lacuna : 5px ; preenchimento : 10px ; grid - template - colunas : var ( -tablet - grid - colunas ) ; } } Tela @media somente e ( largura máxima : 481px ) { divisão . colagem personalizada { grid - template - colunas : var ( -mobile - grid - colunas ) ; } } </ estilo > { % esquema % } { "name" : "Colagem personalizada" , "configurações" : [ { "tipo" : "texto" , "id" : "custom_collage_title" , "label" : "Título da colagem personalizada" } , { "tipo" : "cor" , "id" : "título_texto" , "padrão" : "#f08080" , "label" : "Cor do texto do título" } , { "tipo" : "cor" , "id" : "collage_box_shadow" , "padrão" : "#f08080" , "label" : "Cor da sombra da caixa de colagem personalizada" } , { "tipo" : "selecionar" , "id" : "proporção_aspecto" , "opções" : [ { "valor" : "4/3" , "rótulo" : "paisagem" } , { "valor" : "3/4" , "rótulo" : "retrato" } , { "valor" : "1" , "rótulo" : "quadrado" } ] , "padrão" : "1" , "label" : "Proporção da imagem" } , { "tipo" : "intervalo" , "id" : "desktop_columns" , "min" : 2 , "máximo" : 20 , " passo 1 , "unidade" : "col" , "label" : "Número de colunas na área de trabalho" , "padrão" : 5 } , { "tipo" : "intervalo" , "id" : "tablet_columns" , "min" : 2 , "máximo" : 20 , " passo 1 , "unidade" : "col" , "label" : "Número de colunas no tablet" , "padrão" : 4 } , { "tipo" : "intervalo" , "id" : "colunas_móveis" , "min" : 2 , "máximo" : 20 , " passo 1 , "unidade" : "col" , "label" : "Número de colunas no celular" , "padrão" : 3 } , { "tipo" : "cabeçalho" , "content" : "Configurações da Galeria de Seções" } , { "tipo" : "intervalo" , "id" : "max_width" , "min" : 900 , "máximo" : 2400 , "passo" : 50 , "unidade" : "px" , "label" : "Largura máxima da galeria de seções" , "padrão" : 1200 } , { "tipo" : "intervalo" , "id" : "top_bottom_padding" , "min" : 0 , "máximo" : 200 , " passo 2 , "unidade" : "px" , "label" : "Preenchimento superior e inferior" , "padrão" : 0 } , { "tipo" : "intervalo" , "id" : "esquerda_direita_padding" , "min" : 0 , "máximo" : 200 , " passo 2 , "unidade" : "px" , "label" : "Preenchimento esquerdo e direito" , "padrão" : 0 } ] , "max_blocks" : 50 , "blocos" : [ { "nome" : "imagem de colagem" , "type" : "collage_image" , "configurações" : [ { "tipo" : "texto" , "id" : "título" , "label" : "Título da colagem" , "info" : "O título só aparece quando a imagem é pairada" } , { "type" : "image_picker" , "id" : "imagem_colagem" , "label" : "Imagem de colagem" } , { "tipo" : "url" , "id" : "image_link" , "label" : "Link da imagem" , "info" : "Deixe este link em branco se não quiser que as imagens sejam clicáveis" } ] } ] , "predefinições" : [ { "name" : "Colagem personalizada" } ] } { % termina o esquema % } |
4. Certifique-se de clicar em SALVAR.
5. Pronto! Tudo o que resta é personalizar sua galeria no editor de temas. O nome da seção é Colagem Personalizada, ao adicionar a seção em seu editor de tema.
É isso (",)