Appearance Settings

General Settings
Watch a movie on General Appearance Settings

Appearance Settings > General Settings

Header image:
Watch a movie on creating a simple custom header

Using the dropdown box you can select an image for the top of your page. Of course an image would have to be uploaded prior to this, image uploads are carried out in the “Image Archive” section which can be found in Appearance Settings > Image Archive.

Background image:

If your main website uses a tiled background image / pattern you may wish to use the same for your cart pages. Again, the image is selected using the dropdown box and like the header image it must first be uploaded using the “Image Archive”.

1.6 Screenshot showing the appearance settings, notice that the header and background images have been defined using the two top dropdown fields. All images have to be first uploaded using the Image Archive.

Colours:
Next to each element in the colours section there is a text field that will take any hexadecimal code starting with the # symbol and containing 6 characters, it will also take written values such as red, blue, yellow and so on. By clicking on the hyperlink text entitled Select, a pop up box appears; this contains 216 web safe colours and by clicking on your selected colour in the colour chart the hexadecimal code is automatically displayed in the corresponding field ( Screenshot 1.7).

Cart Table Background:
This colour is applied to the background of the table that contains the product selections only.

Cart Table Header.
Changes the colour in the header row of the product table.

  1.7 Screenshot showing simple colour configuration using the web safe colour selector

Cart Table Body:
Changes the cell background colour, by setting the Cart Table Background to one colour and the Cart Table Body to a different one you can create a table with different coloured borders. If you would like to have greater control over the look of the table, you should review the CSS Advanced section at the end of this manual.

(Note to Advanced Users: All the values for colour, positioning, and table values can be set in the advanced section at the end of this manual, this feature requires that the user has a good understanding of HTML and CSS)

Site Margins

Cart Table Width
The Cart Table Width can be set in pixels or a percentage, and is used to set the width of the table holding all the product details in the cart page.

Margins
Controls the padding that is applied to the page. It is important to remember to fill in both “Left” and “Width” if horizontal padding is required and “Top” and “Height” if vertical padding is needed, this ensures cross browser compatibility.

Text Body Settings

Body Text
Controls the body style for the text within your cart.  This is the default style that is applied to all text within your cart.

Shopping Cart Table:
This is the style that controls the table definitions for your shopping cart information table.

Shopping Cart Table Headers:
Controls the font size, colour and style for the text in the cart product table header. If no options are set, the default values will be used, most of the section boxes here are self explanatory the “Custom Style“ field does however require a short description. While this manual is not a guide to CSS, we shall run through the custom styles that can be set by using the “ Custom Style “ field:

If we wished to create a custom text style for this header we could enter in the “Custom Style” field the following:

font-family: "Times New Roman, Times, serif"; font-size: 16px; font-style: italic; font-weight: normal; colour: #CC0066; text-decoration: none;

This will then be added to the styles declaration in the head of the page. Please note you must ensure that you enter the information in correctly or the styles may not work on all browsers, when specifying a font it is advisable to stick to common system fonts.

Shopping Cart Table Product Details
This is the class the changes the style of the product details in the shopping cart table.

Error Messages:
It is important that error messages stand out and can easily be seen and understood by the shopper, we would suggest that all error messages be in bold and set in a colour that is in total contrast to your site, a slightly larger font size may also be useful. You can create custom error messages for you cart on the “ Cart Page “ which can be found at
Appearance Settings -> Cart Page.

Bread Crumb:

Watch a movie on setting up a Bread Crumb
The Bread Crumb is a method for users to navigate using a series of hypertext links. These sit at the top of the page in MercuryCart, and enable the user to move forwards or backwards as they require. The current page that the shopper is on can be indicated by means of changing the values in the “ Bread Crumb  - Selected “ section.

You will also notice that the next page in the series is also a link, this of course allows the shopper to jump to the next page, but does not allow them to miss a page. Again custom styles can be set in the “Custom Style” box.  You can use the default labels for your Bread Crumb, or you may define your own in the “Bread Crumb Labels” area.

Other Custom CSS Tags:
Other custom CSS tags can be added for your own personal use throughout the cart.  For instance, if you have some custom display styles that you use in the text of the shipping information page, you can include the custom tags for that style in here.

Page Alignment:
Three options are available Left, Centre and Right; this controls the overall positioning of the text and tables on the page.

Base URL for Exiting the Cart:
The Base URL is used when the customer has completed there order and as reach the "thanks for shopping with us", at this point the transaction is over, however the Base URL can be used to route customers back into your site. The Base URL is also used as a fail safe to provide a return URL for the continue shopping button, it is unlikely under normal circumstances that the cart would need to resort to using the Base URL for this information.

N.B
The URL for the continue shopping button is normally determined from the URL that is entered in the product database, if this information is omitted then the cart looks at the referring page for this information, in the unlikely event that neither of the two are available then the Base URL is used. Advanced users may wish to know that a value can be sent along with all the other information titled ' continue_shopping_url with the value of whatever URL you wish, the HTML hidden field is a ideal candadate for this.

Advanced Settings:
For use by power users. Advanced settings are covered at the end of the manual.

Cart Footer:

Appearance Settings > Cart Footer

Watch a movie on Creating a Cart Footer

This section is fairly easy to configure, Input boxes 1 to 3 are used to input your address details, and the copyright field is optional. The email takes any valid email address and the phone field takes the contact telephone details for your company.

Like all the sections in the cart, cart footer can be entered via the
“Advanced Option” however this should only be used by people that have a good working knowledge of HTML and CSS (Screenshot 1.8).

Search Page

Appearance Settings > Search Page

Watch a movie on adding a simple product search

Watch a movie on adding a advanced Product search

  1.9 Screenshot of the appearance settings admin for the search function, notice the use of HTML tags within the text fields.

MercuryCart has the ability to offer the shopper a search function to quickly find products in your online store. To set up the Search function you must first enter the keywords into the product list, this can be carried out either by downloading your products and editing the keyword file in a spread sheet program such as Microsoft Excel (this is suitable when you have a number of products to update) or keywords can be entered into individual products via the Product Manager > Online Management> View / Edit / Delete Products area. For more information on the configuration of the search feature into your site please see the “Advanced Settings and Options” towards the end of this manual.

General Information

Page Title
Allows the changing of the HTML title tag that appears on the search page.

Page Text
Takes standard text and also HTML, the output of this field appears above the returned search results.

Search Page Settings

Results Per Page
Any value can be inserted here, but we would recommend a value of 50.

Search Type

Allows you to specify if your search is either keyword OR price range or keyword AND price range.

Next Results Label and Previous Results Label

Any text label can be entered in this field, you could also encapsulate the text with HTML, if you wanted your next label to be in bold you could enter <b>Next</b> into the field.

Results Header Labels - Code/SKU, Product Name, Price, QTY.

Provides the description of each column on the search page.

No Results Found.

It’s a good idea rather than just displaying a “ Sorry no results matched your criteria” type message to display something a little more helpful, maybe offering a list of your categories or even contact information in the event of no records being displayed.

Add to Cart Button / Label

In this field you can either enter text that will be used on a standard form submit button or insert a button that has previously been uploaded to you image archive. The “Add to Cart” button allows the shopper to add a product directly from within the search results.

Search Page Exit URL.

By entering a full URL in this field you can determine which page a customer will be returned to on clicking the Exit URL button, if you would like the customer to return to the previous page you could just enter JavaScript: history.go(-1);

Cart Page

Appearance Settings > Cart Page

Watch a movie on customizing your Cart Page

General Information

The Cart Page allows you to control the layout and labels for the main body section of the cart. The first field on this page entitled “page title” sets the value of the HTML title tags; this should be something descriptive about your company.

The Page text field is used to display a message above the contents that the customer has placed in their cart. This field can take plain text or HTML code; the latter should only be used by people competent in HTML, more information about integrating HTML into the cart can be found in the advanced section of this manual.

Shopping Cart Settings

These settings allow the configuration of the labels for the products table, the column widths and the labelling of buttons or the adding of custom buttons that have been previously been uploaded to the “Image Archive”.

2.0 Screenshot showing the appearance settings for the cart page, as in other examples the page text field is being used to display custom HTML.

Boxes 1 to 5 control the labelling of the cart field while boxes 6 and 7 allow you to label the buttons. A custom image can also be selected using the select image dropdown field; this allows you to select any image to be used as a button. All images are stored in your Image Archive and must first be uploaded.

Error Messages

All the error messages in MercuryCart can be customized, in addition to plain text being used; your message can include HTML or inline CSS styles.

Buttons / Labels

All settings in this section control the elements below the products table. As before, Standard text can be used to label buttons or custom graphics can be uploaded via the Image Archive.

Customer Info Page

Appearance Settings > Customer Info Page

Watch a movie on creating a Customer Info Page

This page controls the page labels and button text / custom buttons that appear on the page where the customer fills out their billing and shipping address. Custom error messages can also be created to meet your requirements.

Shipping Page (For the setting of text fields and labels)

Appearance Settings > Shipping Page

This page is used to control the look and feel for the labels and buttons for the page where the customer selects which type of shipping that they require for their purchase. Either standard plain text can be used or formatting with HTML and CSS tags can be added to the text within the fields. If you require information on the setting up of the shipping regions click here

Payment Page

Appearance Settings > Payment Page

Watch a movie on setting up the Payment Page

This page is used to configure and set the page text / custom button images and error messages that you wish to appear on the page that asks for the payment details from the customer.

Thanks Page

Appearance Settings > Thanks Page

Watch a movie on setting up a Thanks page

This page is used to configure the message and the exit URL for the final page that the customer sees after a successful purchase. It is important to remember to use an absolute URL and not a relative one for the exit URL. I.e. if you would like your customers to have the option of returning to your products page the “Exit URL” field should be formulated as follows:

http://yourdomainname.com/products.html

Entering just products.html will result in the customer receiving a 404 page not found error. Split one

Confirmation of Order by Email

Appearance Settings > Email Confirmation Page

Watch a movie on Order confirmation

Ensuring that a detailed summary of your customer’s order is sent after purchase is very important, not only does it let your customer know that their order was successfully sent, it also lets the customer check that all the details are correct and embosses your company name in the mind of the shopper.

In the Email Subject field you should replace the text that says “Mercury Cart Order Number” with your own company name, but you should leave the <orderid> in place.  When the email is sent, it will replace all occurrences of <ordered> with the order id for that order. This may also be used in the email text field.

You may also wish to fill in the “Email From” field with your company’s email address. The “Email Text field can be used to add a custom “Thank You For Shopping With Us” message, again this field takes both plain text and HTML.

  2.1 Email confirmation admin Screenshot, notice the custom tag in the email subject text field