Adding Checkout+ to the cart page

Display the Checkout+ checkbox in your Shopify theme and adjust its text and appearance. Installation only requires enabling an app embed in the theme. You do not need to edit any theme code.

We recommend checking on a test theme first

We recommend installing and checking on a duplicated test theme, then applying it to your live theme in 4. Go live. App embed settings are stored per theme, so the same settings need to be applied on the live theme as well.

Setting labels are shown in Japanese

The setting labels in the Checkout+ Cart Watcher panel are displayed in Japanese in the Shopify theme editor, regardless of your admin language. This guide shows the Japanese label in parentheses after each English name.

1. Enable the app embed

1. In the Shopify admin, go to Online Store > Themes and click Customize on the target theme

2. Open "App embeds" in the left sidebar, turn on the Checkout+ Cart Watcher toggle, and click Save

   

2. Check the display

In the theme editor preview, add a product to the cart and confirm that the Checkout+ card appears on the cart page.

If the card does not appear

Depending on the theme structure, the card may not be displayed. In that case, configure the selectors in 4. Advanced settings and the card will appear. If this is difficult, contact your account representative with the preview URL of the theme.

3. Customize the display

From the Checkout+ Cart Watcher settings, adjust the text and appearance of the card and modal. Change the items you need and click Save.

Text settings

Modal image settings

Set the images displayed in the modal opened from "Learn more". If a field is left blank, that area is not displayed.

Modal content HTML

You can freely edit the title and benefits area of the modal in HTML. If left blank, the title and benefits area are hidden.

To restore the original HTML

To go back to the original content after editing, use "Reset to default" on "Modal content HTML" (モーダル コンテンツ HTML) in the theme editor. The default may change with app updates, so use "Reset to default" rather than pasting the HTML below.

The default HTML has the following structure (SVG icons and text omitted; the actual default can be viewed in the theme editor).

<div class="rcmr-checkout-plus-modal__title-section">
  <h2 class="rcmr-checkout-plus-modal__title">Title</h2>
  <p class="rcmr-checkout-plus-modal__subtitle">Subtitle</p>
</div>
<div class="rcmr-checkout-plus-modal__benefits">
  <div class="rcmr-checkout-plus-modal__benefits-connector" aria-hidden="true"></div>
  <div class="rcmr-checkout-plus-modal__benefit-item">
    <div class="rcmr-checkout-plus-modal__icon"><!-- SVG icon --></div>
    <div class="rcmr-checkout-plus-modal__item-content">
      <div class="rcmr-checkout-plus-modal__item-title">Benefit title</div>
      <div class="rcmr-checkout-plus-modal__item-description">Benefit description</div>
    </div>
  </div>
  <!-- Repeat benefit-item for each benefit -->
</div>
<hr class="rcmr-checkout-plus-modal__divider">
<div class="rcmr-checkout-plus-modal__disclaimer">
  <p class="rcmr-checkout-plus-modal__disclaimer-note">Note</p>
  <p class="rcmr-checkout-plus-modal__disclaimer-terms">Agreement to the terms of service and privacy policy</p>
</div>

When editing, keep the class names that start with rcmr-checkout-plus-modal__ (such as rcmr-checkout-plus-modal__title) and the existing design will be applied automatically. See Custom CSS for the full list of class names.

4. Advanced settings (selectors, custom CSS, behavior flags)

These settings are for fine-tuning the display position and appearance. All of them are in the "Advanced" (上級者向け) section of the Checkout+ Cart Watcher settings.

If the card displays correctly, you do not need to configure these.

Selector settings

Specify the insertion point of the banner and the elements used to detect cart rows and remove buttons with CSS selectors. If the card did not appear in 2. Check the display, filling in all of these items correctly will make it appear.

※If identifying the selectors is difficult, contact your account representative with the preview URL of the theme

Custom CSS

You can adjust the appearance of the banner and modal with CSS. If your theme's CSS interferes and breaks the layout, override it using the stable classes below (class names that do not change between versions). The custom CSS is loaded last inside <head>, so at the same specificity it takes precedence over the theme's CSS.

Banner (checkbox card)

Modal

Do not target hashed class names

The column elements directly under the card (checkbox column and content column) have no stable classes. Hashed class names such as _content_xxxxx change with every build, so do not target them in CSS.

Behavior flags

Behaviors such as the checkbox can be specified together in JSON in the "Behavior flags (advanced)" (挙動フラグ（上級者向け）) field. If blank, all defaults apply. Invalid values or broken JSON are ignored and the default behavior continues.

Example: reset the checkbox to off every time a page is opened

{"checkboxStatePersistence":"none"}