Skip to main content

Customize Multi-Recipient Checkout with CSS Variables

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

Send To Many's multi-recipient checkout can be fully customized to fit the look and feel of your website and checkout experience. The most frequently used options are available as app block settings in the theme editor.

And if you need even more control, we've set up over 100 CSS variables for layout, typography, product cards, inputs, buttons, and other elements. You can set any of these variables to override the defaults without touching any app code.

Two Customization Methods​

Depending on where you've added the Send To Many app block, you can set variables or override classes in two ways.

Option 1: Global changes (Theme Settings → Custom CSS)​

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

  1. Go to Online Store → Themes → Customize.
  2. Open Theme Settings → Custom CSS.
  3. Add your variables inside a :root block: 
    :root {
      --s2m-checkout-card-product-image-height: 300px;
      --s2m-checkout-card-product-title-font-size: 18px;
      --s2m-checkout-button-primary-bg-color: #1a1a1a;
    }
  4. Click Save and preview any page containing the checkout.

This change affects all pages using the Send To Many block.

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

If your store only uses the Send To Many block on one page, or you want to style a single page differently, add your custom CSS directly inside that block's settings.

  1. In the Shopify theme editor, open the page where the Send To Many block is installed.
  2. Select the Send To Many App wrapper block in the section list.
  3. Scroll to Custom CSS and add your overrides: 
    .s2m-checkout-card-product-image {
      height: 300px;
    }
  4. Click Save.

This change only affects that specific page or template.

Preview changes live

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

Available CSS Variables​

You can set or override any of the following variables. Add them to a :root block in your theme's Custom CSS or in the app block's Custom CSS field.

Layout​

--s2m-checkout-width
--s2m-checkout-bg-color
--s2m-checkout-block-padding
--s2m-checkout-inline-padding

Typography​

--s2m-checkout-font-family
--s2m-checkout-text-color
--s2m-checkout-font-size
--s2m-checkout-caption-font-size
--s2m-checkout-text-color-muted
--s2m-checkout-error-text-color
--s2m-checkout-heading-color
--s2m-checkout-heading-1-font-size
--s2m-checkout-heading-2-font-size
--s2m-checkout-heading-font-weight
--s2m-checkout-subtitle-color
--s2m-checkout-subtitle-font-size
--s2m-checkout-subtitle-font-weight

Cards​

--s2m-checkout-card-padding
--s2m-checkout-card-padding-mobile
--s2m-checkout-card-primary-border-radius
--s2m-checkout-card-primary-border-color
--s2m-checkout-card-primary-bg-color
--s2m-checkout-card-secondary-border-radius
--s2m-checkout-card-secondary-border-color
--s2m-checkout-card-secondary-bg-color
--s2m-checkout-card-selected-outline-color
--s2m-checkout-card-option-selected-bg-color
--s2m-checkout-card-option-selected-hover-bg-color
--s2m-checkout-card-option-hover-bg-color

Product Cards​

--s2m-checkout-card-products-max-height
--s2m-checkout-card-products-gap
--s2m-checkout-card-product-width
--s2m-checkout-card-product-image-height
--s2m-checkout-card-product-image-object-fit
--s2m-checkout-card-product-title-font-size
--s2m-checkout-card-product-title-font-weight
--s2m-checkout-card-product-title-color
--s2m-checkout-card-product-description-font-size
--s2m-checkout-card-product-description-font-weight
--s2m-checkout-card-product-description-color
--s2m-checkout-card-product-price-font-size
--s2m-checkout-card-product-price-font-weight
--s2m-checkout-card-product-price-color

Product Thumbnails​

--s2m-checkout-product-thumbnail-width
--s2m-checkout-product-thumbnail-height
--s2m-checkout-product-thumbnail-border-radius
--s2m-checkout-product-thumbnail-large-width
--s2m-checkout-product-thumbnail-large-height
--s2m-checkout-product-thumbnail-large-border-radius
--s2m-checkout-product-thumbnail-object-fit

Form Input Fields​

--s2m-checkout-label-font-size
--s2m-checkout-label-color
--s2m-checkout-label-font-weight
--s2m-checkout-input-font-size
--s2m-checkout-input-border-color
--s2m-checkout-input-border-width
--s2m-checkout-input-border-radius
--s2m-checkout-input-bg-color
--s2m-checkout-input-text-color
--s2m-checkout-input-focus-border-color
--s2m-checkout-input-focus-bg-color
--s2m-checkout-input-padding-inline
--s2m-checkout-input-padding-block
--s2m-checkout-input-min-width
--s2m-checkout-input-max-width
--s2m-checkout-address-input-min-width
--s2m-checkout-address-input-max-width
--s2m-checkout-address-input-dropdown-max-height
--s2m-checkout-address-input-dropdown-z-index
--s2m-checkout-input-error-message-font-size
--s2m-checkout-form-gap

Buttons​

--s2m-checkout-button-font-size
--s2m-checkout-button-large-font-size
--s2m-checkout-button-small-font-size
--s2m-checkout-button-extra-small-font-size
--s2m-checkout-button-line-height
--s2m-checkout-button-font-weight
--s2m-checkout-button-border-radius
--s2m-checkout-button-inline-padding
--s2m-checkout-button-block-padding
--s2m-checkout-button-large-inline-padding
--s2m-checkout-button-large-block-padding
--s2m-checkout-button-small-inline-padding
--s2m-checkout-button-small-block-padding
--s2m-checkout-button-primary-bg-color
--s2m-checkout-button-primary-text-color
--s2m-checkout-button-primary-hover-bg-color
--s2m-checkout-button-primary-hover-text-color
--s2m-checkout-button-primary-border-color
--s2m-checkout-button-primary-hover-border-color
--s2m-checkout-button-secondary-bg-color
--s2m-checkout-button-secondary-text-color
--s2m-checkout-button-secondary-hover-bg-color
--s2m-checkout-button-secondary-hover-text-color
--s2m-checkout-button-secondary-border-color
--s2m-checkout-button-secondary-hover-border-color
--s2m-checkout-modal-overlay-bg-color
--s2m-checkout-modal-content-bg-color
--s2m-checkout-modal-content-border-radius
--s2m-checkout-modal-content-padding
--s2m-checkout-modal-content-padding-mobile
--s2m-checkout-modal-content-box-shadow
--s2m-checkout-modal-content-z-index
--s2m-checkout-modal-content-max-width
--s2m-checkout-modal-content-max-height
--s2m-checkout-product-modal-width
--s2m-checkout-address-modal-width

Upsell Discounts​

--s2m-checkout-upsell-discount-applied-banner-bg-color
--s2m-checkout-upsell-discount-applied-banner-text-color
--s2m-checkout-upsell-discount-applied-banner-border-color

Common Customization Examples​

Match your brand colors

:root {
  --s2m-checkout-button-primary-bg-color: #2d5fff;
  --s2m-checkout-button-primary-hover-bg-color: #1a4bdd;
  --s2m-checkout-card-selected-outline-color: #2d5fff;
  --s2m-checkout-input-focus-border-color: #2d5fff;
}

Larger product images

:root {
  --s2m-checkout-card-product-image-height: 300px;
  --s2m-checkout-card-product-width: 250px;
}

Custom font and text sizing

:root {
  --s2m-checkout-font-family: "Georgia", serif;
  --s2m-checkout-font-size: 16px;
  --s2m-checkout-heading-1-font-size: 28px;
  --s2m-checkout-heading-2-font-size: 20px;
}

Wider checkout form

:root {
  --s2m-checkout-width: 900px;
  --s2m-checkout-block-padding: 40px;
  --s2m-checkout-inline-padding: 40px;
}

Rounded design

:root {
  --s2m-checkout-button-border-radius: 24px;
  --s2m-checkout-input-border-radius: 12px;
  --s2m-checkout-card-primary-border-radius: 16px;
  --s2m-checkout-card-secondary-border-radius: 12px;
}

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