Skip to main content

Customize Multi-Recipient Cart v2 with CSS Variables

Use 70+ CSS variables to match the multi-recipient cart checkout to your Shopify store's branding. Colors, fonts, spacing, layout, and sidebar positioning.

The multi-recipient cart (v2) can be fully customized to match your store's look and feel. The most common options are available directly in the theme editor as app block settings: colors, font sizes, border radii, padding, and layout dimensions. You can configure all of these without writing any CSS.

For anything the block settings don't cover, we expose over 70 CSS variables for layout, typography, cards, forms, buttons, modals, and product cards. Set any of these variables to override the defaults without touching app code.

tip

If you're using the original multi-recipient checkout (v1), see Customize Multi-Recipient Checkout with CSS Variables instead. Not sure which version you're on? The v2 block is labeled "Multi Recipient Cart v2" in the theme editor.

Theme Editor Settings vs. CSS Variables​

The v2 checkout exposes 20 settings directly in the Shopify theme editor. These are the fastest way to customize the checkout and don't require any CSS knowledge.

To access them, open the theme editor and select the Multi Recipient Cart v2 app block. You'll see settings grouped under Layout, Colors & Typography, Cards, and Buttons & Form Inputs.

The block settings control:

  • Layout: page width, sidebar width, column gap, sticky sidebar offset, block padding
  • Colors & Typography: background color, text color, body text color, accent color, error color, card/input border color, heading font size, input font size
  • Cards: border radius, padding, product image height
  • Buttons & Form inputs: input border radius, button border radius, secondary button background and text color

Many other values are derived automatically. For example, the heading font size you set in the editor generates the H1, H3, H6, body, and caption sizes using proportional multipliers. The accent color drives primary buttons, links, focus rings, and the selected card outline.

If you need finer control beyond these settings, use the CSS variables below.

Where to Add Custom CSS​

You can customize the checkout with CSS variables or direct class overrides. Where you add the CSS depends on whether you want the changes to apply globally or to a single page.

Global changes (Theme Settings → Custom CSS)​

If your store uses the multi-recipient cart on multiple pages (for example, both a collection page and a cart page), set your CSS globally so the styling applies everywhere.

  1. Go to Online Store → Themes → Customize.
  2. Open Theme Settings → Custom CSS.
  3. Add your overrides using the .s2m-mc-root selector for CSS variables: 
    .s2m-mc-root {
      --s2m-mc-product-image-height: 200px;
      --s2m-mc-heading-font-size: 24px;
      --s2m-mc-button-primary-bg: #1a1a1a;
    }
  4. Click Save and preview any page containing the checkout.

This change affects all pages using the multi-recipient cart block.

Page-specific changes (App block → Custom CSS)​

If you want to style the checkout on a single page, or need to override specific elements beyond what CSS variables cover, use the app block's Custom CSS field. This field is scoped to that section, so you write selectors targeting the checkout's class names directly.

  1. In the Shopify theme editor, open the page where the block is installed.
  2. Select the Apps section in the section list (not the block itself).
  3. Scroll down to find Custom CSS.
  4. Add your overrides targeting specific elements by class name: 
    s2m-product-card .s2m-mc-product-card__inner img {
      object-fit: contain;
      height: 200px;
    }
  5. Click Save.

This approach is useful for element-level tweaks that CSS variables don't cover, like changing object-fit on product images or adjusting specific component padding. You can reference any of the class names used in the checkout (they all start with s2m-mc-).

tip

You can use both methods together. Set CSS variables in Theme Settings for broad design tokens (colors, radii, fonts), and use the app block's Custom CSS for targeted element overrides on specific pages.

warning

CSS variable overrides need the .s2m-mc-root wrapper regardless of where you set them. The v2 checkout scopes its variables to .s2m-mc-root, not :root. Setting variables on :root won't work because the component-scoped defaults take priority.

Preview changes live

Open your browser's Developer Tools → Elements → Styles and adjust variables under the .s2m-mc-root selector to preview changes instantly before committing them in the theme editor.

Available CSS Variables​

You can set or override any of the following variables. Wrap them in a .s2m-mc-root block wherever you add them -- this works in both Theme Settings → Custom CSS (global) and the app block → Custom CSS field (page-specific).

Layout​

--s2m-mc-page-width                /* Default: 100% */
--s2m-mc-block-padding             /* Default: 20px */
--s2m-mc-bg-color                  /* Default: #ffffff */
--s2m-mc-layout-gap                /* Default: 24px — space between main column and sidebar */
--s2m-mc-sidebar-width             /* Default: 32% */
--s2m-mc-sidebar-stack-gap         /* Default: 24px — vertical gap between sidebar cards */
--s2m-mc-sticky-top                /* Default: 24px — offset from top when sidebar is sticky */
--s2m-mc-sticky-header-bottom      /* Default: 0px — set this if your theme has a sticky header */

Typography​

--s2m-mc-font-family               /* Default: inherit (uses your theme font) */
--s2m-mc-heading-font-size         /* Default: 22px (H2 size; other headings derived from this) */
--s2m-mc-heading-1-font-size       /* Default: 28px (heading × 1.25) */
--s2m-mc-heading-3-font-size       /* Default: 18px (heading × 0.83) */
--s2m-mc-heading-6-font-size       /* Default: 12px (heading × 0.55) */
--s2m-mc-heading-font-weight       /* Default: 600 */
--s2m-mc-body-font-size            /* Default: 14px (heading × 0.67) */
--s2m-mc-caption-font-size         /* Default: 11px (heading × 0.5) */

Colors​

--s2m-mc-header-text-color         /* Default: #363636 — headings, input text */
--s2m-mc-text-color                /* Default: #727272 — body text, labels */
--s2m-mc-text-color-muted          /* Default: derived (text color lightened 7%) */
--s2m-mc-accent-color              /* Default: #724dff — primary buttons, links, focus rings, selected outlines */
--s2m-mc-link-color                /* Default: same as accent color */
--s2m-mc-link-hover-color          /* Default: accent color darkened 10% */
--s2m-mc-error-color               /* Default: #c10007 */
--s2m-mc-success-color             /* Default: #15803d */
--s2m-mc-warning-color             /* Default: #b45309 */

Cards​

--s2m-mc-card-bg                   /* Default: same as bg-color */
--s2m-mc-card-border-color         /* Default: #e5e7eb */
--s2m-mc-card-border-radius        /* Default: 20px — primary cards */
--s2m-mc-card-padding              /* Default: 20px */
--s2m-mc-card-padding-mobile       /* Default: 10px (card padding × 0.5) */
--s2m-mc-card-secondary-border-radius  /* Default: 10px (card radius ÷ 2) */
--s2m-mc-card-secondary-bg         /* Default: derived (bg-color darkened 5%) */

Product Cards​

--s2m-mc-product-image-height      /* Default: 120px */
--s2m-mc-product-title-font-size   /* Default: 14px (heading × 0.65) */
--s2m-mc-product-description-font-size  /* Default: 12px (heading × 0.55) */
--s2m-mc-product-add-button-bg     /* Default: derived (bg-color darkened 3%) */
--s2m-mc-product-add-button-hover-bg   /* Default: derived (bg-color darkened 6%) */

Form Inputs​

--s2m-mc-input-bg                  /* Default: derived (bg-color darkened 3%) */
--s2m-mc-input-border-color        /* Default: #e5e7eb (same as card border) */
--s2m-mc-input-border-width        /* Default: 1px */
--s2m-mc-input-border-radius       /* Default: 5px */
--s2m-mc-input-text-color          /* Default: same as header-text-color */
--s2m-mc-input-focus-color         /* Default: same as accent color */
--s2m-mc-input-font-size           /* Default: 14px */
--s2m-mc-input-padding-block       /* Default: 5px */
--s2m-mc-input-padding-inline      /* Default: 10px */
--s2m-mc-label-font-size           /* Default: 12px (input font × 0.85) */
--s2m-mc-label-color               /* Default: same as text-color */

Buttons​

--s2m-mc-button-font-size          /* Default: 14px (same as input font) */
--s2m-mc-button-large-font-size    /* Default: 15px (input font × 1.1) */
--s2m-mc-button-small-font-size    /* Default: 13px (input font × 0.9) */
--s2m-mc-button-extra-small-font-size  /* Default: 11px (input font × 0.78) */
--s2m-mc-button-line-height        /* Default: 1.5 */
--s2m-mc-button-font-weight        /* Default: 500 */
--s2m-mc-button-border-radius      /* Default: 5px */
--s2m-mc-button-block-padding      /* Default: 5px */
--s2m-mc-button-inline-padding     /* Default: 20px */
--s2m-mc-button-large-block-padding    /* Default: 10px */
--s2m-mc-button-large-inline-padding   /* Default: 20px */
--s2m-mc-button-small-block-padding    /* Default: 2.5px */
--s2m-mc-button-small-inline-padding   /* Default: 10px */
--s2m-mc-button-primary-bg         /* Default: same as accent color */
--s2m-mc-button-primary-text       /* Default: #ffffff or #000000 (auto-calculated for contrast) */
--s2m-mc-button-primary-hover-bg   /* Default: accent color lightened 5% */
--s2m-mc-button-secondary-bg       /* Default: #1e1e1e */
--s2m-mc-button-secondary-text     /* Default: #ffffff */
--s2m-mc-button-secondary-hover-bg /* Default: #1e1e1e lightened 5% */
--s2m-mc-button-tertiary-bg        /* Default: same as bg-color */
--s2m-mc-button-tertiary-text      /* Default: same as text-color */
--s2m-mc-button-tertiary-border-color  /* Default: card border darkened 10% */
--s2m-mc-button-tertiary-hover-bg  /* Default: bg-color darkened 5% */
--s2m-mc-modal-bg                  /* Default: same as bg-color */
--s2m-mc-modal-border-radius       /* Default: same as card-border-radius */
--s2m-mc-modal-overlay-bg          /* Default: rgba(15, 23, 42, 0.45) */

Common Customization Examples​

CSS variable overrides (.s2m-mc-root blocks) work in both Theme Settings → Custom CSS and the app block → Custom CSS field. Direct class selectors are best placed in the app block's Custom CSS field, where they're scoped to that section.

Variable overrides (global or page-specific)​

Match your brand's accent color

.s2m-mc-root {
  --s2m-mc-accent-color: #2d5fff;
}

This single change updates primary buttons, links, focus rings, selected card outlines, and the upsell discount banner. The primary button text color adjusts automatically for contrast.

Larger product images

.s2m-mc-root {
  --s2m-mc-product-image-height: 200px;
}

Custom font and text sizing

.s2m-mc-root {
  --s2m-mc-font-family: "Georgia", serif;
  --s2m-mc-heading-font-size: 26px;
  --s2m-mc-body-font-size: 16px;
}

Wider layout with more sidebar space

.s2m-mc-root {
  --s2m-mc-page-width: 1200px;
  --s2m-mc-sidebar-width: 36%;
  --s2m-mc-layout-gap: 32px;
}

Rounded design

.s2m-mc-root {
  --s2m-mc-button-border-radius: 24px;
  --s2m-mc-input-border-radius: 12px;
  --s2m-mc-card-border-radius: 24px;
}

Sticky sidebar with a theme header

If your theme has a sticky header that overlaps the sidebar, set --s2m-mc-sticky-header-bottom to the header's height:

.s2m-mc-root {
  --s2m-mc-sticky-header-bottom: 80px;
}

Class selector overrides (app block Custom CSS)​

For element-level changes that CSS variables don't cover, use direct class selectors in the app block's Custom CSS field. Checkout classes all start with s2m-mc-.

Change product image fit

s2m-product-card .s2m-mc-product-card__inner img {
  object-fit: contain;
  height: 200px;
}

Add extra padding to recipient cards

.s2m-mc-card-primary {
  padding: 24px 28px;
}

Hide the section title

.s2m-mc-section-title {
  display: none;
}

Migrating from v1 to v2​

If you're switching from the original multi-recipient checkout to the v2 multi-recipient cart, your existing CSS customizations won't carry over automatically. The v2 checkout uses a different variable prefix, scoping model, and structure.

What changed​

Variable prefix: All variables changed from --s2m-checkout-* to --s2m-mc-*. For example, --s2m-checkout-button-primary-bg-color is now --s2m-mc-button-primary-bg.

Scoping: V1 variables were set on :root. V2 variables are scoped to .s2m-mc-root. Setting v2 variables on :root won't work because the component-scoped defaults take priority.

Accent color: V2 introduces --s2m-mc-accent-color, which drives primary buttons, links, focus rings, and selected card outlines from a single value. In v1, each of those was a separate variable.

Tertiary buttons: V2 adds a third button tier (--s2m-mc-button-tertiary-*) that didn't exist in v1.

Derived values: Many v2 defaults are computed from a small number of base values. The heading font size generates H1, H3, H6, body, and caption sizes. The accent color generates link colors and hover states. The background color generates input backgrounds and secondary card backgrounds. This means fewer variables to override for a consistent look.

Removed variables: The following v1 variable categories have no direct equivalent in v2:

  • Product thumbnails (--s2m-checkout-product-thumbnail-*): V2 product cards use a simpler image layout.
  • Product price/weight styling: V2 product cards inherit from the base typography variables.
  • Address input width constraints (--s2m-checkout-address-input-min-width, --s2m-checkout-address-input-max-width): V2 address inputs are full-width by default.
  • Modal width/height constraints (--s2m-checkout-modal-content-max-width, etc.): V2 modals use the popover system with responsive sizing.
  • Upsell discount banner colors: V2 derives these from the accent color automatically.
  • Card option selected/hover states: V2 uses the accent color for selected states.

Migration steps​

  1. Find your existing v1 CSS. Look in Theme Settings → Custom CSS (:root block) and in the v1 app block's Custom CSS field.

  2. Map your overrides to v2 variables. Use this reference for the most common ones:

    V1 variableV2 equivalent
    --s2m-checkout-width--s2m-mc-page-width
    --s2m-checkout-bg-color--s2m-mc-bg-color
    --s2m-checkout-block-padding--s2m-mc-block-padding
    --s2m-checkout-font-family--s2m-mc-font-family
    --s2m-checkout-text-color--s2m-mc-text-color
    --s2m-checkout-heading-color--s2m-mc-header-text-color
    --s2m-checkout-heading-1-font-size--s2m-mc-heading-1-font-size
    --s2m-checkout-heading-2-font-size--s2m-mc-heading-font-size
    --s2m-checkout-error-text-color--s2m-mc-error-color
    --s2m-checkout-card-primary-border-radius--s2m-mc-card-border-radius
    --s2m-checkout-card-primary-border-color--s2m-mc-card-border-color
    --s2m-checkout-card-primary-bg-color--s2m-mc-card-bg
    --s2m-checkout-card-padding--s2m-mc-card-padding
    --s2m-checkout-card-product-image-height--s2m-mc-product-image-height
    --s2m-checkout-card-product-title-font-size--s2m-mc-product-title-font-size
    --s2m-checkout-input-border-color--s2m-mc-input-border-color
    --s2m-checkout-input-border-radius--s2m-mc-input-border-radius
    --s2m-checkout-input-bg-color--s2m-mc-input-bg
    --s2m-checkout-input-focus-border-color--s2m-mc-input-focus-color
    --s2m-checkout-button-primary-bg-color--s2m-mc-button-primary-bg
    --s2m-checkout-button-primary-text-color--s2m-mc-button-primary-text
    --s2m-checkout-button-primary-hover-bg-color--s2m-mc-button-primary-hover-bg
    --s2m-checkout-button-secondary-bg-color--s2m-mc-button-secondary-bg
    --s2m-checkout-button-border-radius--s2m-mc-button-border-radius
    --s2m-checkout-modal-overlay-bg-color--s2m-mc-modal-overlay-bg
    --s2m-checkout-modal-content-bg-color--s2m-mc-modal-bg
    --s2m-checkout-modal-content-border-radius--s2m-mc-modal-border-radius

  3. Wrap your overrides in .s2m-mc-root instead of :root:

    /* Before (v1) */
    :root {
      --s2m-checkout-button-primary-bg-color: #2d5fff;
    }

    /* After (v2) */
    .s2m-mc-root {
      --s2m-mc-button-primary-bg: #2d5fff;
    }

  4. Migrate any class-based overrides. If your v1 Custom CSS targeted .s2m-checkout-* classes, the v2 equivalent classes use s2m-mc-* names. Move these to the app block's Custom CSS field using direct selectors. For example:

    /* Before (v1) */
    .s2m-checkout-card-product-image {
      height: 300px;
    }

    /* After (v2) — in app block Custom CSS */
    s2m-product-card .s2m-mc-product-card__inner img {
      height: 300px;
    }

  5. Consider using the accent color. If your v1 CSS set the same brand color on primary buttons, focus rings, and selected cards individually, you can replace all of those with a single --s2m-mc-accent-color override in v2.

  6. Remove your v1 overrides once you've confirmed the v2 styling looks correct. Leftover v1 variables won't cause errors, but they add unnecessary CSS.

Need More Help?​

For advanced customization beyond CSS variables, or if you need help identifying the right variable for a specific element, contact our support team at help@evenbetterapps.com.

Last updated on