How to add Accepted payments banner in footer

Last modified by Christian_Norway on Thu, June 24, 2010 17:04
Source|Old Revisions  

Hi folks,

This small tutorial is going to show how you can add payment banners in the footer of you Magento store’s home page.

See picture blow for an example:

Well first of I’d like to say is, please correct my code. As I am no professional coder, this is done probably in a “dirty” way.

An example of errors in my code is that I’ve used static source addresses to the images for the accepted payment banners. THis is the dynamic address for the skin address <?php echo $this→getSkinUrl() ?>

Ok, lets get started:

File needed (homepage style.phml and boxes.css):

app > design > frontend > default > default (or your custom design folder) > template > page > your home page style (1column.phtml, 2columns-left.phtml etc.)

In this file (my style is 2column-right.phtml), you will see this code part at the button of the document (row 67 → )

  1.    <!-- [start] footer -->
  2.         <div class="footer-container">
  3.             <div class="footer">
  4.                 <?php echo $this->getChildHtml('footer') ?>
  5.             </div>
  6.             <div class="payment_options_footer">
  8.               <img src="<?php echo $this->getSkinUrl() ?>/images/payment_logo/maestro.jpg" border="0" />
  9.             <img src="<?php echo $this->getSkinUrl() ?>/images/payment_logo/mastercard.jpg" border="0" />
  10.             <img src="<?php echo $this->getSkinUrl() ?>/images/payment_logo/visa.jpg" border="0" />
  11.             <img src="<?php echo $this->getSkinUrl() ?>/images/payment_logo/paypal.jpg" border="0" />
  12.             <img src="<?php echo $this->getSkinUrl() ?>/images/payment_logo/posten.jpg" border="0" />
  16.             </div>
  18.         </div>
  19.          <div class="footer-end"></div>
  20.         <!-- [end] footer -->

As you can see the “accepted payment banner” is not really contained in the “footer” div, but the “footer-container” div. This is done so I could achieve the style that I wanted.

The banner is therefore added to it’s own <div class=”payment_options_footer”>Your images</div>

To create the buttom of my footer I’ve created a second footer after the closing tag of the “footer-container” as can be seen in the code above.

The css style for this can be added to the boxes.css file:

First bit of code is found close to row: 560 in the boxes.css

  1. /********************** Footer */
  2. .footer-container { background:url(../images/footer_background.jpg) repeat-y 50% 0; margin-left: 1px; }
  3. .footer-end { background:url(../images/footer_end.jpg) no-repeat 50% 0; margin-left: 1px; height: 20px; padding-bottom: 10px;} /* Custom */
  4. .footer {
  5.     width:930px;
  6.     margin:0 auto;
  7.     padding:10px 10px 0px; /* Orginal 4em */
  8.     border-top: 1px #000000 solid;
  9.     border-bottom: 1px #000000 solid;
  10.     position:relative;
  11.     }

The second part of the code that I’ve added was for the div class=”payment_options_footer”:

  2. /**************************************************************/
  3. /**********[Custom footer style for payment logos**************/
  4. /**************************************************************/
  6. .payment_options_footer { /* see 2columns-right.phtml */
  7.     width:930px;
  8.     margin:0 auto;
  9.     padding:0px 10px 0px;
  10.     background-color:#FFFFFF;
  11.     position:relative;
  12.     border-bottom: 1px solid #000000;
  13.     }   
  15. .payment_options_footer img {margin-top: 10px;}

Update: If you want this payment banner to show in all pages, just add the code to the other phtml files, such as 3columns.phtml etc. depening on which style you category pages use.