CSS Styling

Customize Share Cart's appearance using CSS. All elements are namespaced under .mmc-share-cart to avoid conflicts with your theme.

How to Add Custom CSS

The easiest way is to use the Custom CSS field in the Appearance section of the app. CSS entered there is applied directly to the share button area and takes precedence over the app's default styles.

Alternatively, you can add CSS to your theme's stylesheet via Online Store → Themes → Edit code → assets/theme.css.

CSS Class Reference

Namespace

Class	Description
`.mmc-share-cart`	Top-level namespace class present on all app elements. Do not target this class directly — use it as a prefix only.

Class	Description
`.mmc-share-cart__wrap`	Container div that wraps the share button. Controls alignment (flex layout).
`.mmc-share-cart .mmc-share-link`	The share button element itself (icon + label).
`.mmc-share-cart .mmc-share-link a`	The anchor/text label inside the button.
`.mmc-share-cart .mmc-share-link__icon`	The SVG upload icon inside the button.

Example — custom share button styles:

/* Change button color and add padding */
.mmc-share-cart .mmc-share-link {
  color: #e63946;
  padding: 12px 20px;
}

/* Style the label text */
.mmc-share-cart .mmc-share-link a {
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Size the icon */
.mmc-share-cart .mmc-share-link__icon {
  width: 20px;
  height: 20px;
}

Example — outlined button style:

.mmc-share-cart .mmc-share-link {
  border: 2px solid currentColor;
  border-radius: 4px;
}

Example — pill button style:

.mmc-share-cart .mmc-share-link {
  border: 2px solid currentColor;
  border-radius: 100px;
  padding: 10px 20px;
}

Class	Description
`.mmc-share-cart.mmc-modal`	The native `<dialog>` element. Controls max-width, positioning, etc.
`.mmc-share-cart.mmc-modal::backdrop`	Semi-transparent overlay behind the dialog.
`.mmc-share-cart .mmc-modal-body`	The white content box inside the dialog. Controls background color, padding, border-radius.
`.mmc-share-cart .mmc-modal-title`	The title text at the top of the dialog.
`.mmc-share-cart .mmc-modal-close`	The × close button in the top-right corner.

Example — rounded dialog with custom background:

.mmc-share-cart .mmc-modal-body {
  border-radius: 16px;
  background-color: #1a1a2e;
  color: #ffffff;
}

.mmc-share-cart .mmc-modal-title {
  font-size: 22px;
  font-weight: 700;
}

.mmc-share-cart.mmc-modal::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

Link Input & Copy Button

Class	Description
`.mmc-share-cart .mmc-input-group`	Flex container holding the URL input and copy button.
`.mmc-share-cart .mmc-input`	The read-only URL input field.
`.mmc-share-cart .mmc-input.mmc-input-centered`	Applied when "Code Only" display format is selected — centers the text.
`.mmc-share-cart .mmc-button`	The copy-to-clipboard button.

Example:

.mmc-share-cart .mmc-input {
  border-radius: 4px;
  border-color: #ccc;
  font-size: 13px;
}

.mmc-share-cart .mmc-button {
  border-radius: 4px;
}

Class	Description
`.mmc-share-cart .mmc-divider`	Horizontal rule separating sections in the dialog.
`.mmc-share-cart .mmc-social-links`	Container for the social sharing icons (Facebook, WhatsApp, etc.).

Example:

.mmc-share-cart .mmc-social-links {
  justify-content: center;
  gap: 16px;
}

.mmc-share-cart .mmc-social-links svg {
  width: 28px;
  height: 28px;
  opacity: 0.8;
}

.mmc-share-cart .mmc-social-links svg:hover {
  opacity: 1;
}

Note Fields

Class	Description
`.mmc-share-cart .mmc-share-cart-note-table`	Table wrapping the note input row(s).
`.mmc-share-cart .mmc-share-cart-note-table-label-td`	Table cell containing the note label.
`.mmc-share-cart .mmc-share-cart-note-table-text-td`	Table cell containing the note input.
`.mmc-share-cart .mmc-share-cart-note-input`	The note text input field.

Restore Cart Dialog

Shown when a visitor opens a shared cart link and already has items in their cart.

Class	Description
`.mmc-share-cart.mmc-restore-dialog`	The restore cart `<dialog>` element.
`.mmc-share-cart .mmc-restore-dialog-header`	Header area with title and message.
`.mmc-share-cart .mmc-restore-dialog-content`	Scrollable content area with the options.
`.mmc-share-cart .mmc-restore-dialog-options`	Container for the restore option cards.
`.mmc-share-cart .mmc-restore-dialog-option`	Individual option card (Replace / Merge / Add Missing).
`.mmc-share-cart .mmc-restore-dialog-option-content`	Text content inside an option card.
`.mmc-share-cart .mmc-restore-dialog-footer`	Footer with Cancel and Proceed buttons.
`.mmc-share-cart .mmc-restore-dialog-cancel`	The Cancel button.
`.mmc-share-cart .mmc-restore-dialog-proceed`	The Proceed button.

Restore Cart Spinner

Shown while the cart is being restored.

Class	Description
`.mmc-share-cart.mmc-restore-spinner`	The spinner `<dialog>` element.
`.mmc-share-cart .mmc-restore-spinner-content`	Content wrapper with spinner, title, and message.
`.mmc-share-cart .mmc-spinner`	The animated circular spinner.

Tips

Always prefix your selectors with the relevant .mmc-share-cart .mmc-* pattern to keep specificity consistent.
The Appearance page in the app sets base styles (color, font size, position). Custom CSS entered there is injected after those base styles, so it will override them.
Test on both mobile and desktop — the dialog uses width: 90% with a max-width cap.

How to Add Custom CSS​

CSS Class Reference​

Namespace​

Share Button​

Share Dialog​

Link Input & Copy Button​

Social Sharing Icons​

Note Fields​

Restore Cart Dialog​

Restore Cart Spinner​

Tips​