O primeiro passo para ativar o Swatches é navegar até uma Página qualquer da sua loja e inserir imagens das cores que você irá utilizar. Caso utilize apenas imagens, não é necessário realizar esse passo (ex: http://postimg.org/image/d69r7iifn/).
Para isso vamos em CMS > Páginas > Home navegamos até a aba Conteúdo e clicamos em Show/Hide Editor.
Com o Editor alterado vamos em Insert Image para adicionar as imagens das cores.
1 - Crie uma pasta chamada "swatches" conforme a imagem.
2 - Escolha as imagens. Importante observar que o nome da imagem precisa estar igual ao inserido no atributo de cor, portanto se inseriu no atributo tudo minúsculo, a imagem também deverá corresponder.
3 - Faça o upload das imagens.
4 - Feche a janela e pode sair da área de páginas.
É importante frisar que na hora de criar o produto simples é obrigatório o preenchimento do tamanho e cor caso utilize esses atributos. Caso não preencha, o módulo apresentará erro.
Com os produtos criados, vamos até o produto configurável. No exemplo eu criei os produtos antes, mas você pode criar na hora de configurar, essa forma foi apenas para facilitar a explicação.
Na aba imagens carregue as fotos ou imagens das cores.
Na opção etiqueta você irá inserir a cor do produto conforme inserido no atributo, portanto se foi cadastrado no atributo tudo minúsculo, é necessário que seja preenchido de forma igual.
Caso utilize imagens(fotos) é necessário inserir -swatch após o nome da foto. Para cores apenas o nome da cor conforme atributo.
Após o preenchimento, salve o produto.
Verificando no front-end podemos ver as opções aparecendo conforme cadastradas.
Cadastramos um modelo Azul, Verde, Preto e Vermelho, sendo que a opção vermelho é uma cor e não uma imagem.
E a opção rosa? Ela está aparecendo pois temos um produto simples na cor Rosa, porém não cadastramos uma imagem para ela no produto configurável, dessa forma se não for cadastrado mas existir um produto simples irá aparecer na forma de Nome (escrito).
O módulo também faz uma combinação de atributos, selecionando a cor ou o tamanho desejado ele bloqueará as opções que não estão disponível. Ex: O tamanho 43 só tem na cor vermelho, portanto ao selecionar o número 43 o módulo desativará as outras opções de cores.
