Skip to main content

Customize Multi-Recipient Checkout with CSS

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

Send To Many's multi-recipient checkout can be fully customized to match your store's look and feel. The most frequently used options are available as app block settings in the theme editor. For more control, over 100 CSS variables cover layout, typography, product cards, inputs, buttons, and other elements. Set any of these variables to override the defaults without touching app code.

Two Customization Methods​

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

If your store uses Send To Many on multiple pages, 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.

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

If you want to style a single page differently (or you only use the checkout on one page), add custom CSS directly inside the app block's settings.

  1. In the 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 is especially useful when you have multiple checkout configurations and want each page to look different.

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.

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;
}

All Available CSS Variables​

Set or override any of the following variables in 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

Volume 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

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