gallery image section

Adicionando uma seção da galeria do Shopify em sua página

Log in or Sign up to ensure access to purchased code across multiple devices.

Como ver o código

1. Faça login/crie uma conta primeiro. Isso é para garantir que todas as compras estejam conectadas a uma conta e possam ser visualizadas em diferentes dispositivos.

2. Adquira o código através da “caixa de compras” na página específica do código desejado.

3. Após a compra, atualize a página.

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!
Voltar para o blogue

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

Made4Uo

hello i recently bought this code but how to i change the layout and the overall grid size?

Milo

Could you add a title and some text over the images?

Matt

Hi @AMY RANESES,

There is a link option for this. Just go to the theme settings

Made4Uo

is it possible that the images are connected to links? different links for different images? thanks

Amy Raneses

Deixe um comentário