Landing Pages | Federico Jacobi | Graphic designer

Can I do some work for you?

If you like what you see and would like to get some pricing going, please drop me a line at web@federicojacobi.com. I'll get back to you as quickly as I can.

Thanks for visiting my site!

@federico_jacobi

At @100montaditos. I've been looking forward to this day for months now!! @K8Ellie has to come by!! # 2012/05/19

How to make an OSCommerce landing page

Tags: a/b testing, landing pages, optimization, oscommerce, php, programming, split testing — February 18, 2011

OSCommerce can seem kind of closed sometimes, but I asure you: it isn’t. It all about easy custom coding. For landing pages however, it’s more HTML than PHP. Even though your store is all setup nicely, if you are investing in keyword advertising or PPC you want to maximize your return. How do you do that? landing pages are the most common way to go.

Landing pages are regular pages of your website, but usually focused on one of your products or services. In OSC chances are its a product. The key to landing pages is testing, as there are no definitive formulas for making the visitors buy. There are tons of articles on the science of landing pages and a/b split testing … read some! Here’s how you do it:

Create an empty file landingpage-1.php
Add the the usual OSCommerce structure. Assuming your OSC install is virgin it goes like this: applicationtop, header, columnleft, content, columnright, footer, applicationbottom. See below for osc2.2rca or osc2.3+
make sure Google Analytics or whatever you use to track performace is working.

OSC 2.3+

With the newest version of OSCommerce the setup is very easy to do. Because of the stock templating system, header+columnleft and columnright+footer are combined kinda. Here’s the code:

<?php
  require('includes/application_top.php');
  require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_CONDITIONS);
  $breadcrumb->add(NAVBAR_TITLE, tep_href_link(FILENAME_CONDITIONS));
  require(DIR_WS_INCLUDES . 'template_top.php');
?>
<?php echo HEADING_TITLE; ?>


    ***********  YOUR LANDING PAGE CODE GOES HERE ****************
  


<?php
  require(DIR_WS_INCLUDES . 'template_bottom.php');
  require(DIR_WS_INCLUDES . 'application_bottom.php');
?>

Just replace the lines and voilá.

OSC 2.2rca

This is a little tricker as it can be easier or harder depending on how modified your design is. On a virgin install is straight foward, on a modified one where there’s some kind of templating going on or the columns have been moved you will need to read on your files. Here’s the code for a virgin version:

<?php
  require('includes/application_top.php');
  require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_CONDITIONS);
  $breadcrumb->add(NAVBAR_TITLE, tep_href_link(FILENAME_CONDITIONS));
?>
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html <?php echo HTML_PARAMS; ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>">
<title><?php echo TITLE; ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
<!-- header //-->
<?php require(DIR_WS_INCLUDES . 'header.php'); ?>
<!-- header_eof //-->

<!-- body //-->
<table border="0" width="100%" cellspacing="3" cellpadding="3">
  <tr>
    <td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">
<!-- left_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>
<!-- left_navigation_eof //-->
    </table></td>
<!-- body_text //-->
    <td width="100%" valign="top"><table border="0" width="100%" cellspacing="0" cellpadding="0">
      <tr>
        <td><table border="0" width="100%" cellspacing="0" cellpadding="0">
          <tr>
            <td class="pageHeading"><?php echo HEADING_TITLE; ?></td>
            <td class="pageHeading" align="right"><?php echo tep_image(DIR_WS_IMAGES . 'table_background_specials.gif', HEADING_TITLE, HEADING_IMAGE_WIDTH, HEADING_IMAGE_HEIGHT); ?></td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
      </tr>
      <tr>
        <td class="main">***********  YOUR LANDING PAGE CODE GOES HERE ****************</td>
      </tr>
    </table></td>
<!-- body_text_eof //-->
    <td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">
<!-- right_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_right.php'); ?>
<!-- right_navigation_eof //-->
    </table></td>
  </tr>
</table>
<!-- body_eof //-->

<!-- footer //-->
<?php require(DIR_WS_INCLUDES . 'footer.php'); ?>
<!-- footer_eof //-->
<br>
</body>
</html>
<?php require(DIR_WS_INCLUDES . 'application_bottom.php'); ?>

There you have it!. If you have any other thoughts … please share them!

Comments (0)