Como montar a sua loja no Estúdio

O Estúdio é onde você monta a aparência da loja virtual: arrasta seções e elementos, ajusta cores, fontes e tamanhos, vê como fica no computador, no tablet e no celular, e só então publica. Tudo o que você muda vai para um rascunho — a loja no ar continua igual até você clicar em Publicar.

Abra pelo menu Loja Virtual → Estúdio.

Antes de começar

• Use um computador. No celular o Estúdio abre só para ver a loja, publicar e mexer em Dados; para editar o layout a tela avisa "Para editar o layout, use um computador."
• A loja precisa de endereço. O centro do Estúdio é a sua própria loja, aberta numa moldura. Sem domínio verificado aparece o aviso para verificar um em Loja Virtual → Domínios & Email; enquanto isso, dá para editar pelos painéis.
• Permissões. Ver o Estúdio, editar o layout, publicar e exportar são permissões separadas no papel do usuário. Quem só pode ver navega pelas páginas e pelas versões, mas não altera nada. Restaurar uma versão antiga exige a permissão de publicar.

1. Conheça a tela

• Barra do topo — o seletor Página, os tamanhos Desktop, Tablet e Celular, a largura do canvas no desktop (1200, 1440 e 1920 mostram a loja em telas largas — a edição continua no Desktop), o zoom (Ajustar à tela), desfazer e refazer, o estado do rascunho, Pré-visualizar, Publicar e Mais ações.
• Trilho da esquerda — Páginas, Camadas, Inserir, Mídia, Estilo, Dados, Bel e Problemas. O painel aberto pode ser alargado: arraste a borda direita dele (por exemplo, para preencher os Dados com folga) e estreite de volta para ganhar loja; duplo clique na borda volta à largura padrão. Enquanto o Estúdio está aberto, o menu do painel fica recolhido em ícones.
• Centro — a loja de verdade, com os seus produtos. Clique num elemento para selecionar; o contorno azul mostra a seleção. Clicar no cabeçalho, no corpo ou no rodapé troca o que você está editando: a faixa Editando: Cabeçalho no topo mostra onde você está, e Editar a página volta ao corpo.
• Direita — as propriedades do elemento selecionado, nas abas Conteúdo, Layout, Estilo, Dados, Interações e Visibilidade. As que não cabem na largura ficam no botão … ao lado das abas.

2. Escolha a página

No seletor Página do topo (ou no painel Páginas) você troca entre as páginas da loja, em grupos: Loja (Página inicial, Cabeçalho, Rodapé, departamento, categoria, busca…), Produto, Compra (carrinho e checkout), Conta, Blog e Outras — além das páginas institucionais. Cabeçalho, rodapé e a Barra de aviso valem para a loja inteira; a barra de aviso aparece na loja acima do cabeçalho.

Algumas páginas cobrem mais de uma tela da loja:

• Entrar e cadastro vale também para esqueci a senha, redefinir a senha, confirmar o e-mail e reivindicar a conta;
• no grupo Blog, a página Blog é a lista de posts e o Post do blog é o modelo de cada post. No Estúdio, o Post do blog mostra o post mais recente da loja.

As telas públicas fora da vitrine (a do termo de garantia, a de descadastro do WhatsApp e a de entrar) usam o fundo do tema da loja.

As páginas institucionais (Sobre nós, Trocas, Política de Privacidade…) ficam no painel Páginas: Nova página cria uma, e a engrenagem configura o título, o endereço, o texto para buscadores e a chave Mostrar no rodapé. Desligada, a página continua no ar pelo endereço, mas some do rodapé. O número de páginas institucionais que você cria segue o limite do seu plano.

No painel Páginas, o selo Clássico marca as páginas que ainda usam o layout padrão da loja.

Cabeçalho e rodapé

O cabeçalho e o rodapé começam no layout Clássico: um bloco pronto, com tamanho fixo por dentro. Nele você muda as cores (no painel Estilo) e, no cabeçalho, o Espaço entre os ícones (px) de favoritos, carrinho e conta (aba Conteúdo do bloco).

Para mudar peça por peça, selecione o bloco e clique em Personalizar cabeçalho (ou Personalizar rodapé). Ele vira peças soltas — logo, busca, favoritos, carrinho, conta e menu de departamentos —, com os ícones já num grupo próprio. Cada peça tem as próprias opções em Conteúdo:

• Busca — estilo do campo (contorno, preenchido, sublinhado ou pílula), altura, cantos, cores e o botão (ícone, texto ou os dois);
• Favoritos, Carrinho e Conta — o ícone, o tamanho e a cor, o rótulo (ao lado ou embaixo), a forma (sem fundo, círculo, quadrado ou pílula) e o selo de quantidade;
• Menu de departamentos — em Exibição, o Mostrar como (Barra com os departamentos ou Só o botão (abre a gaveta)), o alinhamento, o espaço e o texto. Sem escolher, ele é barra no computador e gaveta no tablet e no celular.

O menu de departamentos e as colunas do rodapé são dinâmicos: mostram os departamentos e as páginas que a loja tem cadastrados. Para mudar o que aparece neles, cadastre ou edite os departamentos; o Estúdio muda só a aparência.

Voltar ao Clássico desfaz a personalização (pede confirmação; o Ctrl+Z também volta).

3. Insira e organize os elementos

A página é feita de bandas (faixas de largura total, uma embaixo da outra), e dentro delas ficam os elementos: título, texto, imagem, botão, grade de produtos, carrossel de banners, newsletter e outros.

• Inserir lista os elementos por grupo (Estrutura, Básico, Comércio, Marketing e confiança e, para quem tem a permissão de HTML, Avançado). Clique para inserir depois do elemento selecionado, ou arraste para o ponto exato da loja — a linha azul mostra onde ele vai entrar.
• Camadas mostra a árvore da página. Clique para selecionar; o olho esconde o elemento no tamanho de tela aberto.
• Mover: arraste o elemento pela loja. Por padrão ele fica No fluxo — um embaixo do outro, e a página cresce sozinha quando a grade de produtos aumenta. Em Layout → Posição, Livre solta o elemento para ficar por cima dos outros dentro da banda (um selo sobre o banner, um texto sobre a imagem), com X, Y, giro e camada.
• Agrupar: selecione vários elementos lado a lado com Shift+clique e clique em Agrupar (ou Ctrl+G). Eles viram um grupo com espaço só deles — por exemplo, para aproximar os ícones do cabeçalho sem apertar o logo e a busca. O grupo já sai selecionado: ajuste o espaço na aba Layout.
• Deixar tudo livre: em Camadas, passe o mouse num grupo ou numa banda e clique no ícone de mover da linha. Todos os elementos de dentro passam para Livre, cada um onde está na tela, e você arrasta cada um para onde quiser. Vale só para o tamanho de tela aberto — o tablet e o celular continuam organizados. O mesmo lugar oferece Voltar ao fluxo.

Atalhos: Ctrl+Z desfaz e Ctrl+Shift+Z refaz — também com o cursor dentro de um campo das propriedades; Delete apaga; Ctrl+D duplica; Ctrl+C e Ctrl+V copiam e colam (inclusive para outra página); Ctrl+G agrupa; Esc seleciona o elemento de fora. As setas posicionam o elemento selecionado: no fluxo, ele troca de lugar com o vizinho (← e → numa linha, ↑ e ↓ numa coluna) e, numa grade, anda uma célula; um elemento Livre anda 1 px (com Shift, 10 px).

Carrossel de banners

O Carrossel de banners mostra os banners cadastrados da loja (Marketing → Campanhas → Banner Carrossel). Na aba Conteúdo dele:

• Largura — Dentro do conteúdo (com espiada dos vizinhos), o padrão, ou Página toda (borda a borda), um banner por vez ocupando a tela inteira. Ao escolher Página toda, a banda do carrossel também passa a ir de borda a borda;
• Altura no desktop (px) — no tablet e no celular a altura segue a padrão.

Sem nenhum banner cadastrado, o carrossel mostra "Seus banners aparecerão aqui". Uma imagem gerada pela IA pode virar banner da loja direto no Estúdio (veja Como usar a Bel no Estúdio).

4. Edite conteúdo, layout e estilo

Selecione o elemento e use as abas da direita:

• Conteúdo — textos, links, imagens e opções do elemento. Dê duplo clique num título, texto ou botão para escrever direto na loja.
• Layout — largura e altura (Fixa (px), Preencher (100%) ou Ajustar ao conteúdo), espaço entre os filhos e margem interna. Com Preencher ou Ajustar, a Largura máxima fica ao lado (ex.: preencher até 1200 px) e Centralizar centraliza o elemento no bloco de fora. Arrastar a borda do elemento até a borda do bloco de fora grava Preencher em vez de pixels (segure Alt ou Shift para não encaixar). Na posição Livre, também X e Y (aceitam valor negativo, para sair um pouco pela esquerda ou pelo topo), as âncoras, o giro e a camada. Os blocos do layout Clássico mostram "Este bloco tem layout fixo. Para mudar tamanhos e posições peça a peça, use Personalizar."
• Estilo — fundo, cor do texto, borda, cantos, sombra, opacidade e fonte. Nos campos de cor, as Cores da loja aparecem primeiro: usando-as, o elemento acompanha quando você troca a cor principal.
• Dados — de onde a grade ou o carrossel de produtos tira os itens (destaques, promoções, um departamento, uma categoria, uma marca, os mais vendidos ou Escolhidos a dedo).
• Interações — animações do elemento (veja Animações).

As cores, as fontes, a tipografia, os cantos e o estilo dos botões da loja inteira ficam no painel Estilo do trilho (Estilo da loja).

5. Ajuste para tablet e celular

Toda edição grava no tamanho aberto no topo. O Desktop é a base: o Tablet herda do desktop e o Celular herda do tablet, até você mudar alguma coisa ali.

Quando um campo foi mudado só no tamanho aberto, ele ganha o ponto azul Alterado neste tamanho e o botão Voltar ao herdado, que desfaz a diferença. Na aba Visibilidade você esconde um elemento num tamanho — esconder num tamanho também esconde nos menores, a menos que você mostre de novo.

6. Itens obrigatórios

Alguns elementos fazem a loja funcionar e não podem sair: no Cabeçalho, Logo, Busca, Carrinho, Favoritos, Conta e Menu de departamentos; no Rodapé, Links de políticas e Identificação legal; nas páginas institucionais, o Título da página. As páginas da loja também têm os seus: no produto, a galeria, o nome, o preço e o botão de comprar; no carrinho, os itens, o resumo e o finalizar; no checkout, a identificação, a entrega, o pagamento e o concluir pedido; nas listas, os filtros, a ordenação e a paginação; no blog, a Lista do blog e o Post do blog. No layout padrão, os do cabeçalho e do rodapé vêm juntos nos blocos Cabeçalho e Rodapé; personalizados, cada peça aparece com cadeado em Camadas e pode mudar de lugar, de grupo e de estilo.

Você muda à vontade o estilo, a posição e o tamanho deles, mas não apaga nem esconde: não há lixeira, o olho fica desligado, e opacidade abaixo de 0,2 conta como escondido — inclusive a opacidade em que uma animação deixa o item (veja Animações). Publicar também recusa um obrigatório repetido na mesma página.

7. Confira o painel de Problemas

O painel Problemas lista o que precisa de atenção. Clique num item para ir direto ao elemento, na página e no tamanho de tela do problema.

• Erros bloqueiam a publicação — por exemplo, item obrigatório oculto ou repetido, um obrigatório em posição Livre com o centro fora da banda, uma animação que deixa um obrigatório invisível ou que aponta para um elemento que não está na página, e mais de 60 animações numa página. Se o rascunho vem de um template que a loja ainda não comprou, o erro "O rascunho usa o template …, que a loja ainda não comprou" abre a compra (veja Como experimentar e comprar templates).
• Avisos não bloqueiam, mas a loja fica melhor sem eles: imagem sem texto alternativo, contraste baixo entre o texto e o fundo (o mínimo é 4,5:1), fonte menor que 12 px no celular, botão menor que 44 px no celular, elemento que passa da largura da tela, elemento livre que sai da banda e "O tamanho deste bloco não muda o conteúdo" (um bloco do layout Clássico com tamanho gravado: Remover tamanho fixo limpa).

Os avisos de tamanho e posição são medidos na página e no tamanho de tela abertos: troque para Celular para ver os do celular.

8. Rascunho, pré-visualizar e publicar

O Estúdio salva sozinho, um instante depois de cada mudança. O topo mostra Salvando…, Salvo agora ou Erro ao salvar (com Tentar de novo).

Se outra pessoa (ou você, em outra aba) salvou o mesmo rascunho, aparece o aviso "Este rascunho foi alterado em outra aba ou por outra pessoa": Recarregar continua do que está salvo; Sobrescrever grava o que está na sua tela por cima.

Pré-visualizar abre o rascunho numa aba nova, no endereço da loja. O link pode ser enviado para alguém conferir e vale por 24 horas.

Publicar coloca o rascunho no ar. A Nota da versão (opcional) ajuda a achar a versão depois (ex.: "Banner da Black Friday").

Se você mudou o texto da Política de Privacidade ou dos Termos de uso, o diálogo mostra a caixa "Mudança relevante … pedir novo aceite aos clientes", já marcada: os clientes aceitam a nova versão no próximo acesso. Desmarque só para correções que não mudam o sentido, como um erro de digitação.

9. Versões, modelos e JSON

Em Mais ações:

• Versões — as 20 últimas versões publicadas, com quem publicou, quando e a nota. Restaurar carrega a versão no rascunho, nunca direto no ar: confira e publique. Descartar rascunho volta o rascunho a ser igual à loja no ar.
• Meus modelos — guarde um layout para reaproveitar: Salvar rascunho como modelo (ou, numa versão, Salvar como modelo). São até 10 modelos; Aplicar substitui o rascunho pelo modelo.
• Exportar JSON e Importar JSON — levam o layout para um arquivo e trazem de volta. O arquivo tem limite de 2 MB. Se o arquivo não tiver um item obrigatório, ele é reinserido e o Estúdio avisa.
• Começar do zero — o cabeçalho, o rodapé e a página inicial ficam só com os itens obrigatórios, com as cores e fontes atuais; as outras páginas da loja voltam ao Clássico e as páginas institucionais ficam como estão. Também desliga o rascunho de um template que você estava experimentando.

Para trocar o layout inteiro por um template pronto, use Loja Virtual → Templates: o template escolhido também entra no rascunho. Quando a Belion publica uma versão nova de um template que a loja tem, uma faixa no topo do Estúdio oferece Ver novidades e Carregar no rascunho.

O design inteiro também tem limite de 2 MB: passando disso, o rascunho não salva até você remover elementos.

10. Mídia e dados da loja

Mídia é a biblioteca de imagens e vídeos da loja. Imagens em JPG, PNG, GIF, WebP, SVG ou ICO até 5 MB; vídeos de fundo em MP4 ou WebM até 20 MB. Em Editar nome e texto alternativo você descreve a imagem para quem usa leitor de tela e para os buscadores. Uma mídia em uso (no rascunho, na loja no ar, numa versão guardada ou num modelo) não pode ser excluída — a tela mostra onde ela aparece.

Dados é o que antes ficava em Personalização: a chave Loja virtual no ar, Marca, Contato, Horário de atendimento, Redes sociais, Frete grátis, Retirada na loja, Recebedor Pagar.me (obrigatório) e Rastreamento & Analytics. Esses campos não fazem parte do rascunho: valem quando você clica em Salvar alterações.

Em Marca, Pedir a logo à Bel e Pedir o favicon à Bel pedem a imagem à IA (veja Como usar a Bel no Estúdio). A logo ou o favicon que a Bel cria vai para o rascunho, não direto para o cadastro: enquanto isso aparece o cartão Logo nova no rascunho (ou Favicon novo no rascunho), e ela passa a valer na loja, e no cadastro, quando você publicar o design.

11. Animações

Na aba Interações de qualquer elemento você dá movimento a ele: surgir ao aparecer na tela, subir, aproximar, flutuar sem parar, um efeito de Parallax enquanto a página rola, ou um salto ao passar o mouse.

1. Selecione o elemento e abra a aba Interações.
2. Clique em Adicionar animação e escolha um efeito na galeria (cada um mostra uma miniatura do movimento).
3. Ajuste Quando anima: Ao carregar, Ao aparecer na tela, Durante o scroll, Ao passar o mouse, Ao clicar ou Contínuo.
4. Ajuste Duração, Atraso, Ritmo e Repetições. Repetir sem parar só existe no Contínuo; Animar só na primeira vez só em Ao aparecer na tela; em Durante o scroll você escolhe a Faixa da tela em que a animação anda.
5. Em Ao passar o mouse e Ao clicar, o Elemento animado pode ser outro elemento da mesma página: escolha na lista ou clique em Escolher no canvas e depois no elemento (Esc cancela). Em Camadas, um raio marca quem tem animação e quem é animado por outro.
6. Em Anima em, desligue a animação num tamanho de tela (por exemplo, o Parallax no Celular).
7. Clique em Pré-visualizar (o botão de play) para ver o movimento na loja do Estúdio.

Linha do tempo. Cada animação tem pontos numa linha de 0% a 100%. Clique num ponto para mudar Opacidade, Escala, Deslocar X/Y (aceitam negativo), Giro e Desfoque naquele momento; Adicionar ponto cria um no meio e você arrasta os do meio (o primeiro fica no início e o último no fim). Mexer na linha do tempo transforma o efeito em Personalizado.

Limites:

• até 4 animações por elemento, 60 por página e 8 pontos por linha do tempo;
• duração e atraso até 10 segundos, e até 20 repetições;
• um item obrigatório pode animar, mas não pode terminar invisível: se a animação deixa a opacidade dele abaixo de 0,2 — no fim, ou em qualquer ponto quando ela é Contínuo ou Durante o scroll — o painel Problemas mostra "A animação deixa um item obrigatório invisível" e a publicação fica bloqueada.

Quem pediu menos movimento no sistema (a opção de acessibilidade do celular ou do computador) vê o estado final, sem animação.

Duplicar ou copiar um elemento leva as animações junto; se o elemento animado estava dentro da cópia, a cópia passa a animar a cópia dele.

Perguntas comuns

Mudei o layout e a loja não mudou. Tudo vai para o rascunho. Clique em Publicar.

O botão Publicar diz para resolver os erros. Abra Problemas e clique em cada erro: ele leva ao elemento. Os avisos não impedem a publicação.

Restaurei uma versão e a loja continua igual. Restaurar carrega a versão no rascunho. Publique para ela ir ao ar.

Cliquei em Publicar e abriu uma compra. O rascunho vem de um template ainda não comprado. Compre para publicar, ou use Começar do zero ou outro template.

Não consigo apagar o carrinho do cabeçalho. É um item obrigatório: você pode mudar o estilo, o tamanho e a posição, mas ele fica.

Os ícones do cabeçalho estão longe um do outro. No Clássico, use o Espaço entre os ícones (px) do bloco. Personalizado, selecione o grupo dos ícones (ou agrupe-os com Shift+clique e Agrupar) e diminua o espaço na aba Layout.

O menu mostra categorias que eu não cadastrei. O menu de departamentos mostra só o que está cadastrado. Se aparece um menu de links à parte (por exemplo, criado pela IA), apague esse bloco em Camadas.

O carrossel diz "Seus banners aparecerão aqui". A loja ainda não tem banners ativos: cadastre em Marketing → Campanhas → Banner Carrossel, ou gere uma imagem com a IA e use Usar como banner da loja.

Mudei o tamanho do cabeçalho e nada mudou por dentro. O cabeçalho Clássico tem layout fixo. Use Personalizar cabeçalho para mudar peça por peça.

No celular ficou diferente do computador. Abra o tamanho Celular e ajuste ali; o que você mudar só no celular fica marcado com Alterado neste tamanho.

A animação não aparece no celular. Confira Anima em na aba Interações: ela pode estar desligada no Celular. Quem ativou "reduzir movimento" no aparelho também vê o elemento parado, no estado final. O botão Pré-visualizar da aba toca a animação mesmo assim, para você conferir.

Onde foi parar a Personalização? Virou o painel Dados do Estúdio. O endereço antigo da Personalização abre o Estúdio direto nele.

Continue

• Como experimentar e comprar templates — escolha um layout pronto, experimente no rascunho e compre.
• Como ativar a loja virtual — ligue a loja, configure o recebimento, o frete e a retirada.
• Como usar um domínio próprio na loja virtual — o endereço que aparece na pré-visualização e no Estúdio.
• Como publicar posts no blog da loja virtual — o blog herda as cores e as fontes do Estúdio.