Introduction to the cart editor

After selecting the type of checkout you’re looking to build, you’ll be wanting to launch the cart editor and for those not familiar building pages or checkouts, we’re going to run through a few things below.

Here is an example of the default ‘sales cart’ template looks when you first load the editor. This is assuming you’ve not imported an existing design and want to create something from scratch.

If you’re new to editors, it can look a little overwhelming, but don’t worry, everything is laid out in a specific way;

With this in mind, you can easily drag new elements into your checkout, move them around, and select specific elements.

When you select an element, you’ll have a range of options shown in the left-hand panel, letting you change the settings. Some elements will even let you select sub-elements, such as text or images so that you can further customise the very individual pieces.

Multi-step cart notes

When you have a checkout that is set to have multiple steps, you can drag individual elements into an area specific for that step.

When this happens, the background of the area where you’re draggingthe element will be highlighted blue. In the example below, we’re dragging a text element into the checkout section that looks to collect the customers personal information. If this element is added here, then it won’t show when the customer gets to the payment step.

This is hugely powerful as it allows you to really customise each step of the customers journey through your checkout.

Related Articles