Skip to main content
knowledgecenter.avangate.com

Edit the mobile checkout template

Overview

Important: Template customizations saved will have an immediate effect on the mobile shopping cart design.

Use the interface templates capabilities of the Avangate platform to create, customize and manage multiple flavors of shopping cart designs for both desktop and mobile device users. Avangate enables you to build mobile versions of desktop cart templates, providing a high level of flexibility when it comes to the user experience you're offering customers purchasing your products via smartphones and tablets.

Availability

Customizable mobile shopping cart templates are available exclusively to Avangate Enterprise Edition accounts.

Requirements

To edit and customize default mobile shopping cart designs, you must meet the following requirements:

  • Your account must use the Standard or Enterprise Edition Suite. Contact Avangate to enable this feature for your account.
  • At least one of the products configured must be compatible with the mobile ordering flow (use electronic delivery and not physical delivery).

Default mobile shopping cart designs are automatically created and associated with each desktop interface template.

How to edit mobile shopping cart templates

  1. Go to Setup -> Interface templates.
  2. To add a new mobile cart interface, scroll down to the bottom of the page and click Add to draft templates.
  3. Click Edit on the recently added draft template
  4. Provide a Template name
  5. Scroll down to the bottom of the page and click Save. By clicking Save you will essentially create a new default desktop template. Default mobile shopping cart designs are automatically built alongside each desktop interface template. Click to edit the newly created template.To edit an existing template whose mobile version you wish to modify simply identify the item on the list of templates available and click Edit. This is valid for both Current and Draft interface templates.
  6. Once you accessed the interface template, select the Mobile tab.
  7. You can opt for Basic customization via a WYSIWYG (what you see is what you get) editor, or choose advanced customization by entering your own CSS (Cascading Style Sheets) and JavaScript code in the two code editors at the bottom of the page.

Basic customization

Template customizations saved have an immediate effect on the mobile shopping cart design.

Use the WYSIWYG editor to customize various elements of the mobile shopping cart interface including text, icons, buttons and other call to actions, form fields, etc. All changes will be immediately visible in the Preview to the right hand side of the editor.

Avangate recommends testing the customized mobile template on Android and iOS devices before going live. Actual design might vary from the preview. The mobile shopping cart preview is not equipped with cart functionality, does not support gestures and manipulations beyond basic navigation, or touch interaction emulation.

Click Save for the custom design to replace the default mobile template.

Advanced customization

Important: Template customizations saved have an immediate effect on the mobile shopping cart design.

Avangate supports advanced customization of the mobile shopping cart enabling you to offer your customers a unified purchase experience across traditional computers and mobile devices.

Control every aspect of your customers' shopping experience across mobile devices. Full mobile cart interface personalization is supported through the use of templates. Write your own CSS (cascading style sheet) and JS (JavaScript) code and use them to offer one or multiple versions of the Avangate mobile shopping cart to shoppers using mobile devices.

Important: Customization introduced through CSS and JS supersedes and overrides all personalization done through the WYSIWYG editor.

Advanced customization is best suited to scenarios involving personalization needs more complex than what basic customization can deliver.

  1. Go to Setup -> Interface templates.
  2. Identify the item whose mobile version of the cart interface template you wish to modify and click EditNote: this is valid for both Current and Draftinterface templates.
  3. Once you accessed the interface template, select the Mobile tab.
  4. Scroll down to the bottom of the page and enter your own CSS (Cascading Style Sheets) and JavaScript code in the two code editors available here.
  5. Click Save.
  6. Click Preview to refresh the preview above the two editors.

Important: jQuery mobile version 1.2.0 is used for the Avangate mobile shopping cart. Avangate strongly recommends that you familiarize yourself with jQuerymobile version 1.2.0 when customizing the interface using your own CSS and JS code.

Here's an example of code which changes the background color for the header and the footer:

<style type="text/css">

.ui-header {background-image: -webkit-linear-gradient(
#c3d8e4 /*{a-bar-background-start}*/,
#5088a8 /*{a-bar-background-end}*/);}

.ui-footer {background-image: -webkit-linear-gradient(
#c3d8e4 /*{a-bar-background-start}*/,
#5088a8 /*{a-bar-background-end}*/);}

</style>

Note: Avangate recommends testing the customized mobile template on Android and iOS devices before going live. Actual design might vary from the preview. The mobile shopping cart preview is not equipped with cart functionality, does not support gestures and manipulations beyond basic navigation, or touch interaction emulation.

Assigning mobile templates to products with the use of product groups

The Avangate platform enables you to bundle your products into groups and to assign a specific interface template to each Product Group. When you link a template to the products in a product group, you also connect the mobile version of the template to the same collection of offerings.

For this example, let's assume you configured an offering dubbed Product A, and a shopping cart design labeled Interface Template A, for which you customized the mobile version of the interface. To assign Interface Template A to Product A follow these steps:

  1. Go to Setup -> Products.
  2. Run a search to identify Product A, and click to edit it.
  3. Select the Information tab.
  4. Click Manage groups.
  5. Add a new group by simply entering the group name (Product Group A for this example)
  6. Click Add group.
  7. Open the drop-down menu under Interface template and select Interface Template A. Enter a description for the group if needed.
  8. Select Product A from the left side list of Available products and click the action button to move it to the Group products list.
  9. Click Update.

As an immediate result, Buy Links generated for Product A will present to shoppers the desktop version of Interface Template A id they're shopping via a traditional computer, or the mobile variant of Interface Template A when using mobile devices for the ordering process.

Multiple products in the same mobile cart

Let's assume that you assigned Interface Template A to Product Group A and Interface Template B to Product Group B.

As a result, when shoppers buy Product 1 belonging to Product Group A they'll see Interface Template A of the shopping cart, and the mobile version of Interface Template A if they're purchasing using a mobile device.

Similarly, shoppers acquiring Product 2 belonging to Product Group B will be presented with Interface Template B of the shopping cart, and the mobile version of Interface Template B when purchasing via mobile devices.

When Product 1 and Product 2 are both added to cart, the Avangate system will prioritize the desktop and mobile versions of the Interface Template displayed to shoppers according to the order of the offerings in the Buy Link. For example, if the ID of Product 1 is 1111111 and Product 2 has 2222222 as unique identifier, for the following link:

https://YourStore.YourWebsite.com/order/checkout.php?PRODS=1111111,2222222

shoppers will see Interface Template A, and the mobile version of Interface Template A, even though Interface Template B is assigned to Product 2.

Switching the order of product ID parameters in the Buy Link, also swaps Interface Template A for Interface Template B. As such, shoppers buying products using this link:

https://YourStore.YourWebsite.com/order/checkout.php?PRODS=2222222,1111111

will be presented with Interface Template B and the mobile version of Interface Template B.

ORDERSTYLE and LAYOUT_TYPE

 

Use ORDERSTYLE and LAYOUT_TYPE parameters in the Buy Links to force the mobile version of a specific Interface Template to always be displayed.

ORDERSTYLE

Optional

Allows you to set the corresponding template, overriding the default template assigned to the product group. Each template defined in theInterface Templates area of the Control Panel has a unique identifier associated which is visible in the browser address bar when previewing the shopping cart.

LAYOUT_TYPE

Optional

LAYOUT_TYPE enables you to control which version of the shopping cart is served to shoppers. Possible values:

CLASSIC - the desktop variant of the shopping cart (using LAYOUT_TYPE=CLASSIC will always display the desktop version of the cart even to mobile device users);

MOBILE - Avangate mobile cart (using LAYOUT_TYPE=MOBILE will always display the mobile version of the shopping cart, even to users of desktop browsers).

 

Let's assume that aAAaaAAAaA1%1A is the identifier for Interface Template A and bBBbbBBBbB2%2B the ID of Interface Template B. We'll also use 1111111 as the ID of Product 1 and 2222222 for Product 2. Interface Template A is assigned to Product Group A and Interface Template B to Product Group B.

In this regard, the following links:

https://YourStore.YourWebsite.com/order/checkout.php?PRODS=1111111&ORDERSTYLE=aAAaaAAAaA1%1A&LAYOUT_TYPE=MOBILE will always display the mobile version of Interface Template A to all users clicking on this buy link for Product A, regardless of whether they're using mobile devices or not.
https://YourStore.YourWebsite.com/order/checkout.php?PRODS=2222222&ORDERSTYLE=bBBbbBBBbB2%2B&LAYOUT_TYPE=MOBILE will always display the mobile version of Interface Template A to all users clicking on this buy link for Product B, regardless of whether they're using mobile devices or not, and overriding the template assignation of Product B, which is Interface Template B.
https://YourStore.YourWebsite.com/order/checkout.php?PRODS=1111111,2222222&ORDERSTYLE=aAAaaAAAaA1%1A&LAYOUT_TYPE=MOBILE will always display the mobile version of Interface Template A to all users clicking on this buy link for Products A and B,  regardless of whether they're using mobile devices or not, and overriding the template assignation of Product B, which is Interface Template B.

Reset to default

Use this button to reset the mobile shopping cart to its default design. Reset to default impacts only changes introduced through the WYSIWYG editor but not customization introduced through CSS or JS.

FAQ

  1. Can I edit the mobile shopping cart template for the Default Template?
    • No. Just as with the Default Template, its associated mobile shopping cart interface is not editable.
  2. Will the mobile temple also be used for the following pages: Customer Support, Affiliate Signup, Partners Signup, Partners Login, Partners product registration and My Account in addition to the Shopping Cart?
    • No. The mobile template will also impact the design of the shopping cart for users accessing checkout (checkout.php) via mobile devices.
  3. Can I use analytics tools with the mobile template?
    • Yes, you can integrate analytics solutions such as Google Analytics with Avangate mobile shopping cart by editing templates, using the advanced customization editor.
  4. Are there any settings shared by the desktop and mobile versions of a template?
    • Yes, such as the settings in the following areas:
      • Template information (including languages)
      • General (including template name).
    • Desktop (classic) template settings under the following areas: External JavaScript and CSS files; HEAD Information; BODY Information and Style Information so not impact the mobile version of the template.