Olá pessoal, em alguns casos vamos precisar criar conteúdos mais elaborados em nossas lojas, e uma galeria de imagens pode ser útil para usar na descrição de produtos ou até mesmo em uma área personalizada que vai na página inicial ou uma página de conversão de vendas, neste artigo ou mostrar como podemos fazer duas inserções de códigos e usar o editor de texto da loja para criar uma galeria de imagens que ao clicar na imagem ela amplia, bora lá!

Adicionado códigos Avançados

Primeiro vamos colocar dois códigos avançados na loja, que serão responsáveis por fazer o efeito de “ampliar” na loja, então acesse o menu de Customização > Personalizar ao entrar na tela vamos na aba de Avançado, agora na parte de CSS e JAVASCRIPT vamos colocar dois códigos, mas MUITA ATENÇÃO aqui, sempre que tiver códigos nesta parte, coloque na última linha de cada um, como mostra a imagem abaixo, tanto para o CSS quanto para o JAVASCRIPT :

Caso tenha dúvida contate nossa equipe de suporte, agora vamos aos códigos:

CSS

.tabela-imagens img{cursor: pointer;}

JAVASCRIPT

$(function(){
	$('.tabela-imagens img').click(function(){
		var url_image = $(this).attr('src');
		$.colorbox({
			rel: 'phot_event',
			transition: 'fade',
			href: url_image,
		});
	});
});

Copie exatamente como os dados acima, sempre na última linha, se não tem código vai ficar como na imagem abaixo:

Criando tabela de imagens

Agora vamos criar a tabela e colocar as imagens, neste meu exemplo vou criar uma Página Institucional (Menu: Customização > Área Personalizadas) , dentro dela vou criar uma tabela com 6 colunas e 2 linhas, colocar ela com 100% e antes de salvar e adicionar ela na página, vamos na aba de Avançado e adicionar no campo Classes o nome tabela-imagens da forma que escrevemos no CSS lá.

Ao criar coloque as imagens em cada célula, se quiser saber mais sobre tabelas e como organizar o conteúdo veja este artigo.

Dica: Em relação ao tamanho das imagens, suba a imagem com no máximo 900x900px, isso é um bom tamanho para quando ela for ampliada, e quando colocar a imagem dentro da tabela tente colocar uma largura de 250 a 400px, isso vai dar para colocar de 6 a 4 imagens bem encaixadas no desktop e no mobile também vai ficar legal o tamanho, mas lembre-se que por padrão vai ficar uma em cima da outra ok?!

Veja como ficou a minha tabela de exemplo:

Agora só salvar e abrir a página que criei para testar, e pronto temos uma galeria de fotos que amplia na descrição da minha página.

Espero ter ajudado, qualquer dúvida conte nossa equipe de suporte, até mais!