Skip to main content
knowledgecenter.avangate.com

Customize checkout interfaces

Overview

Customize the out-of-the-box shopping cart templates offered by Avangate and create completely personalized designs of the interface your customers use during their purchase.

Important: Saved template customizations have immediate effect on the shopping cart design.

Availability

All Avangate accounts.

How to add a cart/checkout template

  1. Go to Setup -> Interface templates.
  2. Scroll down to the bottom of the page and click Add to draft templates on the template that you want to use.

Customize a cart/checkout template

  1. Identify the item you want to customize from those added to the Draft templates area
  2. Click Edit.

Template localization

By default, the English template is used for all languages if you did not define any localized templates. You can change this in two ways:

  1. Click the links available for each language and add/edit the template for that specific language.
  2. Check the check boxes next to the languages you want to save a copy of the default template for. Subsequently, you can click on each language and edit the specific copy of the default template for that language as a standalone item.

Use a custom template on a different website

If you generate sales from a different website and you want to include that address in the emails the Avangate system sends to the shoppers, enable the Define the URL to be included in the notifications to customers as the sale source option and enter the address of the website in the dedicated field.

External JavaScript and CSS files

As an alternative to using Avangate’s templates, you can add your own JavaScript and CSS files to fully customize your customers’ experience. Keep in mind, though, that changing these files is an advanced operation best handled by experienced programmers.

To change the external JavaScript and CSS files, go to Media Center and upload your files. Avangate will automatically merge the files with the built-in interface files. Unless you upload your custom CSS and JS files to a secure Avangate server, Avangate cannot establish a secure connection (SSL) for your customers.

You can upload one or more CSS and JavaScript files according to your needs. When you upload multiple CSS or JS files, the last ones added will take precedence over previous ones. Custom CSS and JS files override the default ones. Avangate recommends that you use only a single .CSS file and a single .JS file in order to optimize page load time.

Once you upload the CSS and JS files, you can see them in the External JavaScript and CSS files section of the custom template Edit page. You can also implement full or partial advanced personalization by using custom templates.

HEAD Information

In addition to customizing the CSS and JS files, you can also edit the following:

  • Doctype declaration
  • Page title
  • META & CSS
  • HTML code
  • JavaScript code

Click Save after you’re done making inline changes

Scroll down to the bottom of the page and click the Save button. The Save with comments button is designed to allow you to add observations to a custom template.

BODY Information

The BODY Information section allows you to modify the HTML code for the body of the page as well as the JavaScript code.

Click Save after you’re done making changes