Entrar
Documentação

Desenvolvedores

Editor HTML

Crie páginas próprias com HTML, CSS, JavaScript e componentes prontos.

O Editor HTML cria páginas soltas na sua loja, como uma landing page ou um "quem somos". Para redesenhar a loja inteira, use o sistema de temas.

Criar uma página#

  1. Abra Customizar#

    No painel, clique em Customizar, o ícone de pincel na coluna da esquerda.

  2. Crie a página#

    Em Páginas, clique em Criar e informe o caminho, como /promocao. Para substituir a página inicial da loja, use /.

  3. Escreva o conteúdo#

    O editor tem três abas: HTML, CSS e JS. Cole o seu código e os componentes que quiser.

  4. Salve#

    Salvar publica na hora, e a página abre no endereço da loja.

O que dá para colocar#

Campo Regra
Caminho Letras minúsculas, números, -, _ e /. Até 160 caracteres. / é a home.
Título Até 200 caracteres. Vai para a aba do navegador.
HTML Até 500 mil caracteres.
CSS e JS Até 200 mil caracteres cada.
Publicada Rascunho não aparece na vitrine.
Produtos e categorias Até 200 produtos e 100 categorias, usados por COMPONENT_PRODUCTS_CARDS.

Cada loja pode ter até 100 páginas.

Assistente de IA#

Na aba Assistente, ao lado do editor, descreva em português o que você quer na página, como "monta uma página sobre a loja com um botão para os produtos". A IA escreve o HTML, o CSS e o JS e mostra a proposta.

Nada muda até você clicar em Aplicar na página, e Desfazer volta ao código anterior. Cada pedido gasta uma cota, a mesma do assistente da Customização.

A IA parte da versão salva: salve o que estiver editando antes de pedir. Por segurança, ela não cria formulário nem campo de digitação, e não usa script ou imagem de outros sites.

Caminhos reservados#

Estes caminhos, e tudo abaixo deles, são do sistema e não podem ser usados:

cart, checkout, order, login, account, product, category, categories, terms, api, uploads, _next, affiliate, chat.

Usar Liquid na página#

Se o HTML tiver {{ ou {%, ele passa pelo motor de Liquid, com acesso às variáveis da loja:

Liquid
<h1>{{ store.name }}</h1>

{% for product in catalog.products limit: 3 %}
  <a href="/product/{{ product.slug }}">{{ product.name }}: {{ product.price | money }}</a>
{% endfor %}

Veja a sintaxe do Liquid e as variáveis disponíveis.

CSS e JS em todas as páginas#

Em Customizar, a seção Scripts globais aceita CSS e JavaScript aplicados em todo o site, até 200 mil caracteres cada. É o caminho para ajustar páginas do sistema, que não têm editor de HTML.

Pontos fixos da vitrine#

Use [data-store="nome"] nos seletores. As classes visuais mudam sem aviso, e estes nomes não: main, announcement, header, logo, search, menu, cart-button, hero, section, section-title, category-card, products, product-card, product-image, product-name, product-price, product-old-price, product-badge, product-button, product-page, product-title, buy-button, add-cart-button, description, review-card, cart-page, post-purchase-offer (a oferta da página do pedido pago), footer, whatsapp, chat-button, social-proof (o aviso de compra recente), recent-buyers, server-goal e top-donors (a meta e o ranking das lojas de jogo).

Na página inicial, cada section traz o tipo em data-section: products, categories, reviews, benefits, faq, text ou goal.

JavaScript que depende da página#

A loja troca de página sem recarregar, e o JavaScript global roda uma vez só. O que muda em cada tela precisa rodar de novo:

JavaScript
function aplicar() {
  // mexe na tela atual
}

aplicar();
window.addEventListener('promisse:navigate', aplicar);

Não remova elementos da loja com .remove() ou innerHTML: esconda com CSS. Para acrescentar, crie um elemento seu.

Assistente de IA#

Em Customizar, o Assistente de IA escreve o CSS e o JavaScript a partir do que você pedir em português. A proposta só vai para a loja quando você clica em Aplicar na loja, e Desfazer volta ao código anterior.

Cada pedido gasta 1 cota, seja qual for o tamanho. Toda conta começa com 50 cotas grátis. Depois disso, cada cota desconta R$ 0,10 de uma recarga feita por Pix ali mesmo, a partir de R$ 1. Pedido que dá erro não gasta cota.

A IA não escreve código que colete dados do comprador, fale com outros sites ou invente informação, como avaliações e contadores falsos.

Prioridade#

Quando existe um tema publicado, uma URL é procurada primeiro nas rotas do tema e depois nas páginas personalizadas. Se o Tema personalizado estiver desligado em Customizar, a vitrine usa o tema padrão e as páginas personalizadas não são exibidas.

Rotas do sistema, como carrinho e checkout, nunca chegam às suas páginas.

Quando a alteração aparece#

Salvar no painel atualiza a página na hora. Mudança de produto ou categoria leva até cerca de 1 minuto para aparecer nas páginas com Liquid, por causa do cache.