duvida que tive logo no comeco era a de como colocar o icone do carrinho de compras com a quantidade de itens no topo da minha loja. Na epoca(quer dizer, alguns meses atras), havia procurado tutoriais e, como na maioria das vezes, nao havia encontrado algo que realmente me ajudasse. Como estava apenas estudando o Magento, resolvi deixar para la, so que, recentemente, essa curiosidade virou uma necessidade para o meu projeto em execucao. Depois de testar varias formas, finalmente consegui colocar esse bendito icone! E ainda melhor, consegui mudar ele, diferenciando quando o carrinho estiver vazio ou cheio! Sei que nao e uma grande descoberta, mas para mim foi! Nesse tutorial vou postar o passo-a-passo de como fazer isso, espero que ajude alguem!1o Passo - Baixar os icones e colocar no diretorio images:Nesse exemplo voce tera que baixar dois icones, um para o carrinho vazio e outro para o carrinho cheio.Pesquisando um pouco, encontrei o seguinte link: 18 Free Ecommerce Icon Sets Tutorialque contem dicas de sites que oferecem icones free. No meu caso, eu baixei esse aqui:Freebie: Professional E-Commerce Icons Set (20 Icons). Fique a vontade para escolher os seus!Apos baixar as imagens, mova-as para o seguinte diretorio:skin->frontend->default->SeuTema->images2o Passo - Criar o arquivo para a exibicao do carrinho no header:Em app->design->frontend->default->SeuTema->template->checkout->cart crie um arquivo chamado header.cart.phtml com o seguinte conteudo: <?php $_cartQty = $this->getSummaryCount() ?> <?php if ($_cartQty == 0): ?> <?php echo $this->__('<a href="%s" id="ico-cart"><img src='.$this->getSkinUrl('images/carrinho-vazio.png').' /><br />Vazio</a>', $this->getUrl('checkout/cart')) ?> <?php elseif ($_cartQty == 1): ?> <?php echo $this->__('<a href="%s" id="ico-cart"><img src='.$this->getSkinUrl('images/carrinho-cheio.png').' /><br />1 item</a>', $this->getUrl('checkout/cart')) ?> <?php else: ?> <?php echo $this->__('<a href="%s" id="ico-cart"><img src='.$this->getSkinUrl('images/carrinho-cheio.png').' /><br />%s itens</a>', $this->getUrl('checkout/cart'), $_cartQty) ?> <?php endif ?>Substituindo carrinho-vazio.png e carrinho-cheio.png pelos icones salvos anteriormente.3o Passo - Adicionar a chamada do bloco no header do page.xml:Abra o arquivo page.xml(app->design->frontend->default->SeuTema->layout) e procure o seguinte trecho: <block type="page/html_header" name="header" as="header">Logo abaixo dele, insira o seguinte codigo: <block type="checkout/cart_sidebar" name="headerCart" as="headerCart" template="checkout/cart/header.cart.phtml"/> 4o Passo - Chamar o bloco no header do template:Abra o arquivo header.phtml(app->design->frontend->default->SeuTema->template->page->html) e procure o seguinte: <?php echo $this->getChildHtml('topLinks') ?>Logo acima, insira o seguinte codigo: <?php echo $this->getChildHtml('headerCart') ?>5o Passo - Editar o css para que carrinho fique alinhado:No arquivo styles.css(skin->frontend->default->SeuTema->css) insira o seguinte, logo no inicio:a#ico-cart { float:right; text-align:center; color:#ebbc58; }Nessa div voce podera especificar a cor do texto, o alinhamento, a fonte, o tamanho etc.Nesse caso, escolhi essa cor para se igualar aos top-links. Customize como achar necessario!Para que os top-links nao fiquem "grudados" com o carrinho, procure a seguinte div:.header .links { float:right; margin:0 0 6px; }E mude para:.header .links { float:right; margin-top:20px; margin-right:20px; }6o Passo e ultimo - Comentar a chamada do top-link "Meu Carrinho":No arquivo checkout.xml(app->design->frontend->default->SeuTema->layout) procure o seguinte termo: <reference name="top.links"> <block type="checkout/links" name="checkout_cart_link"> <action method="addCartLink"></action> <action method="addCheckoutLink"></action> </block> </reference>Comente a tag action method="addCartLink", deixando o codigo assim: <reference name="top.links"> <block type="checkout/links" name="checkout_cart_link"> <!--<action method="addCartLink"></action>--> <action method="addCheckoutLink"></action> </block> </reference>O resultado sera o seguinte:Para finalizar, quero deixar bem claro que o estilo(css) depende muito do seu tema e que esse tutorial foi testado no default!