CubeCart User's Guide - Personalize your online store

Personalize your store’s look-and-feel

CubeCart is template driven and allows you to fully customize the look-and-feel of your web store. You can add your store to an already existing website or setup you web store to be immediately displayed to shoppers when they type in your domain name. You can change the default logos with ones of your own and fully customize the home page and other site documents.

Display your store when shoppers enter your domain name

By default your store is setup in a folder named “cubecart” when it is installed. As a result, shoppers need to type in the URL, http://www.yourdomainname.com/cubecart, to view your store. This is ok if you have a main site or entry page that links to your store URL. But, you may want your web store to be the first page shoppers see when they visit your website.

You can easily configure your account to display your store when shoppers type in your domain name, using the hosting Control Panel’s file redirect feature.

1) First login to the control panel using the account access information we sent you in your welcome letter and select the "Web Options" icon.

2) Then scroll down to the "Redirect" section and click on the redirect icon.

3) New Redirect screen is displayed. Enter "index.html" into the Redirect from field and select "http://" from the “to” dropdown.

4) Then enter your domain name followed by the folder where you installed your store ("cubecart", unless you changed it during installation), e.g., www.yourdomainname.com/cubecart.

5) In the Redirect status field, check "A permanent redirection for this resource" option, and then click the Submit button.

Replace the CubeCart store logo with one of your own

You can change the standard CubeCart logo displayed on your store to one of your own by overwriting it with your logo. Just complete the steps below:

1) Create a personalized logo using your favorite graphics program with the same dimensions, format (gif or jpg) and name as the default logo.

2) Overwrite the default logo by uploading yours to the appropriate folder.

3) If you change the image format, dimensions, or name of the logo then update the code that references the logo.

Please see the notes below for the details on each of the default CubeCart skins/templates:

Skin: CLASSIC

For the Classic skin, the default logo is named contentBg.jpg. The size of the logo is 355 X 599 pixels. It is located on the server in the folder domainname.com/cubecart/skins/Classic/styleImages/backgrounds/ where domainname.com is your domain name without the “www.” in front.

If you change the dimensions of the logo or the name of the file, then you will need to update the code in the file layout.css under the section #pageSurround. layout.css is located on the server in the folder domainname.com/cubecart/skins/Classic/styleSheets/layout.css.

Code

#pageSurround {
    width: 748px;
    margin: 0px auto;
    padding: 5px;
    border: 2px solid #333333;
    background-color: #FFFFFF;
    background-image: url(../styleImages/backgrounds/contentBg.jpg);
    background-repeat: no-repeat;
    background-position: left top;
}

Skin: KILLER

For the Killer skin, the default logo is named topHeader.gif. The size of the logo is 165 X 96 pixels. It is located in the folder domainname.com/cubecart/skins/Killer/styleImages/backgrounds/

The logo image is referenced in layout.css in the #topHeader section. If you change the dimensions of the logo or the name of the file, then you will need to update the file layout.css. The file is located on the server in the folder domainname.com/cubecart/skins/Killer/styleSheets/, where domainname.com should be replaced with your domain name without the “www.”.

Code

#topHeader {
    text-align: right;
    height: 100px;
    background-image: url(../styleImages/backgrounds/topHeader.gif);
    background-repeat: no-repeat;
}

Skin: LEGEND

For the Legend skin, the logo is part of an image called topHeader.jpg, with a size of 756 X 116 pixels. It is located on the server in the folder domainname.com/cubecart/skins/Legend/styleImages/backgrounds/, where domainname.com should be replaced with your domain name.

If you change the dimensions of the logo or the name of the file, then you will need to update the file layout.css. The logo image is referenced in layout.css at #topHeader, located in domainname.com/cubecart/skins/Legend/styleSheets/layout.css.

Code

#topHeader {
    text-align: right;
    height: 116px;
    margin-bottom: 10px;
    padding-right: 9px;
    padding-top: 0px;
    background-image: url(../styleImages/backgrounds/topHeader.jpg);
    border-bottom: 1px solid #000000;
}

Update your store’s home page and other site documents

Updating your homepage

You can update the homepage of your store (the first screen shoppers see) using the CubeCart administration tool. Click on the Documents → Homepage link on the left hand navigation menu and the homepage entry screen below will be displayed.

1) Select the language to be used for the homepage and enable it. The default is English.

2) Enter the title for your store. The title is displayed on the first page of your store.

3) Enter the homepage content/descriptive information that will be displayed to shoppers when they enter your store. The description can be as long as you like, and can be entered as plain text, images and/or as HTML code using the WYSIWYG editor.

4) Once you have completed your updates, click on the Update Homepage button and the new homepage will be saved.

Manage Site documents

CubeCart allows you to add additional informational pages (site documents) to your store. Four site documents are included when you first install CubeCart, the About Us, Contact Us, Privacy Policy, and Terms & Conditions pages. You should update these documents to include information specific to your store.

Updating site documents

You can update a site document by clicking on the Documents → Site Documents link under the CubeCart Administration navigation menu. The Site Documents management screen below will be displayed.

To edit an existing site document, click on the Edit link next to the name of the document you want to update. An entry screen similar to the one below will be displayed.

The site document content can be as long as you like, and can be entered as plain text or as HTML code using the WYSIWYG editor. Once you have completed your updates, click on the Update Document button and the site document will be saved.

Add a new site document

You can add a new page (site document) by clicking on the Documents → Site Documents link under the CubeCart Administration navigation menu. The Site Documents management screen below will be displayed.

Click on the Add New link in the upper right hand corner. A document screen is displayed which allows you to enter the site Document Name and content. See below:

The site document content can be as long as you like, and can be entered as plain text or as HTML code using the WYSIWYG editor. Once you have entered your site document content, click on the Save Document button and the site document will be saved.

Delete Site documents

You can delete a site document by clicking on the Documents → Site Documents link under the CubeCart Administration navigation menu. The Site Documents management screen below will be displayed.

Click on the Delete link next to the name of document you want to delete.

Add a language translation for your site document

You can add language translations for a site document by clicking on the Documents → Site Documents link under the CubeCart Administration navigation menu. The Site Documents management screen below will be displayed.

Click on the Languages link next to the name of document you want to add the translation for. The screen below will be displayed. Click on the Add New button at the top right hand corner of the screen and enter the translation.

Table of Contents - Manage Products