Popular Articles

  1. Como carrego uma imagem?

    A imagem deve ser carregada dentro da pasta static e utilizada da seguinte forma: {{ "imagem.png" | static_url | img_tag("Texto alternativo da imagem") }} No código acima imagem.jpg é o nome do arquivo d...
  2. Botão de contato por meio do WhatsApp

    Neste tutorial, te ensinamos a implementar o botão que possibilita o contato com o administrador da loja, pelo WhatsApp: HTML 1. Crie o arquivo whatsapp-chat.tpl dentro da pasta snipplets com o seguinte conteúdo: {% if store...
  3. Banners informativos

    Neste tutorial vamos adicionar banners informativos, basicamente eles são banners que contêm: Um ícone Um título Um texto Um link (opcional) Temos um total de 7 banners para mensagens diferentes: Frete Cart&otild...
  4. Snipplet, include y embed

    Usando o Twig, podemos incluir snipplets, que são os arquivos “.tpl” dentro da pasta com o mesmo nome, de três maneiras. Isso nos dá a possibilidade de reutilizar o mesmo componente em mais de um lugar, otimizando o ...
  5. Product

    Este objeto traz as informações referentes aos produtos da loja. brand: Nome da marca do produto. name: Nome do produto. price: Preço do produto em centavos (dessa forma, se o preço for de R$100,00 o valor de price se...
  6. Como carrego um javascript?

    O arquivo javascript deve ser colocado dentro da pasta static e ser utilizado de uma forma semelhante ao do CSS e das imagens: {{ 'js/script.js' | static_url | script_tag }} ...
  7. Como mostrar menus de navegação no meu layout?

    Dentro do seu administrador você pode criar menus para incluir links que podem ser categorias, páginas de conteúdo, links externos etc. Estes menus podem ser independentes ou podem serem incluídos em outros menus como sub...
  8. Barra de categorias na página inicial

    Neste tutorial vamos adicionar um componente na página inicial para mostrar as categorias. HTML A primeira coisa que vamos fazer é criar as pastas home e navigation dentro da pasta snipplets, se você ainda não as tive...
  9. Templates | Pasta

    Nesta pasta vão os códigos html específicos de cada tela. Lembre-se que você não precisa abrir uma tag <html> aqui, pois esses arquivos vão ser carregados dentro do layout.tpl, que já possui esse...
  10. Como adaptar o zoom de produtos para dispositivos móveis

    Com a crescente prolifeiração de dispositivos móveis, muitas das interações de nossos websites precisam ser reformuladas. Uma delas é o evento "hover" . Ele é a ação de posici...