Venda Agregada – UpSell no M2

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

Como configurar a função de Venda Agregada no M2.

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

Selecionando os produtos para venda agregada no M2.

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

Resultado da configuração da venda agregada.

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!