Loja virtual

Como personalizar a aparência da sua loja virtual

Cor, fundo, banner, informativos, categorias e carrosséis — tudo numa tela só.

Em poucas palavras

A tela Aparência é onde a vitrine da sua loja é montada: cor de destaque, fundo claro ou escuro, banners no topo, faixa de informativos, quais categorias aparecem e os carrosséis de produtos. São nove blocos numerados na mesma ordem em que o cliente vê a loja, e cada mudança vale na hora. Está em todos os planos, no menu do painel em MINHA LOJA › Aparência.

Pra que serve

Sua loja abre com um layout pronto, e ele funciona — mas é igual ao de todo mundo. A tela Aparência é onde ela vira a SUA loja: a cor dos botões, o fundo claro ou escuro, o banner do topo, a faixa que anuncia o parcelamento, quais prateleiras aparecem e em que ordem. São nove blocos numerados, e a numeração não é enfeite: é a ordem em que o cliente vê cada coisa quando abre a loja.

Como fazer

  1. Abra Aparência no menu

    No menu do painel, em MINHA LOJA, clique em Aparência. A tela abre na aba Personalização, com os blocos numerados de 00 a 08.

    A tela Aparência aberta no painel, com o menu lateral à esquerda e o bloco 00 Cor de destaque no topo
  2. Escolha a cor de destaque

    No bloco 00, clique no quadro de cor ou digite o código HEX. É a cor dos botões, dos preços em destaque e do “Comprar agora”. A pré-visualização à direita muda junto, então dá para ver antes de decidir. O botão Padrão devolve a cor original da Sellit.

    O bloco Cor de destaque com o seletor de cor, o campo HEX e a pré-visualização da loja ao lado
  3. Escolha o fundo da loja

    No bloco 01, escolha entre Adaptativo, Claro e Escuro. Adaptativo é o recomendado: cada cliente vê a loja no modo que já usa no celular ou no computador, e pode trocar pelo botão no rodapé da loja.

    O bloco Fundo da loja com as três opções: Adaptativo marcado como recomendado, Claro e Escuro
  4. Suba o banner do topo

    No bloco 04, clique em Fazer upload. Cada banner é um PAR: uma arte de computador (2560 × 960) e uma de celular (780 × 1000), enviadas juntas e tratadas como um banner só. Aceita PNG, JPG e WebP, até 8 banners. Se você não tem arte pronta, use a Biblioteca de banners logo abaixo.

    O bloco Banners com o cartão de novo banner mostrando os tamanhos de computador e celular, dois banners ativos e o começo da biblioteca
  5. Escreva o informativo abaixo do banner

    No bloco 05, clique em Adicionar. É a faixa fininha que aparece logo abaixo do banner e anuncia parcelamento, frete grátis ou desconto no Pix.

    O bloco Informativos com o botão Adicionar e um informativo ativo de parcelamento em 10 vezes
  6. Escolha o tipo do informativo

    Abra “Tipo de informativo” e escolha um dos nove modelos prontos: frete grátis, parcelamento, desconto no Pix, desconto na primeira compra, desconto para seguidores, retirada na loja e texto livre. Você preenche só os números. Escolha o ícone e clique em Salvar.

    A janela Adicionar informativo com a lista dos nove tipos disponíveis aberta
  7. Escolha as categorias que aparecem

    No bloco 06 ficam as prateleiras da loja. Arraste os cards para mudar a ordem, use o lápis para trocar a foto e o título de cada um, e a lixeira para tirar da vitrine — a categoria continua existindo, só some da fileira. Para criar subcategoria, marcar produtos em massa e mexer nas tags, use o botão Configurar categorias e tags: isso é a página de categorias e tags.

    O bloco Categorias com a fileira de cards das prateleiras da loja e o botão Configurar categorias e tags
  8. Monte um carrossel de produtos

    No bloco 08, clique em Adicionar carrossel e escolha uma categoria ou uma tag. O nome dela vira o título da fileira na loja. Você pode ter até 3 carrosséis ao mesmo tempo.

    A janela Novo carrossel com a lista de categorias e tags para escolher
  9. Abra a loja e confira

    Clique em Visitar loja, no topo do painel. Você vê o resultado na ordem dos blocos: o banner primeiro, o informativo logo abaixo, depois as categorias e os carrosséis.

    A loja aberta no navegador mostrando o banner no topo e a faixa de informativo com o parcelamento logo abaixo

O carrossel na loja

A fileira nasce com o nome da categoria ou da tag que você escolheu, e traz os produtos dela. Por isso vale nomear bem: “Roupas” fica bom como título de prateleira, “promo2” não.

A fileira Roupas na loja, com quatro produtos e as etiquetas TOP 1 a TOP 4

Escolher a dedo os produtos do carrossel

Sem escolher nada, a loja mostra os 10 primeiros produtos daquela categoria. Clicando em Escolher produtos, você marca até 10 na ordem exata em que quer que apareçam — o primeiro que você marcar é o primeiro da fileira.

A janela de escolher produtos do carrossel, com a busca preenchida e dois produtos na lista

Biblioteca de banners

Se você não tem arte pronta, a Sellit já deixa 14 banners prontos, cada um com a versão de computador e a de celular. Clique em Adicionar e ele entra na sua loja na hora. Tem Natal, Fim de Ano, Dia das Mães, Volta às Aulas, moda e beleza. Quem prefere criar a própria arte tem o atalho Templates Canva no canto do bloco.

A biblioteca de banners com nove artes prontas, cada uma com versão de computador e de celular e o botão Adicionar

Layout dos produtos

O bloco 02 decide como os cards se arrumam NO COMPUTADOR. Alinhado deixa todo card do mesmo tamanho e apara a foto para caber — é o padrão e o mais organizado. Alturas variadas respeita a foto inteira, sem aparar nada. Feed dinâmico deixa as colunas correrem soltas, como o feed de uma rede social. No celular não muda nada: continuam duas colunas de altura variada.

O bloco Layout dos produtos com as três opções: Alinhado marcado como padrão, Alturas variadas e Feed dinâmico

Produtos esgotados

O bloco 03 decide o que a loja faz quando um produto fica sem estoque. Exibir e mover para o final é o padrão: quem tem estoque aparece primeiro. Exibir como esgotado deixa o produto onde está, sem botão de compra. Não mostrar na loja some com ele até você repor — mas o link direto continua abrindo. O switch de baixo esconde também o preço enquanto o produto estiver esgotado. Em qualquer uma das três, quem abre um produto esgotado vê o “Avise-me quando chegar” e é avisado quando você repõe.

O bloco Produtos esgotados com as três opções e o switch de ocultar o preço

Mais vendidos: a prateleira que se monta sozinha

O bloco 07 liga uma fileira que você não precisa montar: ela sai do que a loja realmente vendeu. Escolha a janela de tempo — 30 dias para o que está girando agora, 90 dias para tirar o ruído de uma semana fraca, 1 ano para loja de estação. A lista aparece na ordem em que vai para a loja, com o número de vendas de cada produto, e você pode fixar um produto no topo ou tirar outro da lista. O card “Mais vendidos” entra na mesma fileira das categorias, sempre em primeiro, e a foto e o título são seus.

O bloco Mais vendidos com o switch de ligar, as três janelas de tempo e o começo da lista com o número de vendas

Detalhes do card de produto

Ainda no bloco 00, embaixo da cor, ficam dois ajustes do card na vitrine. Variações de cor nos cards mostra as bolinhas de cor direto no card, sem o cliente precisar abrir o produto. Preço das variações decide qual preço aparece em destaque quando o produto tem variações com preços diferentes: o menor, o intermediário ou o maior — e dá para escrever “A partir de” antes do menor preço, que é o mais honesto quando a diferença é grande.

O que você ganha

  • A loja com a cara da sua marca em poucos minutos, sem mexer em código e sem contratar ninguém.

  • Banner pronto para usar hoje: são 14 artes na biblioteca, já nos dois tamanhos.

  • A faixa de informativo responde antes da pergunta: “parcela?”, “tem frete grátis?”, “desconto no Pix?”.

  • As prateleiras que o cliente vê são escolha sua — o que vende mais fica na frente.

  • Uma fileira de mais vendidos que se atualiza sozinha conforme você vende.

Dicas para não errar

  • Envie SEMPRE o par de banners. A arte de computador esticada no celular corta o texto justamente onde está a oferta.

  • Categoria nova não entra sozinha na fileira depois que você mexeu nela uma vez. A fileira do bloco 06 é uma seleção sua: criou uma categoria nova e ela não apareceu na loja, volte aqui e adicione.

  • O nome da categoria ou da tag vira o título da fileira, do jeito que está escrito. “promo” aparece como promo na loja.

  • A ordem das seções é fixa: banner, informativo, categorias, carrosséis. O que você ordena é o que está DENTRO de cada uma.

  • Layout dos produtos só vale no computador. Não adianta trocar esperando mudança no celular.

  • Tirar uma categoria da fileira com a lixeira não apaga nada: ela continua existindo, filtrando por link e listada dentro da categoria-mãe.

Quando não vale a pena usar

  • Não é um editor livre: você não arrasta seções de lugar nem cria seção nova. A ordem da loja é fixa — banner, informativos, categorias, carrosséis — e o que você escolhe é o conteúdo de cada uma.
  • Não muda a aparência do checkout nem da área do comprador. São telas com configuração própria.
  • Layout dos produtos não vale no celular. Lá a loja continua com duas colunas de altura variada, escolha o que escolher.
  • Não cria produto, preço nem promoção. Aqui só se decide o que aparece e em que ordem.

Perguntas frequentes

Mudei a cor e a loja continua igual. O que fiz de errado?
Provavelmente nada: atualize a página da loja. A vitrine guarda uma cópia da última versão por alguns instantes para carregar rápido, e a mudança aparece na atualização seguinte.
Preciso mesmo enviar duas artes para cada banner?
Sim. Cada banner é um par: 2560 × 960 para computador e 780 × 1000 para celular. São enviadas juntas e contam como um banner só. É o que evita a arte larga cortada no meio na tela do celular.
Criei uma categoria e ela não apareceu na loja. Por quê?
A fileira de categorias da loja é uma seleção sua, não a lista completa. Abra o bloco 06 em Aparência e adicione a categoria nova à fileira. Criar, organizar e pôr produtos continua sendo na página de categorias e tags.
Quantos carrosséis posso ter?
Três ao mesmo tempo. Ao chegar no terceiro a tela avisa: “Você já tem os 3 carrosséis. Remova um para trocar.”

Recursos relacionados