BUY button – is your OUT and PROUD ?

Yesterday I stumbled across a really interesting article, you can read it here. Basically, this article talks about the size of a BUY button which set me to thinking…

How about changing the BUY button to something bigger and brighter.

The BUY button has to be the most important button in any e-commerce site so why not make it stand out and proud?

A basic osCommerce install has buy button that looks like this:

Which doesn’t do too much for your buyers experience in my opinion! Of course you can make your own buttons easily I previously posted about an online button generator that I found…

But how about using a totally different style of buy button, such as:

Doesn’t this look so much better than a plain flat, boring button? It’s certainly more eye-catching in my opinion. What do you think?

Would you be brave enough to swap out your tiny little buy buttons for something more outstanding like this?

Do you think that changing would hurt or help your sales?  Let’s get a discussion going on this!

The Top 20(ish) osCommerce stores have these buttons:

In my opinion, the more “interesting” buy buttons are nearer the bottom of the graphic.

So, what next?

I am going to make a new buy button for my own oscommerce site!  Once I have it made, I’ll post the URL so that you can see if it makes any difference!

PCI Compliance

PCI DSS stands for Payment Card Industry Data Security Standard. It was developed by the major credit card companies as a guideline to help organizations that process card payments prevent credit card fraud, cracking and various other security vulnerabilities and threats. A company processing, storing, or transmitting payment card data must be PCI DSS compliant or risk losing their ability to process credit card payments and being audited and/or fined. Merchants and payment card service providers must validate their compliance periodically. This validation gets conducted by auditors – i.e. persons who are the PCI DSS Qualified Security Assessors (QSAs). Although individuals receive QSA status reports on compliance can only be signed off by an individual QSA on behalf of a PCI council approved consultancy. Smaller companies, processing fewer than about 80,000 transactions a year, are allowed to perform a self-assessment questionaire. Source: wikipedia.

I used to have a customer that processed payments through his own PDQ (POS Terminal) machine – in order to save the cost of purchasing an external processor such as ProtX or Worldpay etc. Many times, I told him that if his site got abused, he could be liable for big trouble – fortunately his site never did get hacked whilst he was with me. He went to some other coder 3 or 4 years ago – I have no idea if he is still storing CC info in the database.

Just yesterday, I came across a post in the osCommerce Forum where someone wanted the ability to take CC detials directly via his site – obviously that store owner needs to be re-educated. Whose responsibility is that – surely each service provider should be sending letters to their customers to remind customers of the importance of not storing CC details.

Anyway, the point of this post is to make you aware that your site must be PCI compliant – this means acting within the rules and regulations set out by your service provider. If you are in breach, and you get caught out, you’ll be sh1t-deep in trouble.

PLEASE do not store CC details in your osCommerce shop – PLEASE do not use the Credit Card Module that ships with osCommerce. If you want to take Credit Cards, use an external processor such as Worldpay, ProtX or even Paypal – let them take the worry away from you!

What Happens If YOUR Business Does Not Become PCI Compliant?

PCI Compliance is a requirement of your contract with the credit card companies. If you do not make your business PCI compliant, you are in violation of your contract. The credit card companies can take the following actions if your business does not abide by the security standards.

  • Visa may charge your business up to $500,000 per incident if your network and the information of consumers is compromised.
  • You may be banned from allowing your customers to use credit cards issued by the company that finds your business non-compliant.
  • If you do not notify the companies of probable or actual violations or thefts of our customers’ information, you will also be fined. Again, Visa can charge you as much as $100,000 per incident.
  • Other fines may be charged if the credit card company feels that the your company’s violations pose a risk to the credit card company and/or its members.

Read more online at pcicomplianceguide.org

osCommerce on localhost Tutorial

I just finished up the “osCommerce on localhost” package and it has been tested by a handful of people.  So I’d like to introduce the “osCommerce on localhost” tutorial over at oscbooks.com

This package auto installs the following onto your windows computer:

  • PHP, MySQL and PHPMyAdmin
  • osCommerce
  • osCommerce with STS

Already got an osCommerce Store online?

The tutorial shows how to take a “live shop” (let’s say one that’s been running for a few months or years) and mirror it exactly on “localhost” – what this does is give you your own store on which you can make as many changes as you like safe in the knowledge that your “live shop” is not going to break because of your coding errors.  Or maybe you want to try to install a contribution but don’t want your site showing errors whilst you are doing it?  Or maybe a re-design is in order?  Do it on your home computer, then MIRROR it onto your live site!

Or are you a “newbie” to osCommerce?

Well now you can test out osCommerce as much as you like without having to purchase a domain name or hosting.  Once you are happy with it, it’s simple to mirror image the “localhost” site to a “live” site by simply following my directions.

I would post more, but you might just as well go to the oscbooks site and have a read of exactly what is contained in the package.

Enjoy!

osCommerce Breadcrumb Tips

Breadcrumbs or breadcrumb trails are a navigation technique used in user interfaces. Its purpose is to give users a way to keep track of their location within programs or documents. The term is taken from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.

In osCommerce, the breadcrumb is made up of;

Link to Domain Name > Link to Catalog Install > Link to Category > Link to Product Model

Which isn’t too useful in my opinion.  In fact, I’d go further and say that Breadcrumbs are vurtually useless in almost all ecommerce shops – why have a breadrcumb when there is already a “category” menu and “back” button in a persons browser.

Many years ago, when I was part of a small design team, we actually had shoppers in the office watching how they used site.  As I recall, maybe 1 in 20 actually used the breadcrumb feature of a standard osCommerce installation.

Anyway, if you do have a Breadcrumb, here’s a few tips

If you want to remove the link to your Domain Name, open up /includes/application_top.php and remove this line of code:

[php]$breadcrumb->add(HEADER_TITLE_TOP, HTTP_SERVER);[/php]

If you simply want to change the word “Top”, open up /includes/languages/english.php and change this line of code:

[php]define(‘HEADER_TITLE_TOP’, ‘Top’);[/php]

If you want to remove the link to your Catalog install, open up /includes/application_top.php and remove this line of code:

[php]$breadcrumb->add(HEADER_TITLE_CATALOG, tep_href_link(FILENAME_DEFAULT));[/php]

If you simply want to change the word “Home”, open up /includes/languages/english.php and change this line of code:

[php]define(‘HEADER_TITLE_CATALOG’, ‘Home’);[/php]

If you do not use the “Product Model” field in your product specs, then you might as well use something else in the breadcrumb – I think that using Product Model is dumb anyway – it’s hardly helpful to the customer…so open up /includes/application_top.php and find this:

[php]// add the products model to the breadcrumb trail
if (isset($HTTP_GET_VARS[‘products_id’])) {
$model_query = tep_db_query(“select products_model from ” . TABLE_PRODUCTS . ” where products_id = ‘” . (int)$HTTP_GET_VARS[‘products_id’] . “‘”);
if (tep_db_num_rows($model_query)) {
$model = tep_db_fetch_array($model_query);
$breadcrumb->add($model[‘products_model’], tep_href_link(FILENAME_PRODUCT_INFO, ‘cPath=’ . $cPath . ‘&products_id=’ . $HTTP_GET_VARS[‘products_id’]));
}
}[/php]

and change it to this:

[php]// add the products NAME to the breadcrumb trail
if (isset($HTTP_GET_VARS[‘products_id’])) {
$model_query = tep_db_query(“select products_name from ” . TABLE_PRODUCTS_DESCRIPTION . ” where products_id = ‘” . (int)$HTTP_GET_VARS[‘products_id’] . “‘”);
if (tep_db_num_rows($model_query)) {
$model = tep_db_fetch_array($model_query);
$breadcrumb->add($model[‘products_name’], tep_href_link(FILENAME_PRODUCT_INFO, ‘cPath=’ . $cPath . ‘&products_id=’ . $HTTP_GET_VARS[‘products_id’]));
}
}[/php]

If you want to change the “seperator” in your breadcrumb from > to something else, open up /includes/header.php and find this code:

[php]$breadcrumb->trail(‘ » ‘)[/php]

and change it to whatever symbol you wish to use.  I think I’ll use a forward slash, so I would change it to this:

[php]$breadcrumb->trail(‘ / ‘)[/php]

If you don’t want the breadcrumb at all, open up /includes/header.php and remove this portion of code:

[php]<td class=”headerNavigation”>&nbsp;&nbsp;<?php echo $breadcrumb->trail(‘ &raquo; ‘); ?></td>[/php]

There you have it, an intro to using the breadcrumb.  Nice and easy, ain’t it?

Changing the Logo

Changing the Logo of a standard install of osCommerce is really easy – all you need to do is upload a new file to overwrite the exisitng file called store-logo.png

In this example, I have added a stripey green background to the area where the logo resides – in order to demonstrate what I mean;

As you can see, because the existing osCommerce logo has a white background, it looks bad.  What I need to do is make a new logo that has a transparent background.  Easy enough – I just open Photoshop and make a quick logo – I save it as a png24 file, and overwrite the old logo…

Now the logo area looks like this:

This is now looking much better, as the green stripes show through the transparent areas of the logo that I made.  Much better!

However, some older browsers just cannot handle PNG files at all well – a prime example of which is Internet Explorer 6 – which a lot of people still use.  In IE6, that same logo looks like this:

As you can see, this is very ugly – so we have two options;

  • Change from PNG to GIF (gif files have transparency available)
  • Use Javascript to remove the grey background and make it transparent

I’ll explain these two options more in-depth in my next blog post.

Installing osCommerce on your own home computer

Recently I’ve been seeing lots of requests for instructions on how to install osCommerce on your own home computer.  There are lots of good reasons why you should do this;

  1. You can test out new contributions easily before adding them to your live store
  2. You can make a design without affecting your live store
  3. You can just see if osCommerce is right for you without having to buy a domain name and hosting

I decided that YES, I could easily write a tutorial showing how to do this, but then I thought why not just supply it all ready to go?  So that all that anyone would need to do is download some files, press a button, open the browser to http://localhost and osCommerce is ready and waiting for you.  Sounds good, right?

Well, hopefully, in the next day or two I will be able to offer this!  My idea is to install 2 flavours of osCommerce;

  1. Standard osCommerce
  2. osCommerce with STS

That way, anyone can decide which to use!  I think that this will be a useful addition to everyone!

eBay is hard work!

I haven’t used eBay for a very long time other than buying the odd item here and there.  In the past couple of weeks I’ve been using eBay to sell a couple of my osCommerce related products – it’s taken me 2 hours to get the the point where I’ve got a live listing.

For starters, eBay UK don’t allow ANY items of a digital nature – so any UK sellers selling osCommerce realted products (eg templates, scripts etc) are now forced to list on eBay.com -also, any digital products must be listed only in 1 certain category in eBay.com – but that category is unselectable!  Argh!

You are probably wondering why I just don’t use an osCommerce shop to sell my stuff … I do!  But eBay has such a large presence on the net that I’m of the opinion that an eBay listing is just as good as having your own shop.  So, why not do both, and get as many sales as possible!

Think about it for your own shop – could you use eBay to sell your stuff?  Or maybe you could use it to create some traffic to your osC Shop?

Making a design work in osCommerce

I thought it might be interesting for you guys to see how I make an osCommerce site. What I do is pretty simple and I do this for every site I built since 2000…

Step 1 is to sketch out my design on a piece of paper – here’s a REAL example:

Sorry about the quality – I don’t have a scanner so I had to take a snap with digital camera! Anyway, I’m sure you get the idea, but if not here’s the same thing in Photoshop:

Basically, what I want is 4 (yes, four) rows in the header:

  • Row 1 will contain the breadcrumb and the checkout, basket links
  • Row 2 will contain the shop logo
  • Row 3 will contain category links (style to look like buttons)
  • Row 4 will contain a search box and a summary of the shopping cart

Underneath these 4 rows, I want 2 columns:

  • 1 “thin” column for the left hand side
  • 1 “fat” column for the content of my site

I hope all this makes sense?

Step 2 is to decide upon the colour scheme. To do this I visit the Online Color Schemer – for this particular site I am using a dark blue and a pale yellow. Blue and yellow usually complement each other quite well.

Step 3 is to create the “thin” column using real osCommerce coding. In this example, I need to move a couple of infoboxes from the sidebars into the header. So I can remove the categories box, the search box and the shopping cart box. As I only use the english language, I can remove the languages box – and I can remove the currencies box as I only use UK Pounds. In addition, I don’t use the manufacturers functionality so I can remove the manufacturers dropdown box and the manufacturers information box.

Step 4 is to reduce the number of new products to 3 – easily done in the Admin section. And add in a way to feature 1 particular product – very simple to do using my own “Featured Product” contribution.

Step 5 is to code up the header area. A simple table of 4 rows is required, each with 2 columns. This is easy – if you don’t know how to code a table have a look at www.w3schools.com – a great online resource for all things HTML. I then insert the relevant infoboxes that I removed from the “thin” column into the right areas. At the same time, I make sure that my new table has stylesheet classes so that I can give it a pretty look…

Step 6 is to remove the right hand column from all my osCommerce pages – takes me 2 minutes to whizz through the 30 or so files to achieve this.

Step 7 is to amend my stylesheet to use “blue” and “yellow” colours, as this is the colour scheme that I decided I would like to use.

And here is what I ended up with, after about 1 hours work:

I understand that this post is not a full on tutorial about how to make code changes to exactly make things happen – I just wanted to bring you an overview of how I do things when I am making an osCommerce shop.

You can see in the screenshot that I have made further changes – I placed the language flags into the header area and swapped about the content of the page. I also swapped the images and text so that everything is “side by side” rather than underneath the image:

In a usual osCommerce set-up the text link is below the image – I think it looks better by the side 🙂

New Look for Site

Since I started the site in 2004, I’ve stuck with the same design until the last few weeks. The old design served it’s purpose fairly well, but was getting stale.

4 years, in internet terms is a VERY long time – so I decided that a “more modern” look was needed. After a bit of brain-storming I came up with the new look which is more of a “blog” layout than a “typical website” layout – although the site is not a blog.

I think the site is much easier to navigate now, and in my opinion it’s certainly more modern looking. Here’s a comment from a friend;

I always thought the old design was a bit ugly

A New Logo!

oscbooks_dk_gif.gif

Which gives a bit more “modern” look again. What do you think?

Here’s the site, and yes, I still have the “Buy One Get One Free” offer running: http://www.oscbooks.com

Error -12263 in osCommerce

Been seeing lots and lots of this error crop up recently in the osCommerce Forums.  I also had a client with this exact same problem…

After a bit of investigation, the problem is that your /includes/configure.php file is calling resources from a SSL that does not exist.

Example;  www.yoursite.com and https://yoursite.com – but you have not yet set up https on your domain.

Solution:  stop using SSL connections until you have it set up!