Authentication Authentication
Username

Password



Register 
Recover password


Help Help








Help zone

Customizing Your Store
NorthStar Solutions offers you virtually complete control over the look and feel of your store area, which is retrieved when you link to your store using the parameter of provider={Provider Name} in the URL. For example, if your username was "demo", you could use http://www.nstarsolutions.com/store/home.php?provider=demo

As you can see, not only will just your products be listed; but the look and feel will reflect any customizations you have made to your store. To access the files you need to customize, select "Customizing Your Store" after you have logged into the Provider Area.

A simple, yet very effective, way to change the look of your store area is to add a header image/logo, which will essentially "brand" the page to look like your own site. Often it is all that you will need to do to ensure the transition between your site and your store area is seamless from the customers' perspective. If you need assistance modifying the header image, feel free to contact us to have us perform the process for you free of charge (just provide us with the web site we are copying from). If you feel comfortable editing the image yourself, you should create an image that is 770x220 and upload it using the interface on this page. (Make sure that you accommodate for the objects that will lay over the image -- if you look at the default image that is there now, that should give you some idea of how to deal with those objects.)


ADVANCED CUSTOMIZATIONS

The templates engine is very flexible and extremely configurable, which means you may change the look and feel of your store so that it will fit any design layout. The process requires knowledge and experience, so you are cautioned to not make changes beyond your comfort level. Generally just using the section above to replace your header image is all that is needed for you to substantially customize your store area. If you do need to work extensively, we can provide you with a "sandbox" area so you are not making changes to your live store.


GENERAL NOTES

The first thing you should do is execute the "Save snapshot" button. This will make a copy of all your files so that if you make a significant error that you can not easily back out of, you can start from the last snapshot you made. You should also consider making some changes, reviewing the effects, then determine if those changes should be kept or if you should "rollback" to the last snapshot. Keep in mind you are editing your live store, so you have to proceed with caution. If you plan on making numerous changes, you can contact us to set up a different store for you to use as a "sandbox" to practice.

When using images, use Smarty formatting so that when the store is in secure mode, errors do not occur. Upload all of your graphic images (not the product images, they go elsewhere) into the images directory and call them using this format:

To "comment out" a line of code (if you don't want it to display, but might need it later), use this format: {* commented out code *}

Do not edit pages with FrontPage or Cpanel, as extra code may get inserted that will cause problems with your layout.



GUIDELINES FOR THE MOST REQUESTED CUSTOMIZATIONS:
 

CHANGING FONTS, COLORS, ETC.
The skin1_c.css file is the master stylesheet for your store where you can control the size and color of fonts, background colors, spacing, link colors, etc. Note that we have intentionally made the default colors neutral colors (such as greys and blues), but if you find a need to adjust colors, the skin1_c.css file is where you would do so. One common adjustment requested is the background color and/or image, which can be adjusted in the HTML,BODY section as shown in this example:
HTML,BODY {
   HEIGHT: 100%;
   MARGIN: 0px;
   PADDING: 0px;
   BACKGROUND-IMAGE: url('images/custom/background.jpg');
   BACKGROUND-COLOR: #ADB1B5;
}

ADJUSTING THE MARGINS AND/OR CHANGING THE WIDTH OF THE FORMS
By default the store is set at a fixed width of 770 pixels, so searching and replacing those properties with the width of your choice in rectangle_top.tpl it will adjust the width.

Note that you may also need to adjust the page contents by replacing all table widths (set to 700 by default) to your own dimensions in these templates:
  • customer/home.tpl
  • modules/Checkout_One/checkout_one.tpl
  • modules/Checkout_One/checkout_one_home.tpl
  • modules/Fast_Lane_Checkout/home.tpl

The top margin may be adjusted by adding space within the rectangle_top.tpl.

The bottom margin may be adjusted by adding space above the closing tags at the bottom of these templates:
  • modules/Checkout_One/checkout_one_home.tpl
  • modules/Fast_Lane_Checkout/home.tpl
  • customer/home.tpl

CUSTOMIZING THE BOTTOM OF THE FORM
The rectangle_bottom.tpl template is where the bottom of the form is defined (where the copyright, etc. is displayed). Note this is not the very bottom of the entire page (see above).


CUSTOMIZING THE CHECKOUT PAGE
The actual checkout page where customers enter their information and make their payment is defined in modules/Checkout_One/checkout_one.tpl. While being careful not to comment out any required fields or code, you can manipulate the form to present information in a certain order or suppress some information not otherwise required for your particular needs. Generally it is a good idea to ask a NorthStar Solutions associate to help you customize this form so that it can be done in a proper test environment and to ensure nothing important is broke during the editing process.