VenddorDocumentação API
API atualAPI legada
Guia rápidoReferência completa
Carregando índice…
API atual/Referência completa

Aparência da vitrine

Como a loja controla o visual e a estrutura da vitrine: modelos de layout, menus, temas prontos e preferências de listagem.

A vitrine (o site de compra) tem várias camadas de aparência que o administrador controla. Esta seção cobre quatro: os modelos de layout (a estrutura das páginas), os menus de navegação (cabeçalho e rodapé), a galeria de temas (conjuntos prontos de cores e fontes) e as preferências de exibição (quantos produtos por página, ordenação, estilo do cartão de produto).

Pontos-chave
  • Layout é a estrutura (quais blocos aparecem e onde); tema é a aparência (cores, fontes, bordas); menu é a navegação. São independentes.
  • Instalar um tema da galeria troca as cores e fontes da loja na hora e guarda o tema anterior no histórico, para restaurar.
  • Cada local de menu (header, footer_help...) mostra um único menu ativo: o primeiro por nome. Criar um segundo menu ativo no mesmo local não o faz aparecer.
  • As rotas de layout e menu exigem manage_layouts; as de tema, manage_theme; as de preferências, manage_settings.
  • Estas rotas são só de leitura (menus, modelos) ou de troca (instalar tema, definir modelo padrão, salvar preferências). Criar e editar menus e blocos usa outras rotas da família /navigation e /layouts.

Como funciona

Layout, tema e menu

CamadaO que defineOnde mexer
Modelo de layoutConjunto de páginas prontas (inicial, categoria, produto...) com seus blocos. Uma loja nova nasce de um modelo.Modelos de layout
MenusLinks do cabeçalho e dos rodapés.Menus de navegação
TemaCores, fontes, bordas, largura.Galeria de temas
PreferênciasProdutos por página, ordenação, cartão de produto, formato de data e moeda.Preferências de exibição

Conceitos-chave

Valores em letra e em texto

Os status de menu e de item usam letra (A ativo, D desativado). Já as preferências de exibição usam texto ("grid-4", "newest").

Cores

Cores são strings hexadecimais (#2563eb). Medidas são strings com unidade ("8px", "1280px").

Endpoints

Método e caminhoPara que serveAutenticaçãoPágina
GET /api/v1/admin/layout-templatesLista modelos de layoutadministradorModelos de layout
GET /api/v1/admin/layout-templates/{id}Lê um modeloadministradorModelos de layout
PUT /api/v1/admin/layout-templates/{id}/defaultDefine o modelo padrãoadministradorModelos de layout
GET /api/v1/admin/layout-templates/{id}/layoutsLista os layouts da lojaadministradorModelos de layout
GET /api/v1/admin/navigation-menusLista menusadministradorMenus de navegação
GET /api/v1/admin/navigation-menus/{id}Lê um menu com itensadministradorMenus de navegação
GET /api/v1/admin/themes/marketplaceLista temas prontosadministradorGaleria de temas
GET /api/v1/admin/themes/marketplace/{slug}Lê um temaadministradorGaleria de temas
GET /api/v1/admin/themes/marketplace/{slug}/previewPré-visualiza um temaadministradorGaleria de temas
POST /api/v1/admin/themes/marketplace/{slug}/installInstala um temaadministradorGaleria de temas
GET /api/v1/admin/settings/appearanceLê as preferências de exibiçãoadministradorPreferências de exibição
PUT /api/v1/admin/settings/appearanceAltera as preferênciasadministradorPreferências de exibição

Erros comuns

  • Mandar um id de modelo que não é inteiro. Os modelos de layout têm id inteiro: 400 invalid template id.
  • Achar que /layout-templates/{id}/layouts filtra pelo modelo. Ela devolve os layouts da loja inteira, qualquer que seja o id.
  • Instalar um tema sem querer. A instalação troca as cores já. Ela é reversível pelo histórico do tema.
  • Ler is_served no detalhe de um menu. O campo só é calculado na lista.
  • Mandar um PUT /settings/appearance esperando substituir tudo. Ele mescla com o que já existe.

Próximos passos

Galeria de temas
Experimentar um tema pronto.
Menus de navegação
Ver o que a vitrine mostra.
Preferências de exibição
Ajustar listagens e cartões.
Anterior
Slug por idioma
Próxima
Modelos de layout
Nesta página
  • Como funciona
  • Layout, tema e menu
  • Conceitos-chave
  • Valores em letra e em texto
  • Cores
  • Endpoints
  • Erros comuns
  • Próximos passos