Leia a documentação abaixo se deseja criar um grid de produtos no formato carrossel para incluir na página inicial, ou se deseja alterar os produtos de um grid já existente.
Como criar uma categoria para o grid de produtos? #
O primeiro passo para criar um grid de produtos na página inicial do seu site é acessar o painel de administração. Após fazer isso, você deve navegar no menu lateral localizado no canto esquerdo do painel. Procure pela aba “Catálogo” e passe o mouse sobre ela. Ao fazer isso, um novo submenu será exibido. No submenu, clique na opção “Categorias“.
Aguarde o carregamento da página que exibe a listagem de todas as suas categorias. Em seguida, procure pela categoria principal do seu sistema, que geralmente é identificada por nomes como “Raiz“, “Corporate” ou “Principal“. Clique na sua categoria principal e, em seguida, clique no botão localizado um pouco acima da listagem de categorias. Quando você passa o mouse sobre o botão, ele exibirá o texto “Criar subcategoria“.
Antes de prosseguir com a configuração, é importante confirmar que você está realmente nas configurações da nova subcategoria. Para isso, verifique o texto localizado acima das informações gerais; ele geralmente indica que você está criando uma nova subcategoria, com uma mensagem como “Nova Subcategoria”. Além disso, os campos principais estarão todos sem preenchimento.
Depois de confirmar que você está configurando a nova subcategoria, preencha os campos obrigatórios e não obrigatórios conforme indicado na documentação.
A configuração inicial deve ser feita na opção “Informações gerais“, que está localizada no menu superior da sua subcategoria.
No campo “Nome“, recomenda-se seguir um padrão ao criar os nomes das categorias específicas para os grids. O padrão sugerido é iniciar o nome com “HOME “, seguido de um traço e o nome da subcategoria. Por exemplo, você pode usar “HOME – Destaques“.
No campo “Esta ativo“, escolha o valor “Não“.
Para a opção “Include in Navigation Menu (Incluir no menu)*”, selecione também o valor “Não“.
Navegue até o menu superior e altere para as configurações de “Display Settings”.
Na opção “Display Mode”, selecione “Apenas Produtos”. As opções “CMS Block” e “CMS Block Bottom” não precisam ser configuradas.
Defina a opção “Is Anchor” como “Não”.
Com as configurações principais concluídas, retorne ao menu superior e escolha a opção “Produtos da Categoria”.
Aguarde o carregamento da página e, em seguida, clique no botão amarelo “Reiniciar Filtro” para exibir todos os produtos disponíveis.
Escolha os produtos que deseja exibir no seu carrossel. Para isso, você pode procurar pelo produto específico no grid, utilizando o nome ou o SKU do produto. Após encontrá-lo na listagem, clique no produto para marcar a caixa de seleção, indicando que ele foi selecionado.
Depois de selecionar todos os produtos desejados, não se esqueça de salvar a nova categoria criada.
Você notará que, na listagem de categorias, a subcategoria criada terá um tom acinzentado. Se a sua estiver assim, significa que a configuração está correta.
Como incluir o grid na home do site? #
É importante que, antes de seguir este passo, você tenha verificado o passo anterior sobre como criar uma categoria específica para o grid. Caso já tenha criado a categoria que será destinada a receber o grid, siga o passo a passo abaixo:
Navegue no menu lateral até a opção “Sistema” e clique para abrir a listagem de configurações mais específicas da administração.
Nas configurações específicas, procure por “Extensões Soulmkt”. Dentro desta listagem de configurações, procure pela configuração de nome “Soulmkt Soulcore” ou apenas “Core” e clique para acessá-la.
Após acessar a configuração, é importante que você selecione a visão de loja específica da sua loja antes de prosseguir com a inclusão do grid. Você pode fazer isso acessando a barra de seleção de visões de loja, indicada pelo ícone da terra no canto superior esquerdo da página acessada.
Em seguida, clique na primeira opção de configuração, chamada “Home Components”. Após clicar, você visualizará todos os elementos que compõem a home do seu site, ou a página principal do seu site.
No canto esquerdo, você poderá visualizar uma listagem de elementos em formato de bloco. Clique no bloco preto com o nome “Grid” e arraste-o para a posição desejada dentro dos componentes da home. Organize-o abaixo de outro elemento conforme sua preferência. Neste exemplo, deixarei o elemento de grid logo abaixo do elemento de slide, que representa meu slide de banners.
Após definir onde o elemento deverá ser posicionado, clique no elemento grid criado e configure-o da seguinte maneira:
No primeiro campo, “Element Column”, escolha o valor 12. Em “Column Align”, selecione o valor “Start/Top”. No campo “Row Margin”, preencha com o valor “10px 0 0 0”.
Para o campo “Título”, defina o título que deseja exibir logo acima do seu carrossel de produtos. No exemplo desta documentação, o texto escolhido foi “Teste”.
Em “Id Category”, preencha com o valor da categoria que você criou anteriormente. Para localizar esse valor, navegue no menu lateral até a aba “Catálogo” e clique na opção “Categoria”.
Após acessar a listagem de categorias, clique no nome da categoria que você criou no primeiro passo e copie o valor numérico logo ao lado do nome da categoria. Não copie o número com os parênteses, apenas o valor numérico.
Na configuração de “Id Category”, cole o número copiado referente à categoria desejada.
Marque a opção “Carousel” como “SIM”.
Em “Disable Toolbar”, marque a opção “SIM”.
Para “Columns”, o valor padrão é 4, mas fique à vontade para alterá-lo conforme desejado.
Em “Number Items”, defina a quantidade de itens que deseja exibir no carrossel, podendo escolher entre 3 a 15 itens.
Você também pode definir a altura e a largura nos campos Width Image e Height Image. No entanto, por padrão, esses campos não são configurados.
Após finalizar toda a configuração, clique no botão “Salvar configuração” localizado no canto superior direito.
Como alterar os produtos de um grid existente? #
Navegue pelo menu lateral localizado no canto esquerdo do painel. Procure pela aba “Catálogo” e passe o mouse sobre ela. Isso exibirá um novo submenu. No submenu, clique na opção “Categorias”.
Localize a categoria cujos produtos do grid na home você deseja alterar. Se você seguiu a recomendação de nome para categorias de grids, sua categoria terá o padrão “HOME – [Nome da Categoria]”.
No menu superior da categoria, vá até a opção “Produtos da Categoria”.
Faça as alterações desejadas nos produtos, removendo os produtos antigos e adicionando novos.
Lembre-se de clicar no botão “Redefinir Filtro” para limpar a filtragem e exibir todos os produtos disponíveis.
Após finalizar todos os ajustes, clique no botão “Salvar Categoria”.
Como alterar a posição dos produtos em um carrossel da Home #
Além da criação do grid/carrossel de produtos na Home, é fundamental compreender como funciona a ordenação dos itens exibidos.
Acessando a categoria do carrossel #
Os carrosséis da Home normalmente estão vinculados a uma categoria específica (exemplo: “Novidades”, “Lançamentos”, “Mais Vendidos” etc.).
Para alterar a ordem dos produtos:
Acesse o Painel Administrativo:
- Vá até Catálogo > Categorias.
- Selecione a categoria utilizada no carrossel da Home.
- Acesse a aba Produtos da Categoria.
Nessa tela, você visualizará a listagem de produtos vinculados à categoria e a coluna Posição.
Ordenação por posição #
A ordenação por posição funciona da seguinte forma:
- Quanto mais próximo de zero, mais cedo o produto aparecerá no carrossel.
- Quanto maior o número, mais ao final ele será exibido.
Exemplo:
| Produto | Posição |
|---|---|
| Produto A | 0 |
| Produto B | 2 |
| Produto C | 4 |
| Produto D | 50 |
Ordem de exibição:
ProdutoA → ProdutoB → Produto C → Produto D
Ou seja, o sistema respeita a ordem crescente da posição.
Outras formas de ordenação disponíveis #
Além da ordenação por posição, a categoria pode ser configurada para ordenar os produtos por:
- Preço
- Mais recentes
- Mais antigos
- Mais vistos
Essas opções são definidas na Configurações de visualização.
No entanto, a ordenação por posição é a mais utilizada quando se deseja controle manual sobre a sequência de exibição.
Importante: prioridade real da ordenação #
- É fundamental entender que a posição não é o primeiro critério utilizado pelo sistema.
- O sistema aplica uma hierarquia de validações antes de considerar a posição como critério final de desempate.
- A lógica funciona por camadas de prioridade
Produto com imagem #
Produtos sem imagem não devem ter prioridade sobre produtos que possuem imagem.
Se houver comparação entre:
- Produto com imagem
- Produto sem imagem
O produto com imagem terá prioridade na exibição.
Produto com bloco estático (ex: bloco de orçamento) #
Se dois produtos possuem imagem, o sistema pode verificar se algum deles exibe um bloco estático no lugar do preço (exemplo: botão de orçamento).
Produtos com esse tipo de configuração podem perder prioridade na ordenação frente a produtos com preço exibido normalmente.
Configuração Multi Seller (quando aplicável) #
Em projetos que utilizam modelo marketplace (Multi Seller), pode haver impacto na priorização dependendo da configuração do produto.
Importante:
- Nem todos os projetos utilizam Multi Seller.
- A análise deve ser feita caso a caso.
- Não é um critério universal, mas pode interferir em alguns cenários.
Estoque #
O sistema tende a priorizar produtos com estoque disponível.
Se houver comparação entre:
- Produto com estoque
- Produto sem estoque
O produto com estoque disponível terá prioridade.
Quando a posição realmente é utilizada? #
A ordenação por posição será considerada quando:
- Todos os produtos possuem imagem
- Todos atendem às mesmas configurações de bloco
- Todos seguem o mesmo padrão Multi Seller (quando aplicável)
- Todos possuem estoque
- Todos passam igualmente pelos critérios anteriores
Somente nesse cenário a posição definida na categoria será o critério decisivo.
Critério final de desempate: ID do produto #
Se todos os critérios anteriores forem idênticos entre os produtos, o sistema utiliza o ID do produto como último critério de desempate.
Na prática:
- Produtos com ID mais antigo (cadastrados primeiro) tendem a ter prioridade.
Por que um produto não aparece na posição esperada? #
Se um produto não está aparecendo conforme a posição configurada, verifique:
- Ele possui imagem cadastrada?
- Está exibindo bloco estático no lugar do preço?
- Está corretamente configurado para o modelo de venda do projeto (ex: Multi Seller)?
- Possui estoque disponível?
- A ordenação da categoria está realmente configurada como “posição”?
Na maioria dos casos, o problema está em algum desses critérios anteriores à posição.
Resumo técnico da hierarquia de prioridade #
A lógica simplificada de priorização segue esta ordem:
- Produto com imagem
- Configuração de bloco/preço
- Regras de Multi Seller (quando aplicável)
- Estoque
- Posição na categoria
- ID do produto (desempate final)
Se tiver qualquer dificuldade ou dúvida, entre em contato com nossa equipe de suporte. Estamos sempre à disposição para ajudar!