Detalhe do produto

Articles

Produtos relacionados
Neste tutorial, adicionaremos os produtos relacionados mostrados na parte inferior da página de detalhes do produto. Os produtos relacionados são exibidos usando um slider que mostra uma imagem por slide em mobile e quatro em desktop. Essa fu...
Como adaptar o zoom de produtos para dispositivos móveis
Com a crescente prolifeiração de dispositivos móveis, muitas das interações de nossos websites precisam ser reformuladas. Uma delas é o evento "hover" . Ele é a ação de posicionar o cursor do mouse sobre um elemento, sem clicar. O evento hover acom...
Produtos personalizados
Neste artigo, adicionaremos campos para oferecer produtos mais personalizados. Por exemplo, para casos em que a loja vende camisetas com um número e um nome. Essas informações serão então levadas para o checkout e, finalmente, serão refletidas no d...
Novas opções de pagamento personalizadas
Neste tutorial vamos adicionar à loja a visualização da funcionalidade de múltiplos pagamentos personalizados, o que nos permite diferenciar formas de pagamento como "Depósito Bancário", "Transferência", "A combinar / Dinheiro" e " Pix" com desconto...
Melhorias na informação de parcelas de meios de pagamento
Neste tutorial vamos adicionar na loja algumas melhorias na visualização de parcelas para o pagamento de um produto. Com essa nova funcionalidade, será possível visualizar todas as parcelas disponíveis com e sem juros, bem como as promoções bancária...
Imagens de variações
⚠️ A partir do dia 30 de janeiro de 2023, a biblioteca jQuery será removida do código de nossas lojas, portanto, a função "$" não poderá ser utilizada. Essa funcionalidade permite trocar a imagem principal do produto de acordo com as variações do...
Label com porcentagem de desconto
Neste tutorial, veremos como exibir uma etiqueta que calcula a porcentagem de desconto quando um produto tiver um preço original e um preço promocional, tanto no detalhe do produto quanto na lista: Essa porcentagem é calculada quando o usuário a...
Vídeo para um produto
Neste artigo vamos adicionar um vídeo para o detalhe do produto, mostrado no final da galeria de imagens: Esta funcionalidade, assim como o vídeo na página inicial, permite a exibição de vídeos do Youtube e do Vimeo. Se você já o implementou em ...
Último produto em estoque
Neste tutorial, vamos ver como mostrar uma mensagem para incentivar a compra quando fique a última unidade disponível no detalhe do produto: HTML 1. A primeira coisa que vamos fazer é adicionar o seguinte código no snipplet chamado product-qua...
Imagem do detalhe do produto
Neste tutorial, explicamos como adicionar o componente de imagem nos detalhes do produto. O código neste tutorial inclui: Um slider para imagens de detalhes do produto A mudança de imagem ao modificar variantes de um produto O zoom da image...
Guia de medidas
Neste tutorial vamos ver como adicionar uma guia para oferecer mais informações no momento de escolher um tamanho no detalhe do produto: HTML 1. A primeira coisa que vamos fazer é adicionar o seguinte código no snipplet chamado product-form....
Botões para variações
Neste artigo vamos adicionar botões para mostrar as variações: Esta funcionalidade suporta cores básicas como "azul, verde, vermelho, etc". Caso o produto tenha cores mais personalizadas, como "salmão", em vez de exibir o botão com o fundo dessa...
Preço com desconto por meio de pagamento
Neste artigo vamos adicionar a possibilidade de mostrar o preço com desconto para um meio de pagamento nas listas, no detalhe do produto e no carrinho de compras: HTML 1. Dentro da pasta de snipplets vamos adicionar o componente paymen...
Solucão para guias em branco no modal de formas de pagamento
Este problema afeta lojas com FTP aberto antes de 9 de abril de 2024. Neste tutorial vamos solucionar um erro que pode aparecer no componente de formas de pagamento. No topo do componente existe uma barra de guias, que permite navegar entre as i...
Produtos relacionados: Alternativos e complementares
Neste tutorial, adicionaremos 2 espaços para produtos relacionados (alternativos e complementares) exibidos na parte inferior da página de detalhes do produto. Os tipos de produtos relacionados que serão exibidos são: Produtos da mesma categori...
Mensagem de desconto para forma de pagamento não acumulável
Neste tutorial vamos adicionar 2 mensagens para comunicar que um desconto oferecido por um meio de pagamento não pode ser combinado com outras promoções quando a seguinte opção estiver desativada no meio de pagamento no administrador: Exibido ...
Variações sem estoque
Neste artigo vamos "riscar" as opções que não tiverem estoque quando as variações sejam mostradas como botões. HTML 1. Dentro da pasta snipplets crie outra pasta com o nome product , dentro adicionamos um novo snipplet chamado product-v...