Designing Your Cart & Checkout Pages in the Theme Editor (OS 3.0 Themes) – SHOPLINE Help Center

The Cart and Checkout pages are the final steps of your shoppers' purchase journey. Together, they help shoppers review their order, complete payment, and place their order successfully.

For OS 3.0 themes, the Cart page is designed in the Theme Editor, where you can customize its core components and add promotional or informational content to encourage shoppers to complete their purchase. The Checkout page, however, is configured separately in the Checkout Editor, which provides dedicated settings for your store's checkout experience.

This guide explains how to customize the Cart page in the Theme Editor, introduces the Checkout Editor, and directs you to the appropriate guides for configuring your checkout pages.

Before You Start: Confirm You’re Using the Correct Tool

This article covers the Cart page in the Theme Editor (OS 3.0 themes), which controls how shoppers view and interact with the items in their cart on your storefront in a web browser. If you're designing the Shopping Bag page for your SHOPLINE mobile app using Shopper App, see "Designing Shopping Bag Page." Shopper App uses a separate page editor with different components that are independent of the Theme Editor.

Navigating to the Cart Page in the Theme Editor

To open the Cart page in the Theme Editor:

From your SHOPLINE admin panel, go to Online Store > Design, then click the Design button on the OS 3.0 theme you want to edit.
At the top of the Theme Editor, click the page selector and select Cart from the list of page types.

Notes:

The left sidebar of the Theme Editor is always organized into three groups:
- header and footer: Apply across your entire store.
- Template: Contains the content specific to the page you’re editing. For the Cart page, Template contains the Cart component, covering the Title, Product list, and Subtotal blocks covered in this guide.
This guide focuses on customizing the Cart page itself. To configure how the cart is displayed to shoppers (for example, as a Drawer, Cart page, or Pop-up notification), change the Cart style setting under Global settings. For detailed instructions, see "Configuring Global Settings Across Your Store Pages (OS 3.0 Themes)."

Understanding the Cart Page’s Core Components

The Cart component is located under Template in the Theme Editor and contains three core blocks: Title, Product list, and Subtotal. Each block serves a different purpose:

Title: Displays the page heading (for example, "Cart") at the top of the page.
Product list: Displays each item in the shopper’s cart, including the product image, name, quantity selector, and line total.
Subtotal: Displays the cart’s running total and contains two additional blocks:
- Subtotal price: Shows the total cost of items currently in the cart.
- Checkout button: The button shoppers click to proceed to checkout.

Note: The available blocks may vary depending on your theme. Please refer to the blocks displayed in your Theme Editor.

Click a block to open its settings panel. Each block supports only the standard Margin and Padding settings available throughout the Theme Editor and does not include any additional content or display options.

You can also click and drag the six-dot handle to reorder the blocks within the component.

Adding and Arranging Custom Components on the Cart Page

Beyond its core components, you can add extra content to the Cart page using the custom components. This is useful for highlighting a promotion, creating urgency, or reassuring shoppers as they prepare to check out.

Adding Custom Components to the Cart Page

To add a component to your Cart page:

In the Theme Editor, go to the Cart page.
Under Template, click + Add component.
In the panel that opens, browse or search for a component under the Theme tab.
Click the component to add it to the Cart page, then configure its settings.

Recommended Custom Components for the Cart Page

The following components are commonly added to the Cart page to increase conversions, encourage additional purchases, and build shopper confidence before checkout.

Component	Description
Countdown timer	Displays a countdown clock to create urgency, encouraging shoppers to complete checkout before a sale or offer ends.
Discount promotion	Highlights a promotion, discount, or limited-time offer to encourage shoppers to complete their purchase or add more items to their cart.
Recommended products	Displays related or complementary products, encouraging shoppers to increase their order value before checkout.
Logo list	Displays trust badges, payment methods, or certification logos to reassure shoppers before checkout.
Rich text	Adds custom text, such as shipping details, return policy, or secure checkout messaging, to address common concerns before checkout.

Example: Adding a Countdown Timer to Your Cart Page

To add and configure a Countdown timer on your Cart page:

In the Theme Editor, go to the Cart page.
Under Template, click + Add component, then select Countdown timer from the Theme tab.
Click the newly added Countdown timer component to open its Settings panel. Configure the component's overall appearance, including the countdown timer font color, color scheme, full-screen display, and layout, to match your store's design.
Under Countdown timer, click Image to upload a promotional image for the countdown banner, set the image width, and configure its destination link.
Click Countdown settings. Under Settings, choose whether the content inherits the component's color scheme. Under Layout, adjust the spacing and layout of the content area as needed.

Then configure the following blocks:

Title: Enter the main heading for the promotion.
Description: Add supporting text, such as promotion details or a call to action.
Divider: Add or remove a divider to separate the content sections.
Countdown timer: Set the countdown end date and time, and customize the timer's appearance.
Buttons: Configure the button text and destination link to direct shoppers to the relevant page or promotion.

Click Save to apply your changes.

Designing the Checkout Page

The Checkout page is configured in the Checkout Editor, a dedicated editor for managing your store's checkout experience.

To access it, open the page selector at the top of the Theme Editor and select Checkout. You'll be redirected to the Checkout Editor, where you can customize settings such as the checkout page layout, payment methods, and shipping information.

For detailed setup and customization instructions, see "Choosing Your Checkout Process" and "Customizing the Store Checkout Pages."