Advanced customization

Overview

2Checkout supports advanced customization of myAccount enabling you to offer your customers a unified purchase and post-sale experience by tailoring myAccount to match your brand as well as the look and feel of your online store and shopping cart.

Benefits

• Control the post-sale 2Checkout customer service platform for your shoppers, focusing it only on interactions they have with your company.
• Build a personalized shopper portal experience for your customers complemented by branding and a design aligned with the look and feel of your website.
• Offer a seamless transition from your store to the shopper portal, complete with capabilities enabling subscribers to manage subscriptions, upgrade and even update their information, including payment details, via a single account.
• Hosting myAccount on a custom domain enables you not only to reduce potential shopper confusion since it's the same domain as you online store and the shopping cart, but also to focus it exclusively on the relationship with your shoppers, since only the products purchased from you are displayed.

Requirements

1. Enterprise Edition Suite: Advanced myAccount customization is available for 2Checkout vendors running the Enterprise Edition Suite.
2. Custom host: myAccount customization capabilities are available only in tandem with custom domains.

myAccount options

• Default - The Default version of customer myAccount is available to all your customers unless you personalize the shopper portal.
• Simple customization - the simplest way to personalize the design of myAccount and unify the shopping and post-sale experiences. Use the Simple customization options at your disposal to change the characteristics of standard myAccount user interface elements. Note: You need to host myAccount on a custom domain to have access to Simple customization capabilities.
• Advanced customization - Control every aspect of your customers' myAccount post-sale experience. Full myAccount 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 myAccount to your customers. Note: You need to host myAccount on a custom domain to have access to Advanced customization capabilities.

Edit myAccount interface templates

To customize myAccount, access Interface templates under Setup, and select the myAccount tab. The Default template option is selected provided that no personalization was introduced, and you can select either:

• Simple customization
• Advanced customization

Simple customization

Provide a consistent, unified shopping experience by personalizing the design of myAccount. In addition to hosting myAccount on a custom domain, and focus it exclusively on the relationship with your shoppers, 2Checkout supports the customization of user interface elements, providing you with the tools to offer a consistent and unified experience.

You can customize the customer myAccount template selected by default by selecting the Custom option.

• Branding - Custom myAccount designs will be branded experiences, featuring the same logo as the one uploaded in the 2Checkout Control Panel, under Account settings, in the Company Logo area.
• Styles - you also control the color styles for myAccount text, icons, page title and subtitle, links (for new, hover and visited), for tabs (selected, hover) and tab text, as well as for the table header background and text. All you need is the hexadecimal codes for the new color you want to implement, but a default basic color selector is also available.

Taking advantage of the personalization options, you can redesign customer myAccount.

Advanced customization

Advanced customization is better suited if your myAccount personalization needs are more complex than what Simple customization can deliver. You can upload one or more .CSS files, and similarly use a single or multiple .JS files.

The last CSS or JS files you upload take precedence over previously uploaded items.  We recommend that you use only a single .CSS file and a single .JS file in order to optimize page load time.

Custom myAccount template requirements

Upload all files including CSS, JS but also graphical elements to 2Checkout's server via Media center. Unless uploaded to the 2Checkout servers, these files will not allow for an SSL connection to be established.

To build a new template from scratch click the Add template button.

Note: When first created, all new templates will use the default 2Checkout styles. Adding a new template without customizing it does not create a fully functional myAccount. For example, the menu is missing, since it's expected of you to add it during the redesign process.

Save a custom template

1. Make sure that the checkbox next to the My Account option in the Add template area is checked.
2. English is the default language for templates and cannot be unchecked. Select the additional languages in accordance with the location of the customers you'll target with custom myAccount shopper portals. Click on a language link to add/edit the template for that specific language. Check the boxes for the languages in which the template will be saved. Standalone copies of the template are available for the languages selected and you can manage them independently. By default, the English template will be used for all languages if no other localized templates are defined.
3. Name your template to make it easily distinguishable from others.
4. Upload External JavaScript and CSS files via Media center. 2Checkout Interface Templates use JavaScript and CSS external files to ensure a fast page loading time. Upload external JavaScript and CSS files via "Media Center." 2Checkout will automatically merge the files with the built-in interface files and serve them from a CDN (Content Delivery Network) for increased performance. For minor modifications, please use the inline editors below to overwrite specific lines in the existing .CSS or .JS files. Note: Changing these files is an advanced operation best handled by experienced programmers.
5. Add your custom CSS and JS files. To upload the files, use the Media Center area of the Control Panel. Unless custom CSS and JS files are uploaded to a secure 2Checkout server a secure connection (SSL) cannot be established for your customers. Once uploaded, the CSS and JS files will be featured in the External JavaScript and CSS files area of custom myAccount templates. When added to a template, the custom .CSS and .JS files will override the default .CSS and .JS files used by 2Checkout for myAccount. Note: Any code inserted inline in the editors will overwrite the code inserted in the external .CSS and .JS files. Important: Make sure to delete from the inline editors any pieces of code that you customized using external .CSS and .JS files. For example, if you defined the full CSS through an external file, delete the code in the inline editor completely. However, in scenarios in which you customized only some portions of the template using the .CSS file, leave the necessary code in the inline editor.
6. In addition, you can also edit the:
   
   • Doctype Declaration
   • Page Title
   • Page HTML Code

   Click Save per-editor after inline changes.

7. 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.

Save a custom template with inline changes only

Follow steps 1 through 4 as described above.

Use the Meta & CSS and JavaScript Code editors to enter the custom CSS and JS code for your personalized myAccount template. Click Save per-editor after inline changes.

This area is designed to style both myAccount and Customer Support.

When present, code in the inline editor will override both the custom .CSS and .JS files added to a template as well as the default .CSS and .JS files used by 2Checkout for myAccount.

Note: Any code inserted inline in the editors will overwrite the code inserted in the external .CSS and .JS files.

Steps 6 and 7 are the same as described in the section above.

Tags

Menu links

• <--{MENU_LINK_MY_ACCOUNT}-->
• <--{MENU_LINK_ORDER_LOOKUP}-->
• <--{MENU_LINK_MY_PRODUCTS}-->
• <--{MENU_LINK_USER_DATA}-->
• <--{MENU_LINK_SUPPORT}-->

Extra functionality

• <--{LANGUAGES}-->
• <--{LOGOUT_LINK}-->

Content: <--{PAGECODE}--> (mandatory) It's designed to load the dynamic content of myAccount in accordance to the specific user.

Set a default template

Once you're done customizing or adding a personalized template, head over to Interface templates under Setup, click the myAccount tab and select advanced customization. Hit the Set default button for the custom template that you want your customers to see when they login into myAccount.

Preview a custom template

Navigate to Interface templates under Setup, click the myAccount tab and select advanced customization. Use the Click here link to preview the myAccount interface template. Note: In scenarios in which you're using localized custom templates, you'll be able to preview myAccount versions for each language.

Alternatively, click to edit the desired template, and in the General area on the next screen make sure the myAccount option is selected in the Preview in drop-down menu and click the Preview button.

Delete a default template

Navigate to Interface templates under Setup, click the myAccount tab and select Advanced customization. Click to edit the template you want to delete, scroll down to the bottom of the screen and hit the Delete button.

Generate links

Generate links for the myAccount home page, as well as for all other pages of the customer portal. These links can subsequently be used when building your personalized template.

Navigate to Interface templates under Setup, click the myAccount tab and select advanced customization. Open the drop-down Click here menu, and select Generate links. Alternatively, make your way to Generate links under Setup, and click on the myAccount Links tab.

In the next area, you'll be able to select myAccount pages and generate links for a specific template and language combination. Link testing functionality is also available.

Once generated, integrate these links into your custom myAccount template.

Generate links for the Customer Support page

Links to the Customer Support page are generated in a separate area of the Control Panel. Navigate to Generate links under Setup, and click on the Customer Support Links tab. This area enables you to select the template and the language for which Customer Support page links will be generated.

Templates available in this area include only those that impact:

• Customer Support
• Customer Support and the Shopping Cart
• Customer Support, myAccount and the Shopping Cart

Template parameters

A unique parameter is associated by default to each custom template. You'll be able to notice that for custom templates, the links contain the MYACCOUNTSTYLE parameter, followed by an alphanumeric combination (string).

Use MYACCOUNTSTYLE to serve a different version of myAccount to customers, than the default template.

Let's assume the &MYACCOUNTSTYLE=12345 designates the default template and that &MYACCOUNTSTYLE=123456789 is associated to another custom template. If &MYACCOUNTSTYLE=123456789 is present in links, myAccount will be style according to the custom template associated to this parameter, even though it's not set as the default template.

When the MYACCOUNTSTYLE parameter is used, the custom template it's associated to will always be served, during the same browser session, regardless of whether the same identifier continues to be present in all other links or not.

In scenarios in which no MYACCOUNTSTYLE parameter is used at the start of a browser session, the default template associated to myAccount for your account will be used.

Customer Support

Custom templates defined for myAccount also impact the Customer Support area. When creating a personalized template for your customer hub, attempting to select the myAccount option will automatically also check the checkbox for the Customer Support page. Since the Customer Support page can be accessed from myAccount, it's preferable that it shares the same look and feel as the rest of your customer hub.

At the same time, access to Customer Support is also available via the Shopping cart. In scenarios in which shoppers make their way to the Customer Support page from the shopping cart, these areas will share the same template.

Products Objects

Two JavaScript products are available in myAccount:

• 2CHECKOUT_PRODUCTS - in the My Products page
• 2CHECKOUT_PRODUCT - in the View Product page

The two JS products contain all information visible to customers accessing myAccount, as well as some additional details.

FAQ

1. How can shoppers access myAccount?

Your shoppers can access the customer myAccount through a secure, encrypted connection at https://secure.avangate.com/myaccount which supports a trusted shopping experience.

2. Do I need to create myAcount accounts for shoppers?

Shoppers are automatically registered into the customer myAccount service when they first place an order on your website if you're taking advantage of the 2Checkout platform. They need the email address used during the ordering process or the order number to receive all their login credentials, including a password. But at the same time, shoppers can easily login into their account using their Google, Yahoo! or AOL ID, without the need to know the password that was set for their myAccount.

3. What do I need to take advantage of custom myAccount?

Custom 2Checkout myAccount domains are available in tandem with personalized Ordering Hosts, providing your customers with accounts which share the same domain as the shopping cart used to buy your products.

Take advantage of custom myAccount domains to centralize and offer access only to information for the products that shoppers purchase from you, filtering out their actions in the 2Checkout network that are not related to your subscriptions/licenses.