In Checkout & Registration Manager, you can 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 in certain editable areas, as well) to separate the visual presentation of your website from the content. By doing so, you can rapidly change the look of your website.
Warning: Use 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 your store. We recommend that you change these attributes only if you have an advanced knowledge of CSS.
To get started, you'll need to download the default checkout CSS file. If you've modified global style settings (such as font styles, section headers, or border styles), your default checkout CSS file will reflect those attributes.
Download the default checkout CSS file
Tip: If you know the color values and fonts you want to use, select Configurable Styles, and then make all changes to these items in Checkout & Registration Manager. You can then download your modified CSS file that will already contain your color values for any additional modifications you want to make.
- Sign in to your My Services page.
- Click the Store link.
- Go to Checkout & Registration Manager.
- Go to Visual Customization.
- Do one of the following:
- If you have not used Configurable Styles, click the Default tab and then the Download default CSS file link.
- If you have used Configurable Styles, click the Configurable Styles tab and then the Download global styles CSS file link.
- Save the file to your computer.
- Open and modify the CSS file to match the visual design of your site.
Uploading your customized CSS file
After you've modified your CSS file, you can upload it to Checkout & Registration Manager. If you upload the file without changing its name, Checkout & Registration Manager will append a number to the file name (for example, 1124085073___custom.css).
Upload your CSS file
- Sign in to your My Services page.
- Click the Store link.
- Go to Checkout & Registration Manager.
- Go to Visual Customization.
- Click the Custom Styles tab then click the Browse button.
- Browse for your CSS file.
- Click the Upload button. The CSS file that you upload will automatically be selected as the CSS file to use for your checkout pages. You can preview how your pages will appear by clicking a Save and Preview button.
- Return to Store Manager and publish your Order Settings.