Skip to main content
knowledgecenter.avangate.com

Advanced checkout interface customization

Overview

Control every aspect of your customers' purchasing experience. Full personalization is supported with the use of custom templates. Upload your own CSS (Cascading Style Sheet) and JS (JavaScript) files and use them to offer your own version of the cart to your customers. 

Availability

All Avangate accounts. 

Templates

Start from any of the following out-of-the-box interface templates and customize them by adding your own CSS and JS. 

  • SaaS one column 
  • One column, optimized payments 
  • Three column checkout  
  • Short funnel checkout 

Add CSS and JS

  1. Navigate to the Interface templates area of your account.
  2. Scroll down to the bottom of the page and add to draft templates any of the following four:
    • SaaS one column 
    • One column, optimized payments 
    • Three column checkout  
    • Short funnel checkout 
  3. Identify the newly added template and edit it. 
  4. Add your own CSS and JS, either by using the inline editors or by uploading your own files. 
  5. Save your custom template, then add it to a product group that governs a specific list of products. Once you've done so, Avangate automatically displays the custom checkout interface each time shoppers add one of the items in the product group to cart. 

CSS

Start with these CSS (Cascading Style Sheet) examples to customize your checkout interface. The classes below cover:

  • Body
  • Links
  • Header
  • Header logo
  • Sub seader - located under the header
  • Cart steps - located in the subheader
  • Content
  • Boxes
    •     .order__box - affects the outer container of the main sections in the page content (Products in shopping cart, Billing Information, Payment Options etc.)
  • Box headers
  • Box headers text
  • Products section
  • Columns of the products in cart
  • Buttons
  • Form fields
  • Secure checkout
  • Footer
  • Footer links
<style>
  /* Body */
  body {
    background: #eee;
    color: #555;
    font-size: 14px !important;
    line-height: 20px !important;
    min-height: 100%;
  }
  
  /* Links */
  a:active,
  a:hover,
  a:link,
  a:visited {
    color: #255e99;
    text-decoration: none;
  }
  
  /* Header */
  #header {
    background: #fff;
    border-color: #dadada;
    border-style: solid;
    border-width: 0 0 1px;
    padding: 15px 0;
  }
  
  /* Header */
  .logo {
    width: 200px;
  }
  
  /* Sub Header - located under the header */
  #subheader {
    background: #eee;
    border-bottom: 0;
    padding: 15px 0 5px;
  }
  
  /* Cart Steps - located under the header, in the subheader */
  #steps-wrap #steps .step-nr {
    border: 1px solid #255e99;
  }
  
  #steps-wrap #steps .step.checked .step-nr,
  #steps-wrap #steps .step.current .step-nr {
    background: #255e99;
    color: #fff;
  }
  
  #steps-wrap #steps .step-nr,
  #steps-wrap #steps .step.colored .step-name {
    color: #255e99;
  }
  
  #steps-progress-bar-wrap #steps-progress-bar-content .step-bar.checked .step-bar-left-content,
  #steps-progress-bar-wrap #steps-progress-bar-content .step-bar.checked .step-bar-right-content,
  #steps-progress-bar-wrap #steps-progress-bar-content .step-bar.current .step-bar-left-content {
    border-bottom-color: #255e99;
    border-top-color: #255e99;
  }
  #steps-wrap.preset-4 #steps .step.checked .step-nr, 
  #steps-wrap.preset-4 #steps .step.current .step-nr {
    background-color: #255e99;
  }
  
  /* Content */
  #order__container {
    background: #fff;
    border: 1px solid #dadada;
    border-radius: 6px;
    margin: 10px auto;
    padding: 10px 10px 0;
  }
  
  /*
    Boxes
    .order__box - affects the outer container of the main sections in the page content 
    (Products in shopping cart, Billing Information, Payment Options etc.)
  */
  .order__box {
    border: 1px solid #dadada;
    border-radius: 4px;
    box-shadow: none;
  }
  
  /* Box headers */
  .order__box .order__box__title {
    background-color: #eee;
    border-bottom: 1px solid #dadada;
  }

  /* Box headers text */
  .order__box .order__box__title .order__box__aux2 {
    color: #255e99;
  }
  
  /* Products Section */
  #order__cart__contents.default .order__listing__item__name {
    color: #255e99;
    font-weight: 700;
  }
  
  /* Columns of the products in cart */
  .products-content__info {
    color: #255e99;
  }
  
  /* Buttons */
  .btn-default {
    background-color: #fff;
    border-color: #ccc;
    color: #255e99;
  }
  
  .btn-success {
    background-color: #255e99;
    border-color: #008d45;
    color: #fff;
  }
  
  /* Form Fields */
  .register_form_table .register_form_text_input,
  input.order__text__field,
  input[type="text"],
  input[type="password"],
  input[type="number"],
  select,
  select.order__select__field,
  textarea,
  textarea.order__textarea__field {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555;
    font-size: 14px;
    height: 34px;
    line-height: 1.42857;
    padding: 6px 12px;
  }
  
  /* Secure Checkout */
  .secure-checkout-content {
    background: #eee;
  }
  
  .secure-checkout-header {
    color: #255e99;
  }
  
  /* Footer */
  #footer {
    background: #37464f;
    border: 0;
    border-width: 0;
    color: #d0d0d0;
  }
  
  /* Footer links */
  #footer a {
    color: #fff;
    text-decoration: underline;
  }
</style>

JavaScript

Utilities & dependencies:

  • avaPage - Global object with current Shopping Cart context (checkout, product, cart, verify, finish)
  • avaDebug - Enables debugging and avaLog().
  • avaLog(param, param, ...) - Used for console.log and fallback for older browsers. Disabled if you use avaDebug (avaDebug = true).
  • avaAppendImg(src, targetTag)
  • avaAppendScript(src, targetTag)
  • avaGUP(query, where) - Get URL Parameter

Logo

  
  // When the DOM is ready.
  jQuery(document).ready(function($) {
    // Your Code
   
   AvaCart.Widgets.logo.destroy = function() {
    $(this.settings.placeholder).empty();
};
AvaCart.Widgets.logo.destroy();
AvaCart.Widgets.logo.initialize({
    placeholder: '.site-branding',
    link: 'http://www.YourSite.com/',
    image: 'https://secure.avangate.com/images/merchant/123e5f6bcd78a9d10eee1dfe31cfc5823/yourimage.png'
});
    
  });

Payment options info

// When the DOM is ready. After everything has been loaded 
  jQuery(document).ready(function($) {

    /**
     * To rewrite the payment options info, first destroy the current object.
     */
    AvaCart.Widgets.paymentOptions.destroy = function() {
        $(this.settings.placeholder).remove();
    };
    AvaCart.Widgets.paymentOptions.destroy();

    /**
     * Next,  initialize the payment options object. Available properties: 
     * @property {string} placeholder The placeholder class or id e.g. ".payment-box", created before the initialization.
     * @property {string} spriteClass Sprite class e.g. "sprite-32".
     * @property {string} spriteSrc Sprite URL Source.
     * @property {boolean} groupCards Group all credit/debit cards and display the result as a standalone payment option.
     * @property {boolean} showGroupedCardsIcons Works only if "groupCards" and "showIcons" are "true".
     * @property {boolean} autogetCardTypes If "groupCards" is "true" "autogetCardTypes" will be considered "true".
     * @property {string} cardsLabel The label that displays for the grouped Credit Cards options.
     * @property {string} radioOptions Enables the payment options radio selector.
     * @property {string} showRadioButtons Displays a radio button on each payment option.
     * @property {string} showLabels Displays each payment options text label.
     * @property {string} showIcons Displays each payment options icon.
     * @property {string} showOptionTitle 
     * @property {string} selectOtherMethods The label that displays for the select other methods dropdown.
     * @property {string} cardIconsPlaceholder The external placeholder ".where-the-cards-icon" to be appended. 
     * @property {string} cardIconsSpriteSrc Source of the sprite used only for credit cards icons. 
     * @property {string} cardIconsSpriteClass 
     * @property {string} layout AVAILABLE OPTIONS: 'default', 'layout-1',  'layout-2', 'layout-3', 'layout-4', 'layout-5' 
     * @property {string} widgetClass Adds class to main wrapper of the class. 
     * @property {boolean} countryHasChanged Internal variable used for regenerating payment options order when shoppers change the billing country in the ordering interface.
     * @property {boolean} moveBillingCurrencyAfterPaymentOptionsSelect if set to true, the billing currency selector is inserted after the "Other Payment Options" selector. 
     * @property {boolean} showMovedBillingCurrencyLabel If true, Avangate shows the label for the moved billing currency selector.
     * @property {boolean} showBillingCurrencyInHeader If true, Avangate appends a clone of the billing currency selector to the payment options box title.
     * @property {boolean} showBillingCurrencyLabelInHeader If true, Avangate shows the label for the billing currency selector in header .
     * @property {boolean} showLanguageInHeader If true, Avangate appends a clone of the language selector to the payment options box title.
     * @property {boolean} showLanguageLabelInHeader If true, Avangate shows the label for the language selector in header.
     * @property {boolean} showLanguageFlagsInHeader If true, Avangate shows the flags for the language selector in header.
     * @property {boolean} showArrowIcon Enables custom icon ("arrowIcon", "focusArrowIcon") from using a custom font that  replaces the CSS arrow in the selector.
     * @property {string} arrowIcon E.g. 'icon-down-open' 
     * @property {string} focusArrowIcon E.g. 'icon-up-open'
     */
    AvaCart.Widgets.paymentOptions.initialize({
        placeholder: '.payment-options-wrapper', // created before the initialization "AvaCart.Widgets.paymentOptions.before"
        autoDetectIconsPlaceholder: '.payment-options-card-icons',
        
        // spriteSrc: 'https://secure.avangate.com/images/merchant/6531b32f8d02fece98ff36a64a7c8260/pay_options_new.css',
        // spriteClass: 'sprite-new sprite-32',
        
        spriteSrc: (avaPage.isExpressCheckout ? 'https://secure.avangate.com/images/merchant/6531b32f8d02fece98ff36a64a7c8260/avacart-payment-options-sprite-32.css' : 'https://secure.avangate.com/images/merchant/6531b32f8d02fece98ff36a64a7c8260/avacart-payment-options-sprite-48.css'),
        spriteClass: (avaPage.isExpressCheckout ? 'sprite-32' : 'sprite-48'),
        
        // spriteSrc: 'https://secure.avangate.com/images/merchant/6531b32f8d02fece98ff36a64a7c8260/sprite-64x44-new-style.css',
        // spriteClass: 'sprite-new sprite-64',
        cardIconsPlaceholder: '.payment-options-card-icons',
        cardIconsSpriteSrc: 'https://secure.avangate.com/images/merchant/6531b32f8d02fece98ff36a64a7c8260/avacart-payment-options-sprite-32.css',
        cardIconsSpriteClass: 'sprite-32',
        groupCards: false,
        radioOptions: 0,
        showIcons: true,
        showLabels: true,
        showIconsAfterText: false
        
    });
    
          });
    // When the Window is loading (DOM and resources).
  jQuery(window).load(function($) {
    // Your Code
  });

Cart steps

 // When the DOM is ready. After everything has been loaded 
  jQuery(document).ready(function($) {
  
  /**
     * To rewrite the information regarding cart steps, first destroy the current object.
     */
    AvaCart.Widgets.cartSteps.destroy = function() {
        $(this.settings.placeholder).remove();
    };

    AvaCart.Widgets.cartSteps.destroy();

    /**
     * Next, initialize the cart steps object. Available  properties: 
        placeholder: null, The placeholder class or ID created before the initialization
        steps: null, see below. Add the page URL, its label  and the page name.
        checkedIconClass: 'icon-check', CSS class that adds the "checked icon" for the purchase flow stage  marked as visited. 
        noOfSteps: 4, Number of stages (steps) of the purchase flow.
        startFromStep: false, Start from a certain stage of the purchase flow (instead of starting from "shopping cart", you can choose to start from "checkout").
        removeSteps: false, Skip a step (for eg. remove verify page).
        showOnPages: false, Show the steps on certain pages.
        showLinks: false, Sow step link.
        showStepBox: false, 
        showStepIcon: true, Show icons for purchase flow stages.  
        colorCheckedSteps: false, Add a color to the checked steps.
        colorCurrentStep: false, Add a color to the current step.
        currentStep: 1, default step 
        showLabelsOnTop: true,  
        barStyle: 'solid', 
        layout: '',
     */
    AvaCart.Widgets.cartSteps.initialize({
        placeholder: '.cart-steps',
        
        steps: {
        1: {
            url: 'cart.php',
            label: (__order_steps.STEP_1 !== undefined ? __order_steps.STEP_1 : 'Shopping Cart'),
            page: 'cart'
        },
        2: {
            url: 'checkout.php',
            label: (__order_steps.STEP_2 !== undefined ? __order_steps.STEP_2 : 'Billing Informations'),
            page: 'checkout'
        },
        3: {
            url: 'verify.php',
            label: (__order_steps.STEP_3 !== undefined ? __order_steps.STEP_3 : 'Confirmation and Payment'),
            page: 'verify'
        },
        4: {
            url: 'finish.php',
            label: (__order_steps.STEP_4 !== undefined ? __order_steps.STEP_4 : 'Order finished'),
            page: 'finish'
        }
        },
        //                startFromStep   : 2,
        showOnPages: ['cart', 'checkout', 'verify', 'finish'],
        //                removeSteps     : ['2'],
        showLabelsOnTop: false,
        colorCheckedSteps: true,
        colorCurrenStep: false,
        barStyle: 'solid',
        //            layout: 'default' // AVAILABLE OPTIONS: [default, preset-1, preset-2, preset-3, preset-4, preset-5]
        //            layout: 'preset-1' // AVAILABLE OPTIONS: [default, preset-1, preset-2, preset-3, preset-4, preset-5]
        //            layout: 'preset-2' // AVAILABLE OPTIONS: [default, preset-1, preset-2, preset-3, preset-4, preset-5]
        //            layout: 'preset-3' // AVAILABLE OPTIONS: [default, preset-1, preset-2, preset-3, preset-4, preset-5]
        layout: 'preset-4' // AVAILABLE OPTIONS: [default, preset-1, preset-2, preset-3, preset-4, preset-5]
        //            layout: 'preset-5' // AVAILABLE OPTIONS: [default, preset-1, preset-2, preset-3, preset-4, preset-5]
    });
      });
    // When the Window is loading (DOM and resources).
  jQuery(window).load(function($) {
    // Your Code
  });

Cross-sell campaigns

      // When the DOM is ready. After everything has been loaded 
  jQuery(document).ready(function($) {
  
    /**
     * If you use cross-sell campaigns, you can change the following variables: 
        placeholder: null, The placeholder class or id created before the initialization
        crossSellProducts: null, 
        productShortDescription: '',
        showProductDescription: false,
        showProductDescriptionInPopup: true,   
            use true  to show the product description in a popup
            else, the product description displays below the product name
        displayCurrency: null, 
        billingCurrency: null, 
        showProductImage: true,
        picSize: '80',
        headerLabel: 'We also recommend',
        addToCartLabel: 'Add to cart',
        addToCartIconContent: '+',
        addToCartIconClass: 'icon-plus',
        layout: 'display-vertical', // AVAILABLE OPTIONS: [display-horizontal, display-vertical, condensed], 
        autoOptimizeLayoutDisplay: true, if the max no of prods is 4, you can optimize the layout for smaller devices 
        maxProductsPerRow: 4,
        showDiscount: true,
        discountPercentage: true,
        showProductLink: true,
        showBox: true,
        widgetClass: null
     */
    AvaCart.Widgets.crossSelling.initialize({
        //            showProductDescription: true,
        crossSellProducts: cross_sell_products,
        displayCurrency: omniture_vars.DISPLAY_CURRENCY,
        billingCurrency: omniture_vars.BILLING_CURRENCY,
        placeholder: '#order__cross__sell__contents',
        maxProductsPerRow: 4,

        headerLabel: $('.order__crossselling_title').text() || 'We also recommend',
        addToCartLabel: $('.cross__sell__delimiter input.submit-button').val() || (typeof __order_widgets !== 'undefined' ? __order_widgets.ADD_LABEL : 'Add to cart') || 'Add to cart',

        // widgetClass: 'col-md-3',
        layout: 'display-vertical' // AVAILABLE OPTIONS: [display-horizontal, display-vertical]
        //          layout: 'display-horizontal' // AVAILABLE OPTIONS: [display-horizontal, display-vertical]
      });
    
  });
  
  // When the Window is loading (DOM and resources).
  jQuery(window).load(function($) {
    // Your Code
  });

 

Debugging 

To check your JavaScript code for errors set avaDebug = true and use avaLog(variable) to check the variable's value.