Shopping Cart Styles

How to

1. Access Shopping Cart Styles
2. Edit Shopping Cart Styles
   • Understanding which styles affect each part of the shopping cart
3. Select a Browse Format
4. Customise Shopping Cart Text
5. Set special options for shopping cart displays
6. Select which metadata keywords show on the browse list

Accessing Shopping Cart Styles

To access Shopping Cart Styles you must be logged in with the administrator toolbar visible at the top of your screen.

• Select the button from the administrator toolbar to open the Applications menu.

• From the Applications menu, select 'Shopping Cart Styles'.

The Shopping Cart Style Manager will load in the same window. On the left of this window you will see the Article Styles Menu.

On the right, the Shopping Cart Styles are listed in a table. Sections of this table include the main styles for shopping cart objects, the Browse Template options, Text to modify, Special Options and Browse List options. Each of these sections is explained in more detail below.

Editing Shopping Cart Styles

The shopping cart styles are listed as 'Styles to modify', on the right hand side of the Shopping Cart Styles Manager. To edit a particular style, select the radio button next to that style name and click 'Edit' from the Article Styles menu on the left of the screen. Once clicking 'Edit', the style editor (as used in Style Manager) will load. Alter the style to suit and click save when complete. For mor information see Adding or Editing a Style.

Please note: removing a style by using the 'Clear' button in the Article Style's menu will primarilly remove existing styles, but secondarily and more importantly this process will cause the default shopping cart styles to be used.

Understanding which styles affect each part of the shopping cart

Below is a series of images showing/representing which parts of the shopping cart are affected by each style.

ABOVE (1): Text on Disable Auto Search - Altering this style will change both the text and the checkbox (as shown in the image above). If you wish to hide this functionality from users, select the 'Block' tab (see image: right), then from the 'Display' dropdown choose 'none'. Click Save to confirm.

ABOVE (2): Autosearch Search Text-Area - this governs the text box (where users type their search query). In the example above the font, font colour and background colour have all been affected.

ABOVE (3): Autosearch Search Submit Button - The submit button for the search function may be altered to look 'more' or 'less' like a button, dependant on your needs. If you have styles attached to buttons elsewhere within your website you may wish to replicate the same styles here.

BELOW: Nav Table, Minicart Table & Results Header - In the image below you will see three examples of tables. The content area of these tables is affected by this style.

BELOW: Shopping Cart Main Menu - This functionality is currently not supported.

BELOW: Shopping Cart Header - This functionality is currently not supported.

BELOW: Browse Heading - As shown in the image below, appearances of the headings 'Browse' and 'Shopping Cart' are affected by this style.

BELOW: Text for: Please choose a ... - The text within the red outline shown in the image below is affected by this style.

BELOW: Latest News/Your Cart/Main Table - This style governs the main content areas of most of your cart objects. You may wish to make these sections stand out, or match this style to surrounding sections of your existing website. Please note though that when no style has been applied, the default shopping cart style will be used.

BELOW: Table Headers & Footers - This style governs the main content areas of most of your cart objects. You may wish to make these sections stand out, or match this style to surrounding sections of your existing website. Please note though that when no style has been applied, the default shopping cart style will be used. The header of each of these tables (shown in the image as dark blue) is the section affected by this style.

BELOW: Table Rows & Alternating Rows 1 & 2 - When displaying products in tables, each row will be assigned the Table Rows style. Alternating rows may also be assigned one of the alternating Table Rows styles. The image below shows how alternate rows might be shown on your website.

BELOW: Error Messages - Error messages will only appear to users if there is an error when they are filling in forms (in the checkout of your store for example) and have clicked Submit/Order. Formatting these error messages will either help to highlight/identify them to the user, or make the messages 'blend' in better with your existing website.

BELOW: Links - The standard underlined link colour (blue) will be used if no style is applied here. To change the colour of all links, simply alter the text colour in the 'Type' tab of the style editor (see image: right). If you wish to remove the underline from all links, in the same style tab ('Type') select the radio button next to the 'Decoration' option 'NONE'.

ABOVE: Links (Visited) - Visited links will by default appear underlined and purple.

ABOVE: Links (Hovering over) - This style will appear to the user when their mouse cursor is hovering above the link. It will revert back to either of the above styles when the mouse moves away.

BELOW: Page # Links - Please refer to the highlighted section in the image below. Page Numbers will appear in the browse section of your shopping cart when you have multiple products in a category, that do not fit onto the one page. As with regular links, Page links also have a 'visited' and 'hovering' option.

BELOW: Prod Listing Link - Please refer to the highlighted sections in the image below. Product names within a browse table act as a link to more information on a product. This type of link may be customised. Product listing links also have a 'visited' and 'hovering' option.

Selecting a Browse Format

Information in your shopping cart can be displayed to your customers in a variety of ways. The image examples on the Shopping Cart Styles screen are representative only of these formats.

They are:

1. Product Name, Price, Thumbnail image
2. Thumbnail images only
3. Name, Thumbnail Image, Short Description and Price

Selecting one of the layout types by clicking on the desired representative image. The currently selected template will be highlighted by a red border.

Customising Shopping Cart Text

Certain elements of your shopping cart text are customisable by you, the admin user or shop owner. Please familiarise yourself with all elements of your shopping cart before altering this text, to ensure you know which sections of the shopping cart will be affected.

Each of these words will originally appear on your system as a default value.

• Department - Wording set here will appear on the top of all 'Category' listing objects.
  
• Search Button (Product Search) - Text as it appears on the search button of the search box object.
  
• Navigation (Left Menu) - Wording on the top of the Main Navigation Menu. If multiple navigation are added to your shopping cart, they will all have the same wording (as defined here) in their header.
  
• Browse (Left Menu) - The word 'Browse' as it appears i

  

  n the 'Navigation' menu object. Above, it appears in its default wording.
  
  See the image below for an example of how the customisable wording has been used:
  
• Any reference to Product - Altering this text will change every occurance of the word 'Product' within your shopping cart objects. This does not however include if you have used the word 'Product' in another of the customisable text fields described here.
  

  This feature may be useful if your online store has been set up to sell 'Tickets', advertise 'Events' or even if you want to change the word 'product' to something like 'toys'.
  
  An example of where this item of customisable text appears may be seen in the image below:
  

  1. Being changed with the alteration of 'Any reference to Product'
  2. Being 'Browse (Left Menu)
• Product Name (Browse List) -

Setting Special Options for Shopping Cart Displays

ASDF

Selecting Which Metadata Keywords Show on the Browse List

Metadata Keywords