Prepare as imagens no seu editor:
Esse recurso depende diretamente de imagens editadas com variação de cores em um mesmo item.
Faça a troca das cores em todo o produto ou em locais delimitados conforme a necessidade para a apresentação de um mesmo item com variação de cores.
 

Na edição, as imagens devem ser salvas com o mesmo tamanho em largura e altura para serem alinhadas posteriormente uma em cima da outra.

A interação do usuário é maior quando você faz a apresentação de algum produto com imagens em um só ângulo, ou seja, os atributos de cores variam enquanto a disposição e perspectiva continuam os mesmas.
 

Adicione botões coloridos para a troca das imagens:
É necessário adicionar botões ou elementos gráficos que representem a variação da sua imagem com a devida distinção, seja na cor, na textura ou qualquer outro atributo necessário.

A personalização dos botões é por sua conta, use sua criatividade para expressar intuitividade junto dos usuários e apresente seus produtos da melhor forma possível. A ação do código é simples, então explore os recursos do design.

​

Organize todo o conteúdo:
Com as imagens salvas nas suas devidas variações, faça o upload para a biblioteca do Wix e depois adicione no editor conforme exemplificado no vídeo.
 

É importantíssimo que você renomeie os ID's de todos os elementos na caixa de propriedades, assim fica fácil identifica-los na hora de escrever o código.

Cada imagem do mesmo produto com variação de cor deve receber um nome distinto e o mesmo deve ser feito nos botões de cor que vão dar ação na troca de imagens.

​

​

Prepare the images in your editor:

This feature directly depends on images edited with color variation in the same item.
Make the color change throughout the product or in places delimited as needed for the presentation of the same item with color variation.
 

In editing, images must be saved with the same size in width and height to be laterally aligned one on top of the other.

User interaction is greater when you present a product with images at a single angle, that is, the color attributes vary while the layout and perspective remain the same.

​

Add colorful buttons for an exchange of images:

You must add buttons or graphics that represent the variation of your image with the appropriate distinction, whether in color, texture or any other necessary attribute.

​

The button customization is on your own, use your creativity to express intuitiveness with users and present your products in the best possible way. The code action is simple, so explore the design features.

​

Organize all content:

With the saved images in their proper variations, upload them to the Wix library an then add them to the editor as exemplified in the video.

It is very important that you rename the ID's of all the elements in the properties box, so it is easy to identify them at the time of writing the code.

Each image of the same product with color variation should receive a distinguished name and the same should be done on the color buttons that will give action in the exchange of images.