Oscommerce Setup

By Tan Hai Tat, HT ZoneBlog : http://tanhaitat.blogspot.comFacebook : haitattan@hotmail.com

Email : haitat@htzone.com

Disclaimer

• This slides is the draft training guide for HT Zone’s course on OS Commerce.

• Use at your own risks

• If you need help in setting up eshop, you can check out the packages at http://www.htzmarketing.com

Things to prepare

• Basic Content– Welcome, Shipping, Conditions, Privacy– Save them into a notepad (text document)

• Images of products– Landscape or portrait, different “size”*

• Product catalog– Name, Format, Words

• Domain Name / Hosting Provider– Make sure it support the software you using – Check out http://www.htzhosting.com

• For customization, contact haitat@htzone.com

Installation

• Login to yourdomain.com/cpanel

• Click “Fantastico De Luxe”

• Under “E-Commerce”, select “OS Commerce”

• Key in a directory/folder if necessary

• Key in admin id/pwd

• “Install OS Commerce”

• “Finish Installation”

• Key in your email for id/pwd to be sent to you

Basic Configuration

• Administrators– Insert extra administrator if you need

• Beware that they will have equal rights

• My Store– Edit as necessary– “send extra order emails to”– “show category count”– “switch to default language currency” must be false if

no USD

• Maximum/Minimum Values– Optional setting to look at when you are very free.

Configuration

• Images

– Set only width or height to allow auto sizing

– Don’t put any value at all for the other setting

• Customers Details

– Gender and Date of Birth

– Set True means must key in. False means don’t show

• Product Listing

– The sort number refer to appear from left to right, or top to down on depending on templates

Configuration

• Stock

– “Check stock level” advised to “false” and ignore other setting

– Subtract Stock and allow check out

– TEST IT before you go life if you want to use it.

• Email Options

– “Verify E-Mail Addresses Through DNS” set to True

– “Send Emails” set to True

Advance Configuration

• Download

– Not applicable unless selling digital products only

Localization

• Currencies

• Languages

• Order Status

Currencies

• “Delete” unwanted Currency, ie, EURO

• “New Currency” to add– Code must be in caps ie, SGD

• Take note of the point ( . , ) and places (2)

• Value set to 1.0

• Checked “Default Current”

• “Insert”

• Do a “Update Currency” if more than one

Languages

• “Delete” unwanted languages• Click “Details” to see all the languages files that

you can make changes to• Remember you can only change text within the

two quote ‘….‘• Ie define('TEXT_INFORMATION', 'Put here your

Privacy Notice information.');• Words in BOLD can be changed• If say want to put “it’s” the code will be “it\’s” • READ YOUR DEFAULT CONTENT on the eshop.

Order Status

• You can set extra order status

• Normally not used at all.

Locations / Taxes

• Set only if you want to have tax

• Set TAX Zones, ie SINGAPORE

• Set TAX Classes, ie GST

• Set TAX Rates, ie 7%

Modules

• Payment

– Install as necessary Ie, COD, Check, Paypal

– Remove unwanted ie, Credit card

– To set paypal, edit and insert your paypal email

– Sign up paypal here

• Common Error : Select your country first

Modules

• Shipping– Flat Rate : Same amount regardless of orders

– Per Item : Fee base on quantity

– Table Rate : Fee base on weight• Note the default unit is lbs

– Zone Rates : Use this if you doing international

• Order Total– Make use of “LOW ORDER FEE” for like charging

delivery fee for those buying under XXX amount.

Tips

• Always have two windows or two tab to toggle within admin and actual website

• Do a “refresh” or F5 to see changes– If not working, “Ctrl-F5” few times

– If really not working, reboot and go for break

• A good habit to WRITE down the things you’ve done and the steps in case of any bugs.

• For making changes to languages, backup the original content into a notepad file first.

Catalog

• Manufacturers– Remove everything

• The manufacturers box will also disappear on website

– Add in whatever you need if necessary

• Categories/Products– Remove all items you see before adding

– Always add in the top level first (main category)

– Before adding sub-category or product, remember to click “GO TO” on top right to select the category

Catalog

• “New Products”– In Stock / Out of Stock refer to “Active” or “Inactive”– Products Name

• Bare in mind this has a impact on how user can search for this item in the website and also Internet

– Tax Class select if necessary– Key in ONLY the Nett or Gross price (auto calculate)– Key in Products Description (use html if necessary)– Add in quantity if you using “STOCK”– Add in model number if you are using it– “Browse” the image– Remember to PREVIEW and INSERT!!!

Catalog

• Products Attributes– Not recommended to use at initial stage of eshop– Need to assign one value to each item one by one. – Each value can has an impact to the item

• Reviews– These are what submitted by user

• Specials– Note the “New Products” refer to products that is

already ADDED.

• Products Expected– Display lists of “upcoming” products

Tools

• Database Backup• Note this only backup database, not your images and

the files. MAY NOT WORK!

• Banner Manager– Remove the default OS Commerce banner below– Add your own if necessary (ie, supplier banner)

• Define Languages– Shortcut to make changes to your languages files

• File Manager– Upload or make changes to any files

Inserting Top Banner

• Cooltext.com

• Edit/Select content or options accordingly

• Save as “store_logo.png”

• File Manager– Make sure at /images folder

– public_html/images/ (if own domain)

• Upload / Browse / Upload

• Refresh to see the changes

Testing the Eshop

• Sign up as customer• Add items to shopping cart• Check out• Ensure customer got email acknowledgement• Ensure “owner” got email notification• “Owner” log in as admin to click “Customers”• Goto “Orders”• Look for pending orders to edit/update status• Optional value : Comments and Notify customer

Tips

• To replace any graphics, right click to check the url and filename

• Replace it with a new one with the same filename and upload via “File Manager” to the same location

• REMEMBER : NO CAPS, NO SPACING in filename

Stylesheet.css

• Goto Tools/File Manager

• Goto “root” folder, ie /public_html/

• click stylesheet.css

• Click EDIT (or double click stylesheet.css)

• Recommended to edit the file using notepad

• http://www.html-color-codes.com/

Stylesheet.css

• Make use of “Edit” “Replace” to one-off make changes to the whole file if the codes is duplicated

• Body background #ffffff (white)

• Bbc3d3 : the light grey at all boxes

• b6b7cb : border of all boxes

• F8f8f9 : background color of all boxes

• Font Size : change the 10px..12px

Boxes Corner

• Tools

• File Manager

• /images/infobox

• Replace the following with your own– corner_left.gif

– corner_right.gif

– Corner_right_left.gif

• Remarks : If nothing to put, download the /images/pixel_trans.gif and “save as” all three

Changing the header

• Tools

• File Manager

• /includes/header.php

• Look for the <table> … </table> containing store_logo.png

• Replace with

<table> <tr><td>

<img src=images/store_logo.png>

</td></tr> </table>

Changing the footer

• Tools

• File Manager

• Look for /includes/footer.php

• Find <?php echo FOOTER_TEXT_BODY; ?>

• Put whatever content you want infront of it and end with a <br>

• Ie Web Hosted by HT Zone<br> <?php echo FOOTER_TEXT_BODY; ?>

Editing the right column

• Tools

• File Manager

• Goto /includes/column_right.php

• You can remove

• include(DIR_WS_BOXES . 'languages.php');

• include(DIR_WS_BOXES . 'currencies.php');

Marketing Tips

• http://tanhaitat.blogspot.com/2009/08/ways-of-marketing-eshop.html

Signing up Google Adsense

• http://www.google.com

• Click on the “Advertising Program”

• Click Google Adsense

• Sign up

– Ensure put all real details

– You cannot make changes to the PAYEE name

– Sign up ONLY AFTER your website is ready

Useful Basic HTML

• <b> .. </b>

• <i> … </i>

• <u> .. </u>

• <br> Break a line

• <font size=x> … </font>

• <font color=#ffffff> … </font>