Usando o app
Aparência
A página Aparência define o estilo de todas as tabelas da loja de uma vez, para que todas combinem com a sua marca. Uma pré-visualização ao vivo na página mostra cada alteração enquanto você faz.
Clique em Salvar na barra no topo para aplicar as alterações. Todas as tabelas ativas da loja são atualizadas na hora — não é preciso salvar as tabelas uma a uma. Quer que uma tabela tenha outro visual? Veja dar a uma tabela um visual próprio.
Janela da tabela
| Configuração | O que faz |
|---|---|
| Largura | Estreita (ideal para três ou quatro colunas), Média (padrão), Larga (espaço para tabelas largas sem rolagem lateral) ou Extra larga (ideal com fotos do produto ao lado da tabela). |
| Arredondamento dos cantos | 0–24 px. Padrão: 8 px. |
| Espaçamento interno | 0–48 px. Padrão: 24 px. Espaço entre a borda da tabela e o conteúdo. |
Cabeçalho
A barra no topo da janela ou do painel.
| Configuração | O que faz |
|---|---|
| Mostrar o nome do produto | Coloca no topo da janela o nome do produto de onde ela foi aberta. Quando oculto, os leitores de tela ainda o anunciam. |
| Fundo do cabeçalho | Deixe vazio para usar o fundo da tabela. |
| Cor do título | Deixe vazio para usar a cor do texto. |
| Alinhamento do título | Esquerda ou Centro. |
| Botão de fechar | ✕ simples, ou ✕ em um círculo preenchido. |
| Cor do ícone | O próprio ✕. Deixe vazio para usar a cor do título. |
| Cor do círculo | Para o estilo de círculo preenchido. |
Fotos do produto
| Configuração | O que faz |
|---|---|
| Mostrar fotos do produto ao lado da tabela | Mostra as fotos do próprio produto ao lado da tabela, com setas para navegar. Em telas maiores, só aparecem na janela pop-up — os painéis são estreitos demais. Use junto com a janela Extra larga. |
| Mostrar também em celulares | No celular, as fotos ficam acima da tabela, tanto na janela quanto nos painéis. Desativado, o celular mostra só a tabela. |
Fundo
| Configuração | O que faz |
|---|---|
| Cor de fundo | A superfície da tabela. Padrão: branco. |
| Cor do texto | O texto principal — mude junto com um fundo escuro para a tabela continuar legível. |
| Imagem de fundo | Uma imagem atrás da tabela inteira. |
| Ajuste da imagem | Preencher a tabela, Ajustar a imagem inteira ou Repetir (lado a lado). |
| Posição da imagem | Centro, Topo ou Base. |
| Sobreposição | 0–90%. Suaviza a imagem com a cor de fundo para o texto continuar legível. Com 0%, a imagem aparece como está. |
Tabela
| Configuração | O que faz |
|---|---|
| Fundo do cabeçalho das colunas | Padrão: cinza-claro. |
| Texto do cabeçalho das colunas | Padrão: quase preto. |
| Linhas da grade | A cor das linhas entre linhas e células. |
| Linhas alternadas sombreadas | Colore uma linha sim, outra não, para facilitar a leitura de tabelas largas. |
Cada tabela pode substituir essas cores no editor, em Opções de estilo.
Texto
| Configuração | O que faz |
|---|---|
| Cor dos títulos | Os títulos da tabela, além de destaques como a unidade ativa no seletor de unidades e o contorno de foco do teclado. |
| Tamanho base | 11–20 px. Padrão: 14 px. Títulos e texto são dimensionados a partir dele. |
Comportamento
| Configuração | O que faz |
|---|---|
| Fechar ao clicar fora | Ativado por padrão. Desative para a tabela fechar só pelo botão de fechar. Esc sempre funciona. |
CSS personalizado
Para tudo o que as opções acima não cobrem. O CSS é adicionado onde quer que uma tabela apareça. Comece seus seletores com .plug-sc para que eles afetem só a tabela de medidas, e não o resto do tema.
Nomes de classe úteis:
| Configuração | O que faz |
|---|---|
| .plug-sc__trigger | O link ou botão Tabela de medidas. |
| .plug-sc__dialog | A janela pop-up ou o painel. |
| .plug-sc__heading | O título no topo da janela. |
| .plug-sc__table | Cada tabela de medidas. |
| .plug-sc__units | O seletor de unidades acima de uma tabela. |
| .plug-sc__float | O botão flutuante. |
| .plug-sc__inline | Uma tabela exibida na página. |
/* Texto da tabela menor na loja */
.plug-sc .plug-sc__table {
font-size: 13px;
}
/* Ocultar o botão flutuante no celular */
@media (max-width: 749px) {
.plug-sc .plug-sc__float { display: none; }
}Restaurar
Restaurar padrões volta cada opção do formulário ao valor padrão. Nada muda na sua loja até você clicar em Salvar.