Uma das estratégias mais poderosas para aumentar o ticket médio da sua loja: Venda Agregada – um recurso nativo da plataforma de cor Magenta – e que muitas pessoas desconhecem ou não sabem como usar.
Aprendemos neste artigo a configurar e customizar o UpSell, gerando valor ao cliente e ao seu ticket.
Escolha seus produtos
Acesse o admin da sua loja, vá no menu Catalog > Products > Escolha um produto para editar.
Procure por Related Products, Up-Sells, and Cross-Sells (Produtos Relacionados, Venda Agregada, Venda Cruzada). Clique no botão Add Up-Sell Products [Adicionar Produtos Agregados].
Na janela que abrir, você pode usar o Filtro para selecionar alguns produtos. Depois basta marcar o checkbox à esquerda dos itens que deseja agregar, e por fim, clicar no botão Add Selected Products [Adicionar Selecionados].
Feito isso, clique no botão Salvar no alto da tela.
Veja o resultado
Para este tipo de configuração, não é necessário limpar o cache, basta atualizar a página do produto e o resultado será imediato (há não ser que você utilize algum sistema de cache externo, como Cloudflare ou Redis e precise forçar atualização).
Role a página para ver o resultado. A forma como os produtos são exibidos depende do seu tema, por isso não há maneiras de customizar isso no admin. A frase “We found other products you might like!” pode ser alterada de diversas maneiras, veja o post sobre tradução customizada.
Codificando a venda agregada
Para transformar a maneira como estes produtos são exibidos, existem basicamente três formas: XML, phtml, e CSS.
O XML você encontra em:
/vendor/magento/module-catalog/view/frontend/layout/catalog_product_view.xml
<block class="Magento\Catalog\Block\Product\ProductList\Upsell" name="product.info.upsell" template="Magento_Catalog::product/list/items.phtml">
<arguments>
<argument name="type" xsi:type="string">upsell</argument>
<argument name="view_model" xsi:type="object">Magento\Catalog\ViewModel\Product\Listing\PreparePostData</argument>
</arguments>
...
</block>
Evite alterar arquivos da pasta “vendor”. Faça sempre uma cópia para dentro do seu template/tema customizado, e edite a cópia. Referência versão Community: 2.4.1
O phtml você encontra em:
/vendor/magento/module-catalog/view/frontend/templates/product/list/items.phtml
<?php if ($type == 'related' || $type == 'upsell'):?>
Tenha atenção, pois o mesmo arquivo que controla o upsell (venda agregada) também controla o related (relacionados). O código está todo amarrado.
O CSS/LESS você encontra em:
/vendor/magento/theme-frontend-luma/Magento_Catalog/web/css/source/_module.less
E javascript não!? Eventualmente sim… é uma opção, o javascript pode ser importado via XML, ou embutido no phtml.
Mais informação sobre venda agregada…
Aproveite e veja também os artigos Venda Cruzada no M2, Produtos Relacionados no M2. Você também encontra aqui no post o artigo Venda Agregada para M1.
Se tiver interesse em aprender mais sobre a administração dos recursos da sua loja, conheça o curso Como usar, gerenciar e administrar uma loja M2.
Por fim, encontre diversos temas de alta qualidade para deixar sua loja com uma aparência ainda mais profissional em ThemeForest.
Sucesso!
Você precisa fazer login para comentar.