ConvertPlus Cart Editor
Overview
You are now able to customize the payment experience of your customers by adding your own vision to the display of the shopping cart pages. The new ConvertPlus Cart Editor module gives you control over shopping cart elements, by providing an easy-to-use visual interface for your customizations. Cart Editor allows you to define new styles for texts displayed in the shopping cart, add new designs for buttons, select new colors for different cart elements, and many others.
Related links
ConvertPlus is a full-stack solution that enables you to increase conversion rates with faster loading time and optimized flows. Download this solution brief to learn more!
Availability
Cart Editor is available on all accounts that have ConvertPlus enabled. Contact 2Checkout for more details on ConvertPlus activation.
Cart themes
You can edit the following themes using ConvertPlus Cart Editor. Make a copy of the theme you want to edit, and add your own style and vision to the future shopping cart pages.
One column with payment buttons
This template can be used by all companies looking to increase their conversion rates by using a smart display of the billing and payment information fields in the cart. The short form helps you increase conversion rates, as only mandatory billing fields are displayed. Billing details and card information are presented in one column, making the payment experience smoother for your shoppers.
The display order of the payment methods in the cart reflects their popularity based on the selected billing country.
The input of card information is easier and clearer as the cart auto-detects the card type after typing the first digits of the card. The theme has a responsive design on devices such as desktop, tablet, and smartphone.
ConvertPlus default
The ConvertPlus default template is designed to help you increase conversion rates by embedding the industry’s best practices. Billing details and card information are displayed inline, offering customers a fast and secure checkout. To improve the payment experience for your shoppers, the cart contains a short billing form, having only the mandatory fields displayed.
Shopper’s country/state is detected and pre-filled based on geo-location. The input of card information is easier and clearer as the cart auto-detects the card type after typing the first digits of the card. The display order of the payment methods in the cart reflects their popularity based on the selected billing country.
We're building and adding new features continually, check out the full list of supported functionalities and the current limitations.
Edit a cart theme
Follow the steps below to edit and publish a customized theme:
- Log in to the 2Checkout Merchant Control Panel.
- Go to Setup -> Interface templates.
- Click on ConvertPlus located right near the Default flows tab.
- Select the theme you want to edit and click Make a copy.
- Once redirected in the editing visual interface, use the menu from the left side to customize the theme selected. You can apply general customizations on the cart template by changing the properties of different elements, such as links, buttons, panels, messages, logos from the Branding drop-down list. You can also edit specific sections of the cart by using the Cart items, Billing details, Payment details, and Footer drop-down sections.
- Rename your customized theme by clicking on the current theme title and by adding a new text in the edit box. Save the changes by clicking on the save icon.
- You can preview and apply any customization made to the cart by using the Preview and Apply buttons from the menu.
- From the drop-down list located in the top right corner, you can change the page you are customizing (checkout or landing page/retry page/finish page). Add consistency to your work by editing all the pages.
- Check how your customized theme would look on different devices, by switching between the different device icons displayed in the top right corner.
- After you apply the changes, click on Save changes to save your customization.
- Click Close to return to the Interface templates page, or Publish, to make your customization available for creating links in the Generate Links area.
General customizations
ConvertPlus Cart Editor allows you to customize different elements of the shopping cart pages, leading to a personalized payment experience for your shoppers. You can apply general styling to your cart pages by editing the following elements:
- Body - Personalize the properties from the page body by adding your own styling to the font and colors used. Go to Branding > Body to make the desired changes on body attributes.
- Logo - You can easily add your own logo to the shopping cart page, while also reserving the option of hiding the logo image. Click on Branding > Logo drop-down list to control the display of your logo.
- Fields - You have advanced control over the fields display, with the ability to customize the field properties such as background color, border type, label and input colors. You can also control the display of the error messages that might be triggered on cart fields, by adding style to error background/border and label. Click on Branding > Fields to customize your fields.
- Links - You can personalize the display of the links from your shopping cart pages. Select a new color, or choose a different text-decoration for the cart links from Branding > Links.
- Panels - Customize the display of the shopping cart panels from Branding > Panels. You have total control over the text properties, while also being able to make advanced customizations on the padding, color and border attributes of your panels.
- Buttons - You can change how buttons are displayed in the cart from Branding > Buttons. You have access to a variety of properties for buttons customization, such as: setting default/primary/success colors, adding new border types or setting new text properties.
- Messages - Change the font properties of the messages displayed in the shopping cart pages, both success and error-related, from Branding > Messages.
- Trust logo - Select a display type for the trust logo shown in the cart page by clicking on Branding > Trust logo.
Advanced customizations
In case you want to apply advanced customizations to a cart theme, you can add a different styling to each shopping cart section. ConvertPlus Cart Editor allows you to customize each segment of the cart in a different way, as part of your goal of giving customers a personalized payment experience.
Advanced customizations have priority over the changes made from the Branding menu. For instance, if you edit the color of the links from the Branding menu to red, all the links from the page you are editing will be red. However, by setting the link color from the Cart items section to blue, you are overwriting the customization for this section, and the links color from the Cart items segment will be blue.
Cart Items
Add a different styling to the cart items section from the shopping cart page, by clicking on the Cart items drop-down list. Customize the display of product title, image, quantity and price in the cart by editing the properties of these elements. You are able to add a detailed styling to the coupon box by clicking on Promotion, and you can do advanced customizations to the Delete button, Cart total, and Taxes elements.
Billing details
You can customize the second section of the checkout page by clicking on the Billing details drop-down list. Add your own design to the text properties, background color and border types that compose the environment into which shoppers enter their billing information.
Payment details
You can apply different styling to the payment details section by editing the properties from the Payment details drop-down list. Add a different design to this section by customizing properties such as border type, background color, font size and type to give shoppers a unique experience when they are adding their payment information.
Footer
Click on the Footer drop-down list to start customizing the footer element. You can apply different styling to properties such as border, text and background color.