Collect required specific credit card icons, for instance, the icons of a regional bank in your
country; make sure to visit the official site of the bank first to get the most recent icons. They
are usually presented in the sections titled logo center, brand materials, media center, and
so on. Credit cards may also look different depending on the country they are supposed to be
used in. I have used some typical free credit card icons from http://www.virtuallnk.
com/credit-card-icons.aspx.
1. Let's assume that you have already collected the credit card icons that will be shown
in the accepted payment banner.
2. Fire up your file explorer and point it to the skin/frontend/default/default/
images/ directory. Now, create a new directory there named payment_logos and
paste your logos in it.
3. Find and open the file named footer.phtml from app/design/frontend/
base/default/template/page/html/ directory. Look for the block as:
<!-- start footer -->
<div class="footer-container">
<div class="footer">
<?php echo $this->getChildHtml('footer') ?>
</div>
</div>
<!-- end footer -->
4. Modify this block and make it like this one:
<!-- start footer -->
<div class="footer-container">
<div class="footer">
<?php echo $this->getChildHtml('footer') ?>
</div>
<div id="payment-logos">
<ul class="mini-product-tags">
<li><img src="<?php echo $this-
>getSkinUrl('images/payment_logos/amex.png'); ?>"
alt="amex"/></li>
<li><img src="<?php echo $this-
>getSkinUrl('images/payment_logos/discover.png'); ?>"
alt="discover"/></li>
<li><img src="<?php echo $this-
>getSkinUrl('images/payment_logos/eCheck.png'); ?>"
alt="eCheck"/></li>
<li><img src="<?php echo $this-
>getSkinUrl('images/payment_logos/masterCard.png'); ?>"
alt="master card"/></li>
<li><img src="<?php echo $this-
>getSkinUrl('images/payment_logos/paypal.png'); ?>"
alt="paypal"/></li>
<li><img src="<?php echo $this-
>getSkinUrl('images/payment_logos/visa.png'); ?>"
alt="visa"/></li>
</ul>
</div>
</div>
<!-- end footer -->
5. Repeat steps 3 and 4 in other template files such as 2columns-left.phtml,
1column.phtml, and 3columns.phtml, if you want it or you can put it in app/
design/frontend/base/default/template/page/html/footer.phtml,
so that it would be called in every page.
6. Reload your shop home page to see the accepted payment banner in action. It should
be something like the following screenshot: