Checkout Pages

Overview

The checkout pages control the flow that your customers take when they proceed through the checkout and pay for their order.

There are four steps to the checkout:

1. Customer information
2. Shipping method
3. Payment
4. Thank you (or Order confirmation) page

You can optionally insert offer pages immediately before the Customer information page (step 1) or after the Payment page (step 3).

Each of these pages are rendered from a HTML Liquid file, which is configurable from the dashboard.

Creating a New Theme

You can have multiple “versions” of your checkout:

Tip: It is important that when you’re making changes to your checkout that you create a new version and work on the non-production version of your theme. This way, you can ensure that there is minimal downtime.

Click on Add Checkout to create a new version. You can see which version is the current one on your live site at the moment as it is indicated by a green “Current” label.

To set another version to be the current one, select it from the menu and click on Set as current:

Making Changes

To make a change to a file, click on the file you want to edit in the left sidebar. For text-based files, you can make edits in the code editor to the right. Image assets cannot be edited. Core files cannot be deleted (as it will break the checkout system). Files that can be deleted will display a Delete link on the upper right hand side.

As you’re making changes, you can revert to previous saved versions by selecting the drop down on the upper right hand side.

Within the HTML Liquid templates, you can reference snippets by including them like so:

{% include 'filename.snippet' %}

Tip: Snippets must include the .snippet extension.

Working With CSS

Your checkout comes with a default theme CSS file. If you open the file, you will notice some unusual syntax:

The default theme CSS file is actually a SCSS formatted file — SCSS stands for Superset CSS. If you’ve never worked with SCSS before, don’t worry. It’s just like CSS, except that you can use variables and it has create “nested” CSS easily.

Tip: To learn more about SCSS, please take a quick look at the SASS guide.

You can also create custom CSS files under the Assets folder and reference them in the theme.liquid file using stylesheet_tag Liquid filter:

{{ 'theme.css' | asset_url | stylesheet_tag }}

Note: You will notice that our default themes come with a theme.css file that references “bootstrap4”. Our system has bundled the latest version of Bootstrap to be used in our themes and you can import them to use without needing to reference the file separately. This enables you to quickly and easily change variables which will be reflected in the entire Bootstrap theme.

Uploading Assets

You can upload image assets to your theme by clicking on Add Asset under the Assets folder.

Select the image you want to upload and click on Save Asset. Once saved, you will see the file uploaded within the Assets folder. Right click the image to get the image’s URL for use in the theme.

Note: Each Cartfunnel account comes with a soft limit of 3 GB of storage. We recommend that if you need more space to host it under a third party service like Amazon S3 or Digital Ocean Spaces.

Editing checkout page settings

Note: The following information only applies to our latest version of checkout templates. Accounts using our original templates will not have access to the following options.

For each checkout, you can view the sequence of pages when you click on the checkout to edit:

For example, in the above screenshot, we see that the customer will proceed as such:

• Shopping cart
• Customer information page
• Shipping method page
• Payment page
• Thank you page

(We’ll leave out the pre and post payment upsell pages for this example.)

If you click on the page, you will see some configurable options. For instance, clicking on the customer information page will bring you to the following page:

On the left, you will see available the visual option configuration for this page. On the right is the preview of the page itself.

In general, the settings on the left can be modified without this settings editor and is meant to allow merchants to make modifications quickly without the need for developers to make changes. Developers can optionally add code into the template which Cartfunnel will parse and generate available option inputs such as the ones you see on the left to allow merchants to edit page settings by themselves.

Clicking on View template will allow you to view the raw template itself:

Moreover, additional settings are available. For instance, for the customer information page, you can specify:

• page title
• whether to ask the customer to opt in or out for the newsletter
• require the shipping address

At the bottom of the raw template, you’ll see the JSON schema (denoted by the {% config %} tags) that defined the visual option configuration panel we saw earlier:

Visual option configuration schema

For advance theme developers who want to provide merchants with configuration options, you can use our visual option configuration schema to provide modifiable options that merchants can change without needing them to dive into raw HTML code.

This part of the checkout theme editor is under beta development! We’ll be updating the guides as features are finalized.

Tips on working with Checkout themes

As we at Cartfunnel are always improving the default checkout theme, new features are constantly being added. In order to take advantage of these new features, it is important to organize your own customizations so that there’s a relatively easier path to upgrading your own checkout. Here are some tips to help you achieve just that:

• Make custom changes in snippets and include theme into the default theme
• Create new checkouts to test features before deploying them