With Checkout Manager, you have the ability to customize the visual design of your checkout pages using CSS. With CSS, you reference all of the attributes of an element in an external file (though you can add inline style information as well in certain editable areas) allowing you to separate the visual presentation of your web site from the content. By doing so, you can rapidly change the look of your web site.

Downloading the default file
In order to get started, you will first need to download the default checkout CSS file. If you have modified global style settings (such as font styles, section header or border styles) then your default checkout CSS file will reflect those attributes.

Tip: If you know the color values and fonts you wish to use, you should select the "Configurable Styles" option and then make all changes to these items in the Checkout Manager interface. You can then download your modified CSS file that will already contain your color values for any additional modifications you wish to make.

To download the default checkout CSS file:

1. From the Checkout Manager, click the "Visual Customization" link.
2. Do one of the following:
   • Default: If you have not used Configurable Styles, click "Default" and click the "Download default CSS" link to download the default CSS file.
   • Configurable Styles: If you have used Configurable Styles, click Configurable Styles and click the "Download global style CSS file" to download the CSS file including any changes you have made using the Visual Customization module. This option is preferred as it will have a record of any changes you may have made.
3. Save file to your computer.

You can now open and modify the CSS file to match the visual design of your site.

Uploading your custom CSS file
After you have modified your CSS file, you can then upload the file to Checkout Manager. You can upload CSS files quickly so you can easily update your visual design for promotions or seasonal sales. If you upload the file without changing the name, Checkout Manager will append a number the file name (for example 1124085073___custom.css).

To upload your custom CSS file:

1. From the Checkout Manager click the "Visual Customization" link.
2. Click "Custom Styles".
3. Click the "Browse" button.
   (A File Upload dialog appears—see figure 1).

1. Navigate to and select your CSS file and click "Open".
2. Click the "Upload" button.

Your custom CSS file uploads and is selected as the CSS file to use for your checkout pages. You can preview how your pages will appear using your custom CSS file by clicking the "Preview" button.

Limitations and Warnings
Use extreme caution when making changes to the values in the CSS file especially for adjusting padding or margins or changing the position of items. These values have been determined to work for the various flow settings. Changes to these attributes should be attempted only by merchants with advanced knowledge of CSS.

See Also

• Learning more about CSS
• How can I see the changes to the checkout CSS file?