Custom Multicolumn with Image Viewer

Multicolunas personalizadas com visualizador de imagens

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: Todos os temas do Shopify (o design pode variar) .

O Multicolumn with Image Slider Viewer é um componente web versátil que combina um layout de várias colunas com um controle deslizante de imagem dinâmico. Ele permite que você apresente várias colunas de conteúdo junto com um controle deslizante de imagem interativo, melhorando o apelo visual e a experiência do usuário do seu site. Com opções personalizáveis ​​e design responsivo, ele se integra perfeitamente ao seu site, fornecendo uma maneira envolvente e organizada de exibir vários tipos de informações.

Você pode abrir o controle deslizante pop-up clicando na imagem do controle deslizante de várias colunas. Estas imagens são links de arquivos da sua página de administração > Conteúdo > Arquivos.

Você pode verificar a loja de demonstração aqui . Senha: made4uo

O que você está comprando:

  • Adicionar multicolunas com seção de visualizador de controle deslizante de imagem
  • Adicione várias imagens de seus arquivos

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. Na sua página de administração, vá para Loja online > Temas > Clique nos três pontos e em Editar código

2. Crie uma seção, arquivo líquido, e nomeie-o como quiser e, em seguida, substitua o código padrão pelo código abaixo. Certifique-se de SALVAR.


3. Vá para a pasta Asset e crie um arquivo CSS com o nome “ custom-multicolumn ” e cole o código abaixo. Certifique-se de SALVAR.

4. Na mesma pasta, Asset, encontre theme.js ou global.js (seu arquivo javascript principal para o seu tema).

5. Adicione o código abaixo no final do arquivo e salve.




6. Personalize seu tema e adicione o visualizador de imagens multicolunas seção.

Para que as imagens apareçam:

1. Na página Admin, vá para Conteúdo e depois Arquivos

2. Clique no link, Link do arquivo para obter os links das imagens.

3. Em seu editor de temas, encontre a visualização de imagem Multicolumn e clique no bloco ou coluna.

4. Coloque os links de imagem dentro dos links de imagem do arquivo do seu site e certifique-se de separá-los com vírgula (,) e sem espaço entre eles .

É isso ('',)

Copied!
Voltar para o blogue

2 comentários

Hi Nevena Ljubinkovic You should have a hover. If the code is not working, please contact us using “Chat with Made4Uo” for prompt reply.

Made4Uo

I don’t have the hover?!

Nevena Ljubinkovic

Deixe um comentário