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 settings.
Depending on where you’ve added the Send To Many app block, you can set variables or override classes in these 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.
Steps
Go to Online Store → Themes → Customize
Open Theme Settings → Custom CSS
Add any desired variables and your settings to an existing or new :root block
:root {
--s2m-checkout-card-product-image-height: 300px;
}Click Save and preview any page containing the Send To Many checkout
This change affects all pages using the Send To Many block.
Note that you can add as many variables as you like to the custom CSS:
:root {
--s2m-checkout-card-product-image-height: 300px;
--s2m-checkout-card-product-title-font-size: 18px;
--s2m-checkout-button-primary-bg-color: #1a1a1a;
}
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.
Steps
In the Shopify theme editor, open the page where the Send To Many block is installed
Select the Send To Many App wrapper block
Scroll to Custom CSS, add code to override any classes and save.
.s2m-checkout-card-product-image
{
height: 300px;
}
This change only affects that specific page or template.
✅ Tip:
If you want to experiment, open your browser’s Developer Tools → Elements → Styles, and adjust variables live under the :root or .s2m-checkout-wrapper selectors to preview your changes instantly.
Available CSS variables
You can set or override any of the following variables:
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
Modal
--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