Created with Sketch.
Created with Sketch.

Avarda docs 2020

Checkout 2.0

Custom CSS Styles

The Check-Out form is styled in a way that it can be used conveniently on both desktop and mobile devices. It is however possible to define custom CSS styles, in order to make the form look & feel like the page that hosts it. A custom CSS file can be used in one of the following modes:

  • In addition to the default styles. In this case, the default style is appended after the default CSS file, allowing to override default settings. This way, partners can easily make minor modifications such as unifying fonts and colors with the rest of the site. However, if really complex modifications are required, the second mode may be more appropriate.
  • Instead of the default styles. In this case, only the custom CSS file is loaded. Therefore, partners has to style the whole form. We recommend to use the first option whenever possible.

The file containing custom CSS styles must be placed somewhere on the Internet where the browser can retrieve it by a URL. The URL must be defined during form initialization in the init method. See Showing the Check-Out Form . Please note that the URLs must fully-qualified. E.g.:

http://shop.contoso.com/customStyles.css

Addresses that are relative to the partner’s site (such as the following), will not work:

../../styles/customStyles.css

CSS styles

Please refer to our default CSS files before making your custom stylesheet. If you choose not to entirely replace our styles (which is the recommended approach), the styles are applied in the following order:

  • FormCommon.css
  • SwedishForm.css
  • NonSwedishForm.css
  • Your custom stylesheet if defined

Reference LESS Files

Internally, Check-Out uses LESS to generate CSS stylesheets (provided for reference). However, Check-Out will serve your custom stylesheets as they are. No conversion will be made. Therefore, if you want to use a CSS pre-processor such as LESS or SASS yourself, your must provide the compiled CSS version of your styles.

  • FormCommon.less
  • SwedishForm.less
  • NonSwedishForm.less

Please note that due to the nature of the application, the styles may change without a prior notice.