Popular Articles

  1. Scroll Híbrido

    Neste artigo veremos como criar a funcionalidade de scroll híbrido nas páginas da categoria e nos resultados da pesquisa. Mas o que é um scroll híbrido? Basicamente, misture as experiências de: Um scroll infin...
  2. Snipplets

    Snipplets são as menores unidades de HTML dentro de um modelo e são encontrados dentro da pasta com o mesmo nome. Eles representam componentes isolados que podem ser incluídos em um ou vários locais da loja, como o item ...
  3. Melhorando o carregamento das imagens e SVGs

    O primeiro e mais importante passo para melhorar a velocidade de carregamento de um site são as imagens. Se você ainda não sabe como medir a velocidade do seu site, o seguinte artigo pode te ajudar: Medindo a velocidade do seu...
  4. QuickShop

    Neste tutorial veremos como adicionar um pop-up com o formulário do produto, que pode ser visto no item da lista de produtos. HTML 1. A primeira coisa que vamos fazer é criar um novo snipplet chamado quick-shop.tpl dentro da p...
  5. Informação de meios de pagamento e parcelas

    Neste tutorial, vamos adicionar visibilidade aos meios de pagamento e parcelas em seu design: O código neste tutorial inclui: Parcelas na lista de produtos, detalhes do produto e carrinho (aplica-se apenas em lojas no Brasil) Modal que mo...
  6. Objetos

    Objetos são variáveis determinadas pela plataforma. E cada objeto tem diferentes atributos que são separados por um ponto. Podemos chamar esses objetos de duas maneiras: {% ... %} y {{ ... }} . O primeiro é usado para...
  7. 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...
  8. Como carrego uma folha de estilos (CSS)?

    A folha de estilos deve ser colocada dentro da pasta static e utilizada da seguinte forma: {{ "css/style.css" | static_url | css_tag }} As folhas de estilos também podem ser arquivos .sass ou .tpl. Se a folha de estilos ...
  9. Validação de usuários registrados

    Queremos verificar se o usuário insere seu e-mail real, adicionando uma instância de validação através de um link que enviaremos para o e-mail que foi inserido. As alterações que descrevemos neste ...
  10. Como mostrar a lista de produtos?

    {% for product in products %} <div class="produto"> {{ product.featured_image | product_image_url("medium") | img_tag(product.name) | a_tag(product.url) }} <h3>{{ product.name }}</h3> {% if...