Compatibilidade: compatível com a maioria dos temas do Shopify, do Debut ao Dawn 2.0
Se você deseja tornar seu site do Shopify mais atraente visualmente e destacar uma coleção de imagens, adicionar uma seção de galeria pode ser uma solução eficaz. Embora o novo tema Shopify 2.0 Dawn tenha uma seção de colagem integrada, ele é limitado a apenas três itens. Neste tutorial, mostraremos como criar uma seção de galeria mais abrangente com até 11 fotos apenas.
No entanto, se quiser exibir mais imagens ou espaçá-las igualmente, você precisará usar uma galeria de imagens múltiplas .
Usando a grade CSS, criaremos um layout que permite reposicionar imagens facilmente e personalizar a grade para atender às suas necessidades. Ao nomear cada área da grade de acordo com o índice do bloco, você poderá mover as imagens e experimentar diferentes layouts no editor de temas do Shopify.
Quer você queira apresentar produtos, eventos ou qualquer outro conteúdo visual, uma seção de galeria é uma ótima maneira de captar a atenção do seu público e tornar seu site mais dinâmico. Siga estas instruções passo a passo para adicionar uma seção de galeria impressionante ao seu site Shopify hoje mesmo.
No vídeo, abordaremos o seguinte:
- Criando um modelo para sua seção de galeria
- Nomeando as áreas da grade para facilitar o posicionamento no editor de temas
- Configurando as áreas de grade usando forloop.index para corresponder ao posicionamento do bloco
- Posicionando imagens no centro usando posição absoluta
- Corrigindo o jitter CSS para uma experiência de usuário tranquila
- Usando font-size clamp() para garantir tamanhos de fonte responsivos
- Criando um arquivo CSS separado e vinculando-o à sua seção
Vale ressaltar que fizemos diversas atualizações e adicionamos mais opções de customização ao código desde que o vídeo tutorial foi gravado. Como tal, o código que você verá abaixo pode ser diferente do que você verá no vídeo. Por favor, siga as instruções escritas.
Você também pode verificar a loja de demonstração para a seção de imagens da galeria com senha, made4uo.
Criei diversas galerias de imagens que você pode gostar, veja a seguir:
O que você está comprando:
- Código atualizado que não precisa passar por cima do vídeo
- Opção de imagem clicável disponível
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 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. A princípio pensei que uma imagem clicável fosse impossível com o foco. Consegui adicionar uma opção para tornar a imagem clicável.
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.
Atualizações: 30/08/22 Adicionada uma opção para alterar a sombra da caixa, as cores do texto e tornar a imagem clicável se o link for fornecido. Também adicionei um texto que será exibido quando a imagem passar o mouse.
É isso (",)
Copied!
7 comentários
Hi @Mili,
The layout and grid is set up already with template areas. Changing the layout and grid size, might have to change the CSS codes as well. Please do not hesitate to contact us using “Chat with us” to better assist you
hello i recently bought this code but how to i change the layout and the overall grid size?
Could you add a title and some text over the images?
Hi @AMY RANESES,
There is a link option for this. Just go to the theme settings
is it possible that the images are connected to links? different links for different images? thanks