How to Add Sections to Shopify Cart Page (OS 2.0 & Code)

The cart page is where shoppers review orders before checkout, making it a key place to improve conversions. Add sections to Shopify cart to include upsells, trust signals, and useful order details. With Shopify Online Store 2.0, you can customise the cart using theme settings, Liquid code, or custom order notes.

Adding sections via online store 2.0 theme editor

If your store utilizes a modern Shopify OS 2.0 theme (such as Concept, Dawn, or other premium market themes), you can natively add alternative sections and custom blocks directly through the theme customizer without touching a single line of code.

Step-by-step customization

1. From your Shopify Admin, navigate to Online Store > Themes.
2. Click the Customize button next to your active theme to open the Theme Editor.
3. In the top page selection drop-down menu, change Home page to Cart.
4. On the left sidebar, click + Add section or + Add block to insert new elements into your cart template group.

Understanding default sections and settings

By default, standard high-converting OS 2.0 themes include two primary template groups on the cart page:

1. Cart page section

This is the core functional area where the items sit. You can adjust layout settings such as heading size (Small to Extra Large), alignment (Left, Center, Right), or semantic HTML heading tags for clean SEO structure. Advanced settings typically include:

• Show Vendor: Displays the brand/manufacturer for each item.
• Shipping Rates Calculator: Allows users to estimate shipping fees instantly by entering their region/zip code.
• Layout Adjustments: Fine-tune top/bottom padding (from 0px to 120px) or check Make section full width to control visual layout spacing.

Within this main section, you can add or toggle specific Blocks:

• Subtotal: Displays the order financial sum (standard block).
• Checkout Button: The direct gateway to payment.
• Free shipping message: Incentivises higher order values. Note: You must set your minimum thresholds in numeric values (e.g., USD:100, EUR:95) that match your shipping backend.
• Custom Fields: Adds tailored text boxes, checkboxes, radio buttons, or dropdown menus to collect specific buyer data.

2. Recently viewed section

Adding a "Recently Viewed" section directly below the main cart is an excellent UX practice that keeps users engaged.

Adding app blocks using liquid code (for unsupported themes)

Some themes support OS 2.0 architecture generally but lack native container definitions within their specific cart.json file. If an app requires you to drop a widget onto your cart page but your theme layout won't let you add it, follow these steps to inject an app block zone.

Step 1: Locate Your Core Cart Section File

1. Go to Online Store > Themes > ... > Edit Code.
2. Under the Templates directory folder, open cart.json.
3. Find the main section template rendering the cart content (usually named "main" or pointing to a section called "cart-template" or "main-cart").

Step 2: Inject the Block Schema

1. Open your corresponding file inside the Sections folder (e.g., sections/cart-template.liquid).
2. Scroll down to the {% schema %} section at the bottom.
3. Look for the "settings": [] block array. Right beneath it, add the app block support code:

JSON

"blocks": [

  {

    "type": "@app"

  }

]

Step 3: Render the App Block in the Liquid Layout

Now, move back up to the HTML/Liquid layout portion of that same file. Decide exactly where you want your custom app widget to appear (usually directly below the Cart subtotal and above the checkout buttons). Paste the following snippet:

{% for block in section.blocks %}

  {% case block.type %}

    {% when '@app' %}

      {% render block %}

  {% endcase %}

{% endfor %}

Click Format Liquid at the top right to tidy your syntax, then hit Save. You can now return to your standard Theme Editor Customizer and use the native interface to click + Add Block > Apps to pick your targeted tool widget!

Pro-Tip: If you are not a Shopify developer, please back up your theme asset before proceeding. Navigate to Online Store > Themes, click the ... icon, and select Duplicate to create a working safety copy.

Activating Order Notes on the Cart Page

If your goal is simply to capture special delivery instructions or personalised gift messages, you don't need code injections or heavy extensions. You can quickly deploy Order Notes (sometimes called Cart Notes).

How to Enable Cart Notes

1. Open the Theme Customizer and head over to the Cart page template dropdown.
2. In the template settings pane on the left sidebar, click on the Subtotal or Cart Page main structural section block.
3. Look for the configuration checkbox labeled Enable cart note (or Enable order notes) and check it.
4. Click Save.

Distinction check:

- Order Notes: Capture overarching delivery/preparation instructions for the overall order.

- Cart Attributes: Custom form fields for collecting broad demographic data per visit.

- Line Item Properties: Targeted customization text specified directly on individual product detail pages.

Editing the Order Notes Label Text

If you want the text label to say something more distinct like "Write a custom gift card note here!", follow these localization steps:

1. Go to Online Store > Themes. Click the ... button and select Edit default theme content.
2. Click the Sections tab menu filtering option.
3. Scroll down to the Cart group area, locate the Note text field parameter, input your custom call-to-action phrasing, and click Save.

Customizing your Shopify cart page not only improves the shopping experience but also helps increase conversions. By adding the right sections, you can implement upsells, display recently viewed products, show free shipping messages, or collect customer information before checkout. Choose the approach that best fits your store to turn your cart page into a more effective sales tool.