Documentação / Quick Shop / Swatches e ordem das variações

Swatches e ordem das variações

Os swatches definem como cada opção de variação aparece no modal — texto (P, M, G), bolinha de cor ou miniatura de imagem — e a ordem segue a mesma da página do produto.

Tipos de swatch

TipoUso recomendadoCampo adicional
NenhumExibe como texto simples.
TextoTamanhos (P, M, G, GG).
CorCores sólidas.Seletor de cor.
ImagemEstampas, texturas, cores compostas.Upload de miniatura.
sualoja.com.br — modal de compra rápida
PMG
Os três formatos de swatch no modal: texto, cor e imagem (estampa). As telas podem variar conforme a versão.

Como configurar

  1. Acesse Produtos → Atributos

  2. Abra os termos do atributo

    Clique em Configurar termos no atributo desejado (ex.: TAMANHOS ou COR).

  3. Defina o tipo de swatch

    Ao adicionar ou editar um termo, preencha o campo “Tipo de Swatch Quick Shop” — Texto, Cor (com o seletor) ou Imagem (com o upload).

  4. Salve

    O modal passa a usar o swatch imediatamente.

Já usa os swatches do Flatsome? O Quick Shop detecta e reutiliza automaticamente — cor e imagem configuradas no tema aparecem no modal sem recadastrar nada. A configuração própria do Quick Shop só é necessária quando o Flatsome não gerencia aquele atributo.

Comportamento no modal

  • Termos sem swatch configurado aparecem como texto — as opções nunca somem.
  • Variações sem estoque aparecem desabilitadas.
  • O botão de compra só habilita quando todas as opções estão selecionadas; até lá, exibe “SELECIONE TODAS AS OPÇÕES”.

Ordem dos tamanhos (P, M, G, GG)

O modal exibe as opções na mesma ordem da página do produto, respeitando a configuração da loja. Para definir a ordem:

  1. Edite o atributo

    Em Produtos → Atributos, edite o atributo (ex.: TAMANHOS).

  2. Escolha “Ordenação personalizada”

    No campo Ordenação padrão, e salve.

  3. Arraste os termos na ordem desejada

    Em Configurar termos, arraste: P → M → G → GG.

Se algum modal ainda exibir a ordem antiga depois do ajuste, limpe o cache de página do site — o HTML guardado pode estar desatualizado.

Documentação do Quick Shop · escrita com base na versão 1.0.3. As telas ilustradas podem variar conforme a versão instalada na sua loja.