Designing Your Cart & Checkout Pages in the Theme Editor (OS 3.0 Themes)

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.

Navigating to the Cart Page in the Theme Editor

To open the Cart page in the Theme Editor:

1. 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.

2. At the top of the Theme Editor, click the page selector and select Cart from the list of page types.

   

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.

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.

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:

1. In the Theme Editor, go to the Cart page. 

2. Under Template, click + Add component.

   

3. In the panel that opens, browse or search for a component under the Theme tab.

   

4. 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.

Example: Adding a Countdown Timer to Your Cart Page

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

1. In the Theme Editor, go to the Cart page. 

2. Under Template, click + Add component, then select Countdown timer from the Theme tab.

   

3. 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.

   

4. Under Countdown timer, click Image to upload a promotional image for the countdown banner, set the image width, and configure its destination link.

   

5. 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.

6. 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."