/image/data/felipo/587/variacoes-no-produto-opencart-tela-criacao1-codemarket.png
# Documentação Sistema de Variações no Produto Opencart
Documentação oficial da melhoria [**Sistema de Variações no Produto - Opções relacionadas (tamanho, cor...) Opencart**](https://www.codemarket.com.br/produto/sistema-de-variacoes-no-produto-opcoes-relacionadas-tamanho-cor-opencart), ensinando como Configurar e usar ela.
A primeira instalação da melhoria é feita pela nossa equipe.
## Vídeo
Vídeo ensinando a configurar e usar a melhoria
## Configuração
Vamos explicar os passos da Configuração.
Acessando a Configuração do Painel, etapas:
* Clique em Extensões -> Extensões
* Em Módulos Premium clique no ícone de Edição para abrir a Tela do Painel
Imagem da tela do Painel da melhoria
| Número imagem | Explicação |
| -------- | -------- |
| 1 | Adicione CSS extra se desejar, por padrão já fica o CSS da melhoria, podendo editar como desejado, só evite remover, pois pode retirar recursos visuais importante |
| 2 | Selecione Sim, caso deseja exibir o nome e valor da variação no produto e Não para não exibir |
| 3 | Selecione Sim para Habilitar a melhoria e Não para Desabilitar a melhoria |
Após feita a configuração desejada, clique em Salvar configuração no botão verde acima.
## Uso da melhoria
Vamos explicar sobre o uso da melhoria, ensinando a criar uma Variação e Editar ela.
No geral são etapas bem simples, colocamos a imagem de cada etapa para facilitar o entendimento.
### 1. Atalho para a Configuração
| Número imagem | Explicação |
| -------- | -------- |
| 1 | Clique em Catálogo |
| 2 | Clique em Variações Produto para abrir a tela de criação/edição das Variações |
Pronto, vai agora para a página de criação/edição das Variações no Produto.
**Outra forma de acessar a página:** Extensões -> Extensões -> Módulos -> Clique no ícone azul de Editar na linha do Codemarket - Sistema de Variações no Produto
### 2. Tela das Variações no Produto
Nesta tela, fica a lista das Variações criadas, assim como o botão para criar uma nova Variação e outros para interagir com as variações já criadas.
| Número imagem | Explicação |
| -------- | -------- |
| 1 | Botão para Adicionar uma Variação, abre um Modal para a criação da Variação |
| 2 e 3 | (2) Se clicar no título da variação vai abrir a Edição, mesma coisa no (3) ícone azul de Edição |
| 4 | Se clicar no ícone vermelho da Lixeira, vai remover a Variação |
### 3. Modal de criação/edição das Variações no Produto
Modal abre ao fazer clicar nos número da imagem anterior (1) ou (2) ou (3), serve para configurar uma Variação já criada ou para criar uma nova Variação.
Neste Modal/Formulário ficam os campos para criar/editar uma Variação, se for uma edição a diferença, que vai já puxar os dados da Variação criada.
| Número imagem | Explicação |
| -------- | -------- |
| 1 | Título de referência da variação, recomendamos usar o nome do Produto, exemplo: Tênis Nike Revolution 5 Feminino, assim facilita sabermos qual é a variação |
| 2 | Coloque o nome da variação, pode aparecer na página do Produto dependendo da configuração no Painel, no exemplo usamos Cor |
| 3 | Tipo da variação, suporta atualmente: Imagem, Cor ou Texto, recomendamos o uso da Imagem, assim fica a miniatura do Produto, Cor fica uma Cor a ser definida e Texto fica o texto do Texto do Botão, que aparece ao lado do (7) |
| 4 | Status da variação, marque Habilitado para deixar Habilitada a variação no Produto ou Desabilitado para desabilitar ela |
| 5 | Usado para pesquisar um novo Produto e Adicionar ele na Variação, pode usar parte do nome do Produto para encontrar ele, só vai retornar Produtos no qual não tem nenhuma Variação ligada a ele |
| 6 | Valor da variação, pode aparecer no Produto dependendo da configuração no Painel, ex: Verde e Preto |
| 7 | Se clicar no ícone vermlhe da Lixeira remove um Produto da variação, só faz efeito a removação, se clicar no (8) para Salvar a variação |
| 8 | Botão para Salvar a Variação editada ou criar uma nova variação se ela for nova |
#### Adicionando um Produto na Variação
| Número imagem | Explicação |
| -------- | -------- |
| 1 | Como explicado na imagem anterior no número [(2)](https://www.codemarket.com.br/blog/post/documentacao-sistema-de-variacoes-no-produto-opencart#3-modal-de-cria%C3%A7%C3%A3oedi%C3%A7%C3%A3o-das-varia%C3%A7%C3%B5es-no-produto) informe parte do nome do Produto, vai encontrar todos não usados em uma variação com o nome semelhante e o ID do Produto ao lado |
| 2 | Clique no Produto, que deseja Adicionar a variação |
Carregou agora o formulário de Adicionar um Produto, vamos aos passos seguintes:
| Número imagem | Explicação |
| -------- | -------- |
| 1 | Informe um Valor da variação, conforme explicando no número [(6)](https://www.codemarket.com.br/blog/post/documentacao-sistema-de-variacoes-no-produto-opencart#3-modal-de-cria%C3%A7%C3%A3oedi%C3%A7%C3%A3o-das-varia%C3%A7%C3%B5es-no-produto) anteriormente. Pode aparecer no Produto dependendo da configuração no Painel, ex: Rosa |
| 2 | Clique no botão Adicionar para adicionar o Produto a Variação |
| 8 | Agora conforme explicado no número [(8)](https://www.codemarket.com.br/blog/post/documentacao-sistema-de-variacoes-no-produto-opencart#3-modal-de-cria%C3%A7%C3%A3oedi%C3%A7%C3%A3o-das-varia%C3%A7%C3%B5es-no-produto), clique em Salvar, para ser salvo na Variação o novo Produto adicionado ou qualquer mudança feita