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!