Detalhe do produto

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...

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...

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...

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...

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...

⚠️ 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...

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...

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 ...

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...

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...

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....

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...

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...

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...

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...

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 ...

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...