Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

How to Make an Awesome osCommerce Site


Chance

Recommended Posts

This is a companion to my earlier ?How to Make a Horrible osCommerce Website? post. While I have received countless emails and personal messages about how great that post is, and the obvious humor inside it, I understand that there are a few members of this forum who might take personal offense to some of my points raised.

 

This was never my intention. So, without further introduction, here is the?

 

How to Make an Awesome osCommerce Site:

And by awesome, I mean "Totally Sweet"

 

1. Refresh the Stock Layout.

 

Ok guys, nobody says you have to go buck wild with the layout, change the layouts of the columns and headers, and try to switch osC over to a pure CSS XHTML Valid masterpiece. However, I think everyone will agree that the osCommerce stock blue-gray color info boxes just don?t work with every product. So what can you do?

 

Edit the Stylesheet! It's called stylesheet.css, and its right in your catalog root folder. The cool thing is, you can change colors just by replacing their hex code (like #FFFFFF) with a word like "blue" if you don't know color hex codes! This is the most drop dead simple way of getting away from stock without design changes. Change your colors! Please!

 

Want to change it even more but don't know how? Download and install a Template System contribution.

 

There will be purists who will say ?Template systems are bad? and ?Template systems break compatibility with future versions? and ?Template systems are the devil?. It does not matter- pound for pound, a template system like STS or BTS is going to improve the visual layout of your store and make it more pleasing to the customers eyes if you have little or no design or php experience. What both of these systems do is give you just one page to edit plain HTML in, and it ?skins? the entire osC site.

 

 

There are two main ones out there:

 

BTS contribution: http://www.oscommerce.com/community/contri...ystem+structure

 

STS contribution: http://www.oscommerce.com/community/contri...ystem+structure

 

The great thing about the template systems is that there are numerous free templates that other community members have made available in the contributions section. Just search the contributions for ?template? and I am sure you will find them.

 

Changing the stock buttons is another quick and easy way to update the look of your cart. In the contributions section there is a variable cornucopia of free button sets that community members have uploaded for your use. Just check the ?Image Contributions? section for button sets.

 

Another option is to purchase a commercial template, but for this forum we will stick to what?s free and available on this site in the contribution section.

2. Add a thumbnail contribution

 

Thumbnail contributions are the bee?s knees. They rock, and you are going to love them. They improve load times, they make your images look better, and a site with thumbnails projects an overall more professional appearance to the customer than one with browser-resized images.

 

There are quite a few thumbnail contributions out there. Some allow you to upload small, medium and large pictures, some allow additional product images to go along with your main image, and some automatically resize large images into multiple sizes using image libraries like GD, GD2, and ImageMagick installed on your server (contact your host). The point is, you can get an image contribution that will work with your hosting plan even if you don?t have the advanced image library features.

 

A couple I have checked out and liked (I am sure there are more):

 

UltraPics: http://www.oscommerce.com/community/contri...l/search,MoPics

 

Allows multiple images, multiple file sizes, optional automatic resize using php libraries.

 

On the Fly Auto Thumbnailer: http://www.oscommerce.com/community/contri...,auto+thumbnail

 

Simple, automatic thumbnail generation for your single product image. Not as much cool added stuff like multiple images, but easier to install. Requires GD2 or ImageMagick libraries to function.

 

3. Optimize your Images in Photoshop

There are many image editing programs out there, and I can?t cover each and every one. However, the process is the same. You need to either ?Save for Web? in Photoshop or ?Export > JPEG/GIF Optimizer? in Paint Shop Pro. What this does is allow you to compress your images in quality and color depth so that they download quicker. Quicker loading images means happier customers that spend more time looking at your products and not waiting for the page to load. Happier customers mean more sales and higher conversion rates.

 

You will find that some images save smaller in GIF (ones with fewer colors, and smaller image sizes) and some save smaller in JPEG (photos, product images, larger images, headers). Play around, and try to find the best mix of quality and size.

 

Remember: To pop the page up in less than 8 seconds on 56k, you need to have less than 30k of images. This is probably impossible with an ecommerce site, but it gives you a measuring stick of how long your images are going to take to load.

4. Smooth out the Checkout Process

 

There are numerous industry studies and reports that say shorter, fewer page checkouts improve conversion rates. I personally think the ideal is a two page checkout- Enter your stuff, confirm, you?re done.

 

There is a long and active thread on this forum with many code hints, tips, and tricks on the forums here. It covers checkout, account creation, making the customer log in, etc. It?s a great read, and I would say a requirement for anyone wanting to run an osC shop.

5. Do some market research and find a USP.

 

For the uninitiated, a USP is a Unique Selling Proposition. In layman?s terms, it?s what makes your website special for the customer. It?s why customers would buy from you instead of the big guys, and it?s probably the single most important thing for your sales.

 

You may want to make a website that sells computer parts, but you have to understand that there are 50,000 companies selling computer parts. What is going to set your site apart? Great shipping deals? Lower prices? Advanced configurations? Whatever it is, you need to do your market research, find out what your USP is going to be, and implement it successfully to make money.

 

I deal with the ?Business? side of ecommerce more than the technical aspect, and my company sells hundreds of thousands of dollars of product a year online. Trust me; this is the most important item on this list.

6. Gosh darn it, add an SSL certificate.

 

It does not matter if you plan on using Paypal, Authorize.net, or some other provider. Your site is going to be collecting personal identifiable information in the form of shipping addresses, phone numbers, and customer names. You need an SSL certificate. No ifs, ands, or buts about it.

 

SSL certificates vary in price from $20-$400 a year. Make sure you get a minimum 128 bit security certificate- the rest of the price variation is in name brand recognition of the certificate issuer. I personally think that Geotrust is the best balance of value for price, but there are many others much cheaper and more expensive. Do your research, and buy the one that would make YOU must comfortable as a consumer.

 

7. Add Terms of Use, Privacy Policy, and Conditions of Sale statements.

 

Its easy to forget to add these- You spend 10 weeks tweaking your sites visuals, two months adding products, and you just want to launch that puppy and let it fly. However, these are the documents that people are going to read when deciding if they want to give you their email address or their credit card number.

 

Statistics show that while more and more people are buying online, an increasing number of them are even more wary about privacy policies, if they can return an item, and what making a purchase consents them to.

 

Do your customers a favor and put these policies in place, even if it?s only to cover your own butt. That way if there ever is a problem at least you have a published, established policy you can point the customer to and not come off like you are trying to pull the wool over their eyes and take advantage of them.

 

8. Get descriptive with your products.

 

Tell all about your products. Tell what they are made of, how they fit (Loose? Tight?), what colors they come in, who is their intended user group, what they do, how they do it, why the customer wants to buy it.

 

In a brick-and-mortar store, customers can read the box. They can pick up the item and hold it in their hands, check out all the angles, and try it on. On your website, they can?t. This is why a comprehensive product description is a must.

 

Not only is a customer going to base their purchasing decision off your description (or lack thereof), search engines are going to index your site and position your listings based on the quality of your content. Now which site do you think is going to get the better listing for a given product- The one that says ?Boot? or the one that has two paragraphs about an awesome mid-thigh leather boot with rhinestones, fit and quality of the materials, and care instructions?

 

9. Skip Rich-Media files.

 

Flash, Java, and all that other ?stuff that moves? has no place on a productive website. Adding a flash intro only adds another layer of ?junk? between the customer and the product info page where the action happens. Flash headers only make low bandwidth connections slower to your site. Java image switchers literally crash half the browsers on the planet, and moving junk all over your site makes it look like some AOL homepage.

 

Look at your 10 favorite shopping sites online. Count how many moving, annoying things they have blinking and flashing and scrolling around. Now look at yours. You might want to reassess if that neat Flash header with the annoying SWOOOOSH! Noise every time a page is loaded is really worth it.

 

10. Post your address and phone number on the site

 

Just because people shop online does not mean they don?t want to know who they are dealing with. Make sure you post an address (even if it?s just a PO box- its better than nothing) and a phone number where people can call and at least leave you a message. This is all about customer service, and this is what turns single customers into repeat customers and word-of-mouth advocates of your site (that?s the best advertising money CAN?T buy).

 

Think about getting an 800 number. 800 numbers go a long way toward establishing yourself as a legitimate business. There are some very affordable plans, and if you can?t answer it all day make sure it has some sort of voice mail or machine attached to it. Call your customers back when they call. They will appreciate the personal service.

 

Invest in some nice company mailing labels for your packages- It build brand recognition, makes you look more professional, and lets the customer know that you are a real company that can be trusted.

 

11. Remove that counter thing from the bottom of osCommerce

 

There is not a single successful ecommerce site that broadcasts the number of visitors to their site. Yes, statistics are a powerful tool, and you should always install some sort of statistics package like AWStats (search Google) or similar on your web server. However, counters visible on your website will only show a) your customers how little traffic you are getting and B) your competitors how big of a threat you are.

 

From a technical standpoint- The osCommerce counter is a ?Requests? counter, and does not count visitors anyway. It counts requests created by the includes and database calls in your store, so this number will never be accurate for any statistical purpose.

 

12. Change your page titles

 

We all know osCommerce rocks- That?s why we use it! However, leaving it your page title on your Custom Hand Painted Dishrag store is not the best business move. The easiest way to change your page title is to edit the /includes/languages/English/English.php file. The better alternative is to check the contributions section and download one of the awesome meta-tag controller contributions that allow you to have custom page titles on every page, improving the SEO aspect of your site. One of the template systems even has this built in.

 

13. Stay away from all sorts of cheesy logos

 

There are about a bazillion little ?certified? logos you can put on your site. There are logos from your payment processor, there are logos from eBay, and there are third party logos from about a million companies hawking everything from ?Hacker Safe? to ?Billy Bob?s Best Site of this Week? award.

 

The fact is, the only logos you need to display on your site is your SSL certificate logo, maybe credit card logos for what cards you accept, and that?s it. All that other stuff is just clutter- nobody reads that junk, and it just makes your site look bad.

My advice comes in two flavors- Pick the one that won't offend you.

 

Hard and Cynical: How to Make a Horrible osCommerce Site

 

Warm and Fuzzy: How to Make an Awesome osCommerce Site

Link to comment
Share on other sites

  • 2 weeks later...
I have wanted to get rid of the 'counting' thing forever! Unfortunately, I have yet to figure out exactly where it lives. Help? I wanna be awesome (or at least as close as I can get)

 

 

 

 

I have same problem. Can someone please show how to get rid of the counter thing

Link to comment
Share on other sites

1. Open up your /catalog/includes/footer.php file.

 

2. Delete the following:

 

<table border="0" width="100%" cellspacing="0" cellpadding="1">
  <tr class="footer">
  <td class="footer">  < ?php echo strftime(DATE_FORMAT_LONG); ?>  </td>
  <td align="right" class="footer">  < ?php echo $counter_now . ? ? . FOOTER_TEXT_REQUESTS_SINCE . ? ? . $counter_startdate_formatted; ?>  </td>
  </tr>
  </table>

3. On the same page (footer.php) delete the following code:

 

require(DIR_WS_INCLUDES . ?counter.php?);

 

4. Go get a snack, you?re done.

My advice comes in two flavors- Pick the one that won't offend you.

 

Hard and Cynical: How to Make a Horrible osCommerce Site

 

Warm and Fuzzy: How to Make an Awesome osCommerce Site

Link to comment
Share on other sites

I have same problem. Can someone please show how to get rid of the counter thing

there is actually a good contribution that has the counter only count unique visitors and not every page load, I installed it and it works fine, I prefer to have a counter, but I also preferred to have it be a real counter and not a page load counter.

"I must admit that I personally measure success in terms of the contributions an individual makes to her or his fellow human beings."

---Margaret Mead---

 

"The answer is never the answer. What's really interesting is the mystery. If you seek the mystery instead of the answer, you'll always be seeking. I've never seen anybody really find the answer -- they think they have, so they stop thinking. But the job is to seek mystery, evoke mystery, plant a garden in which strange plants grow and mysteries bloom. The need for mystery is greater than the need for an answer.

--Ken Kesey"

Link to comment
Share on other sites

Okay, I removed the code as stated above and then refreshed and I am still getting the line with the counter and date. On the main page it has moved up to under the new products in the second column and in the other pages it has stayed along the bottom. I am not sure what to do know.

 

I want to have a thin line to seperate what I am going to put on the bottom but I do not want the date and counter. Can you help me out. The following is what I have for footer.php.

 

<?php

/*

$Id: footer.php,v 1.12 2003/02/17 16:54:12 hpdl Exp $

 

osCommerce, Open Source E-Commerce Solutions

http://www.oscommerce.com

 

Copyright © 2003 osCommerce

 

Released under the GNU General Public License

*/

 

?>

<br>

 

<br>

<table border="0" width="100%" cellspacing="0" cellpadding="0">

<tr>

<td align="center" class="smallText">

<?php

/*

The following copyright announcement is in compliance

to section 2c of the GNU General Public License, and

thus can not be removed, or can only be modified

appropriately.

 

For more information please read the following

Frequently Asked Questions entry on the osCommerce

support site:

 

http://www.oscommerce.com/community.php/faq,26/q,50

 

Please leave this comment intact together with the

following copyright announcement.

*/

?>

Powered by OsCommerce Copyright © 2003<br>

</td>

</tr>

<tr>

<td><?php echo tep_image(DIR_WS_IMAGES . 'pixel_trans.gif', '', '1', '5'); ?></td>

</tr>

<tr>

</tr>

</table>

Link to comment
Share on other sites

Okay, I removed the code as stated above and then refreshed and I am still getting the line with the counter and date. On the main page it has moved up to under the new products in the second column and in the other pages it has stayed along the bottom. I am not sure what to do know.

 

I want to have a thin line to seperate what I am going to put on the bottom but I do not want the date and counter. Can you help me out.

 

--- Snipped for space

 

Not sure how any one else would solve this, you may want to wait for another answer. But a simple quick & dirty to remove the counter/date and keep the thin line at the bottom is below. Just replace everything in your footer file with this if you like. Tested and works fine for me. The thin line in the footer stays where is was before removing the counter/date..

 

-- Mindy

 

 

 

<?php
/*
 $Id: footer.php,v 1.26 2003/02/10 22:30:54 hpdl Exp $

 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com

 Copyright (c) 2003 osCommerce

 Released under the GNU General Public License
*/


?>
<table border="0" width="100%" cellspacing="0" cellpadding="1">
 <tr class="footer">
<td class="footer"></td>
<td align="right" class="footer"></td>
 </tr>
</table>
<br>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
 <tr>
<td align="center" class="smallText">
<?php
/*
 The following copyright announcement can only be
 appropriately modified or removed if the layout of
 the site theme has been modified to distinguish
 itself from the default osCommerce-copyrighted
 theme.

 For more information please read the following
 Frequently Asked Questions entry on the osCommerce
 support site:

 http://www.oscommerce.com/community.php/faq,26/q,50

 Please leave this comment intact together with the
 following copyright announcement.
*/

 echo FOOTER_TEXT_BODY
?>
</td>
 </tr>
</table>
<?php
 if ($banner = tep_banner_exists('dynamic', '468x50')) {
?>
<br>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
 <tr>
<td align="center"><?php echo tep_display_banner('static', $banner); ?></td>
 </tr>
</table>
<?php
 }
?>

Link to comment
Share on other sites

Hi !

 

When I seted up my site, I set it up as SSL, but now, every pages are SSl, and boxes after boxes ask for security reasons, blablabla.

 

Is it possible to be SSL only on the checkout ?

 

Instead of all pages.

 

I would like to be HTTPS, at chackout only, !@$@#$%

 

How to, any ideas..

 

Thanks to all, Ray

Link to comment
Share on other sites

i want that the featured/latest products shown in the first page of oscommerce , should also be shown at the home page of website. so that my customer can also look at new products without going into the oscommerce. but home page should be dynamically updated i.e whenever the featured/latest products details are updated the results should also be reflected at my home pages. i think you understand my requirement .

i'm sure that Jason Chance will reply sooner.

thanks take care

Link to comment
Share on other sites

There is a very active featured products contribution that puts a featured products box on your index page here:

 

http://www.oscommerce.com/community/contri...atured+products

 

Is that what you were looking for?

My advice comes in two flavors- Pick the one that won't offend you.

 

Hard and Cynical: How to Make a Horrible osCommerce Site

 

Warm and Fuzzy: How to Make an Awesome osCommerce Site

Link to comment
Share on other sites

Excellant treatment on how to make a successful osCommerce shop.

 

Suppose you wanted both tableless layout and total control of styling of data reported in the boxes of both basic osCommerce template as well as that in the STS contribution, how would you go about achieving it?

 

For example, I have found that STS helps one avoid php so long as you still wish to use the infoboxes. Once you try to style the infoboxes themselves, you wind up having to edit the source php all over again. In essence, having to edit three files, the .html STS file, the .php file, and finally the .css file.

 

How can one use CSS2.1 tableless stylesheets to control layout and styling of every aspect of user interface with osCommerce most efficiently?

 

Any recommended tableless layout sites to look at?

Link to comment
Share on other sites

Hello Chance

For the longest time I have been trying to find out how to modify my os shopping cart. It sounds like you know allot about it.

 

I have experience using Front Page and "some" html" coding knowledge. (not the codes) but editing code lines. Where is the best resource for leaning how to make the shopping cart look the way I want it to etc.

 

Mainly Theme, My Store is called SunnyDays Town & Country at http://sunnydaystc.com and I want a small town country theme to match.

 

Please let me know, thanks Darryl :thumbsup:

Link to comment
Share on other sites

  • 3 weeks later...

Thanks for the excellent post! :D

I've been looking around at websites for ideas to freshen mine up. I know I want to use CSS as much as possible and stay away from Javascript, which I currently have on my nav bar. I've seen these snazzy little flash buttons and was going to ask if they would be okay to use. Got my answer here and MUCH more.

:thumbsup:

Link to comment
Share on other sites

  • 1 month later...

Excellent post! For those of you considering installing GD for thumbnail resizing, please have a look at my comparison:

 

scale-compare.png

 

Just look how terrible small rescaled images look when scaled by Firefox/Internet Explorer. The GD thumbnails are comparable to Adobe Photoshop! Did I mention that GD makes your products load faster too? This is a no-brainer. Install GD now.

Link to comment
Share on other sites

  • 1 month later...
Excellent post! For those of you considering installing GD for thumbnail resizing, please have a look at my comparison:

 

scale-compare.png

 

Just look how terrible small rescaled images look when scaled by Firefox/Internet Explorer. The GD thumbnails are comparable to Adobe Photoshop! Did I mention that GD makes your products load faster too? This is a no-brainer. Install GD now.

Where do you find GD? Haven't gone into pics too much yet but want to look into it.

Thanks

Julie

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...