How to Change your Checkout's Modal Appearance
[Note: This feature is available on the Standard (plus the Page Importer) / Pro / Agency / Scale and Maximize Plans. If you need this feature and you would like to upgrade to a different plan please contact us at support@convertri.com]
Video:
Article:
In Convertri, you can give your modal checkout a new look by using one of our built in skins.
To do this:
1. Open the Products menu in the page editor and add a product to your page.
2. Select the ‘Checkout Appearance’ tab from the left.
3. Then under the Skin heading click the blue ‘Change’ button.
4. This will open up the checkout skin selector where you can then choose the skin you would like to use.
5. To select your skin simply click on the skin that you want to use. This will show a preview of the skin, and you can then click the blue ‘Select’ button to confirm your selection.
Classic - A general-purpose checkout skin suitable for any funnel or site.
Fresh - A classy, elegant scheme that keeps full focus on the checkout form.
2-step checkout - Capture prospects' details before they enter their billing information.
Store - An ecommerce-style checkout experience.
When the Store skin is selected, you can see an option in this tab to ‘Show related products’. Default is off. If the toggle is off, the pane is not displayed even if items in the basket have related products set. You can also see an option to ‘Allow buyer to adjust quantity’.
Note: The Add to Cart button currently only works with the Store skin.
This appearance contains the following sections:
- Title header, including a spot for the user’s logo
- Stage indicator, showing which point of the flow your buyer is at
- List of all items currently in the basket. This section can scroll if there are too many to show. Each item is shown individually.
- Pricing breakdown
- ‘Go To Checkout’ button - clicking this will move to the next stage of the checkout
- ‘Continue shopping’ button - clicking this will close the checkout