Google PAgeSpeed Tips 1) Leverage Browser Caching 2) Eliminate render-blocking JavaScript

Using Google Web Tools PageSpeed Insights you can see analyze your site and see what Google says you can do to speed up your site, specifically.

If Google says to Leverage Browser Caching then simply paste the following in the .htaccess file in the root of your website, probably public_html

# Turn on Expires and set default to 0
ExpiresActive On
ExpiresDefault A0

# Set up caching on media files for 5 weeks
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
ExpiresDefault A3024000
Header append Cache-Control "public"

# Set up caching on media files for 5 weeks
<FilesMatch "\.(gif|jpg|jpeg|png|swf)$">
ExpiresDefault A3024000
Header append Cache-Control "public"

# Set up 5 week caching on commonly updated files
<FilesMatch "\.(xml|txt|html|js|css)$">
ExpiresDefault A3024000
Header append Cache-Control "proxy-revalidate"

# Force no caching for dynamic files
<FilesMatch "\.(php|cgi|pl|htm)$">
ExpiresActive Off
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
Header set Pragma "no-cache

Eliminate render-blocking JavaScript is even easier. Simply add the ‘async’ attribute. See below:

<script async src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<script async src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

Add an Email Link to Webpage

Email links use a link tag

<a href> tag.

for example a basic link would be:

<a href="mailto:youremailaddress">Email Me</a>

Clicking this opens a visitor’s email program with your address already in the To: field.

Add a subject :

<a href="">
Email Me</a>

Add specific text in the body of their message, simply add &body=:

<a href=" send me a copy of your new program!">Email Me</a>

Or combine all the options and allow your visitor to send email with the address, subject and text already entered.

<a href="
&body=Please send me a copy of your new program!">Email Me</a>

OpenCart Adding a Message to the Checkout process

1) Front page
If you are using the slideshow, you can add a message directly below the slideshow.
Open: catalog>view>theme>default>template>module>slideshow.tpl

about line 30 underneath:


  <?php } ?>


<p class="slideshow-spacer"><hr /></p>
<!--- start message section here--->
  <div class="row">
      <div class="col-sm-6">
        <h3>Message Title!</h3>
        some text you would like to appear on the left
      <div class="col-sm-6">
        Put an image on the right side:<img src="image/catalog/onvacation.jpg" alt="On vaction" class="img-responsive" />
<p class="slideshow-spacer"><hr /></p>
<!--- end message section here--->

2) On Checkout page:

$_['text_checkout_shipping_method']  = 'Step 3: Shipping Method';


$_['text_checkout_shipping_method']  = 'Step 3: Shipping Method. Add whatever message you would like to appear above the shipping method choices';

Do the same for

$_['text_checkout_payment_method']   = 'Step 4: Payment Method';

add you can add a message above the payment method choices.

3) Once the customer completes checkout, display another reminder.
catalog>language>english>checkout>success.php and add your message to both ‘text customer’ and ‘text guest’.

$_['text_customer']        = '<p>Your order has been successfully processed!</p><p>You can view your order history by going to the <a href="%s">my account</a> page and by clicking on <a href="%s">history</a>.</p><p>Please direct any questions you have to <a href="%s">Store Owner</a>.</p><p>Thanks for shopping with us online!</p>';
$_['text_guest']           = '<p>Your order has been successfully processed!</p><p>Please direct any questions you have to the <a href="%s">Store Owner</a>.</p><p>Thanks for shopping with us online!</p>';

4) Finally change the order confirmation email to reflect your message.
catalog>language>english>mail>order.php and change the text below:

$_['text_new_greeting']         = 'Thank you for your order!';

OpenCart 2.0: Display Product Size underneath Product Price.

OpenCart has a very useful and functional attribute system that allows you add just about anything you wish to the product description. However, the added attribute is added in an extra tab. This hack lets you add the product size directly under the product price.
Screen Shot 2015-06-11 at 2.17.50 PM

This hack will also add the product size to the item in the shopping cart.
Screen Shot 2015-06-11 at 2.27.51 PM

This technique is a hack because it uses an already existing field, ‘jan’ in the oc_product table to store the product size. However, the technique is easy to do because the admin already is set up to add data to the field. See admin>products>edit your product>data>JAN . (If you sell in Japan and need that field you can perhaps use the EAN field instead). *It would also be less of a hack when I get this converted to OCMOD.

Step 1:
Open catalog/controller/product/product.php. Find about line 271

$data['points'] = $product_info['points'];

Insert directly beneath

$data['jan'] = $product_info['jan'];

Step 2:
Open catalog/view/theme/my template/template/product/product.tpl find about line 75

<?php if ($tax) { ?>
            <li><?php echo $text_tax; ?> <?php echo $tax; ?></li>
            <?php } ?>

Insert directly beneath:

<li>size: <?php echo $jan; ?></li>

These two steps will display the value entered into admin>products>edit your product>data>JAN directly beneath the price on the products page.

Step 3:
Open system/library/cart.php find about line 245

'model'           => $product_query->row['model'],

insert directly below:

'jan'           => $product_query->row['jan'],

Step 4:
Open catalog/view/theme/your template/template/checkout/ and find

<?php if ($product['option']) { ?>
                  <?php foreach ($product['option'] as $option) { ?>
                  <br />
                  <small><?php echo $option['name']; ?>: <?php echo $option['value']; ?></small>
                  <?php } ?>
                  <?php } ?>

Insert directly beneath:

<br /><small><?php echo $product['jan']; ?></small>

Now any value display in JAN will display beneath the product name in the shopping cart.

Finally open admin/language/english/catalog/product.php and change

$_['entry_jan']              = 'JAN';


$_['entry_jan']              = 'Retail Size';

OpenCart 2.0: Display Text over the Front Page Slideshow Banner Images

Here is a quick and simple hack that allows you to display text messages and/or html anywhere on the Slideshow images. It is a hack, but it requires only pasting a snippet of simple code to view>theme>default>template>module>slideshow.tpl and adding several CSS selectors to view>theme>default>stylesheet>stylesheet.css. This hack will work with up to three images.

This hack readjusts the size of the text as the screen gets smaller, and hides the it on small devices so the slideshow displays properly on mobile devices and this keep the text from overlapping the images the screen size decreases. Using the CSS you can move the text and the banner image around the screen independently of one another.

To get the exact title of the banner.  Set up your slideshow as usual in open cart, and cut and paste the title from banner>edit banner.


step 1) add to stylesheet.css:

/*slideshow CSS override*/
/*position the banner image for large screen*/
@media (min-width: 768px)

@media (max-width: 767px){

  position: absolute;
  width: 30%;
  height: 100%;
  top: 0;
  right: 115px;

.bannertitle h1{

.bannertitle h2{

@media (max-width: 992px) {
    right: 50px;padding:0px;
  .bannertitle h1{
  .bannertitle h2{

step 2: In slideshow.tpl replace everything within <div class=”item”></div> tags , including the div tags with:

<div class="item">

  <!--banner title mod-->
   <div class="bannertitle hidden-xs">
$bannertitle = $banner['title'];
if($bannertitle == "exact title of first image"){
	echo "<h1>Example Text:</h1><h2>More example text to appear over image</h2>";
    }elseif($bannertitle == "exact title of second image"){
    echo "<h1>Different Text</h1><h2>different text to appear over image</h2>";
    echo "<h1>More Text</h1><h2>yet another bit of text to appear</h2>";
    <div class="bannerimage">
       <div class="bannerimage-recenter">
  <!--stop banner title mod-->

    <?php if ($banner['link']) { ?>
    <a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" /></a>
    <?php } else { ?>
    <img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
    <?php } ?>
    <!-- start banner title mod-->
    <!--stop banner title mod-->

You can do the same hack to get unique taglines to replace the category name.
Open view/theme/default/template/product/category.tpl
Just below:

<div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?>

add the following:

		if($heading_title == "Acne"){
    		$heading_tagline='The Acne Treatment That Moisturizes the Skin';
    		}elseif($heading_title == "Anti-Aging"){
    		$heading_tagline='Exquisite Anti-Aging for Sensitive Skin';
    		$heading_tagline='Skin softening for Rosacea product/category.tpl';

Then just below that change:

 <h2><?php echo $heading_title; ?></h2>


 <h2><?php echo $heading_tagline; ?></h2>

OSCommerce Basics: Posting A Variable with a form

This is the basic code used in OSCommerce to create a form and send a value to a page, and display that value on that page.

echo tep_draw_form('', tep_href_link('index.php', 'action=post', 'SSL'));
echo tep_draw_input_field('my_form', '');
echo tep_image_submit('', 'submit', '');
echo '</form>';

The oscommerce function tep_draw_form() creates a form, the oscommerce function tep_draw_input_field() creates a text box. You can tell these are functions because they have () after their name. (The programming knows to look in the file includes>functions>html_output to find out exactly how output these functions and so can you) .

The tep_draw_input_field() function is written so that the value in the first set of single quotes is recognized as the name of the input. In this case the name of the input is ‘my_form’. The function tep_image_submit(), also found in includes>functions>html_output, creates a submit button and </form> completes and closes the form.

Note the function within a function, tep_href_link() . This tells the form what page to send, or post, the input to. It can be the same page or another page. When you hit the submit button, you will go to that page. If on that page you have the code $HTTP_POST_VARS[‘my_form’], then that page knows to look for and capture the input called ‘my_form’ from the form. The input is now available to be used on that page in any of it’s programming. If you want to see that input, (and it is not necessary to do so in order to use that input), simply echo that variable on that page.

You can also substitute a number of other form types for the text box form, tep_draw_input_field(). For example the function tep_draw_checkbox_field() draws a checkbox. Now your code would be:

echo tep_draw_form('my_form', tep_href_link('index.php', 'action=post', 'SSL'));
echo tep_draw_checkbox_field('my_form', 'donuts');
echo tep_image_submit('', 'submit', '');
echo '</form>';

Note that the information, or value to be transmitted needs to be in the checkbox function, within the brackets() in the second set of quotes. And thus in this case $my_new_variable instead of being equal to anything that is typed into a text box, would always be equal to ‘donuts’.

Is Your Website Secure? Check it and See.

Here is a quick, easy and informative way to see if you have your https setup correctly on your website. My friendly webhost tech told me about this site,

Simply go to and enter the page on your website address you want to check.

Within seconds it will check and see if your SSL certificate is valid, tell you when it expires and who issued it. Perhaps more informatively, It will also list any unsecure items on the page, such as a link or image not properly posted, (for example if you have hardcoded it and not used the proper OSCommerce format).

If your customers are getting that browser warning that your site contains insecure items, this site will tell you what is causing that.

Another site that provides this same info but a bit more graphically pleasing is

Mobile OSCommerce

Mobile OSCommerce is a fast, light-weight add-on for OSCommerce, that makes it easy to search, select and buy items from an existing OSCommerce shop with a mobile device. Installation is simple, upload 26 files and add file definitions to includes/filename.php. Designed to upload directly into an existing Installation of OSCommerce OSC to CSS v2. Expect some html and configuration adjustment. (Will also work with OSCommerce 2.2 and 2.3). It uses the existing checkout programming, and should work with most payment and shipping methods.

DEMO(live niora site)
or visit on your IPhone or other smart phone.

Download the files from the google code repository: download mobile oscommerce

Installing Mobile OSCommerce on OSCommerce 2.3 and OSCommerce 2.2RC2a:
To install Mobile OSCommerce on these versions you must replace includes/classes/boxes.php with the same file from OSC to CSSv2. (or paste the additional classes from that file to your includes/classes/boxes.php). You will also need to replace the submit buttons in OSCommerce 2.3, or add an image to the submit buttons.

To direct mobile devices users to the mobile site once installed on your website, you will need to paste in a snippet or two of code. Here’s how:
Smart Phone Detection for Mobile OSCommerce

First published Dec 31, 2010