Wix Stores: adicionar e configurar o Widget do produto
6 min de leitura
O widget do produto permite que você exiba um único produto em qualquer lugar do seu site. Você decide o que acontece quando ele é clicado: a página do produto pode ser aberta ou o produto pode ser adicionado ao carrinho.
Observação:
O widget do produto não está disponível no Editor X no momento. Você pode, no entanto, apresentar produtos de outras maneiras, por exemplo, com uma landing page. Saiba mais sobre como destacar seus produtos.
Etapa 1 | Adicione um widget do produto
O widget do produto existe em dois estilos: um estilo compacto e um expandido. Escolha o estilo que melhor se adapta às suas necessidades.
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2d3f30b2-74a7-4aec-8ef7-67de4fff5318/2020/11/08/a034cf0e-da18-4cc4-b937-d5d8495a9bda/cd91c041-7678-455a-99e4-1508b381e80b.png)
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2d3f30b2-74a7-4aec-8ef7-67de4fff5318/2020/11/08/26644ae1-3b48-4f59-a6f2-475bd1242bcd/2f78504a-defb-41db-b9f0-86641bb703b5.png)
Para adicionar um widget do produto:
- Vá para a página em que você deseja adicionar o Widget do produto.
- Clique em Adicionar
no lado esquerdo do Editor.
- Clique em Loja.
- Clique em Widget do produto.
- Arraste um widget do produto para sua página.
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2d3f30b2-74a7-4aec-8ef7-67de4fff5318/2022/02/23/36f9547b-8073-4972-82c7-cea988164ad9/5db5ca0d-a6be-4f7c-8cc5-bbb94f66a937.gif)
Etapa 2 | Conecte o widget a um produto
Com o widget do produto, você pode mostrar um dos seus produtos, facilitando o processo de compra. Para configurá-lo, escolha o produto que você deseja promover.
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2d3f30b2-74a7-4aec-8ef7-67de4fff5318/2022/02/23/098d95c5-866d-4d52-8c43-cb1710baa490/a516d4e4-303d-40c0-8cc6-7919f2d3c55d.gif)
Para conectar um produto ao widget:
- Clique no widget do produto na sua página no Editor.
- Clique em Configurações.
- Clique no ícone de seta
.
- Selecione um produto.
Etapa 3 | Defina o comportamento do widget
Agora você pode escolher se deseja exibir um botão no widget. Se quiser xibi-lo, você pode escolher para onde seu cliente é direcionado quando clica nele: para a página do produto ou para o pop-up Visualização rápida.
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2d3f30b2-74a7-4aec-8ef7-67de4fff5318/2022/02/23/5792ff01-1235-42e9-b4d8-d66f53ba0e18/418afc49-d5b3-4f5e-8cb3-89d7efa931ca.png)
Para definir o comportamento do widget:
- Clique no widget do produto na sua página no Editor.
- Clique em Configurações.
- Clique na aba Configurações.
- Escolha quando mostrar o Widget Botão:
- Todo tempo: o botão está sempre visível.
- Apenas ao passar o mouse: o botão é visível quando o mouse passa sobre ele (o botão não aparece em dispositivos móveis).
- Nunca: nenhum botão é exibido.
- Escolha o que acontece quando o botão é clicado:
- Ir para a página do produto: os clientes são direcionados para a página do produto.
- Adicionar produto ao carrinho: os clientes são direcionados para a Visualização rápida do produto, onde podem adicioná-lo ao carrinho.
- Edite o texto padrão do botão.
- Edite a mensagem "Esgotado" que aparece automaticamente quando o estoque é zero.
Etapa 4 | Personalize o layout do widget
Cada um dos dois estilos do Widget do produto tem uma variedade de opções de layout. Clique na aba Layout para escolher e personalizar o layout.
Para personalizar o layout:
- Clique no widget do produto na sua página no Editor.
- Clique em Configurações.
- Clique na aba Layout.
- Escolha o estilo que você deseja personalizar:
Personalizar o layout de estilo compacto
Personalize o layout de estilo expandido
Etapa 5 | Crie o design do Widget
Selecione as cores, bordas e fontes perfeitas para o Widget do seu produto.
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2d3f30b2-74a7-4aec-8ef7-67de4fff5318/2022/02/23/a8aee426-aafb-4997-8b28-6b45081195e1/50fa2d0e-332e-4f4a-8fbf-8c84502825f8.png)
Para atualizar o design do widget:
- Clique no widget do produto na sua página no Editor.
- Clique em Configurações.
- Clique na aba Design.
- Atualize o design usando qualquer uma das opções disponíveis.
Saiba mais sobre as opções de design
Esse artigo foi útil?
|