Customising the DonateMate Widget with CSS

Customising the DonateMate Widget with CSS

Want to make the donation widget match your store's branding? You can customise colours, fonts, button styles, spacing and more with CSS. Here's how.

Option 1: Use the Built-in Style Settings (No Coding)

Before reaching for CSS, check the built-in style settings in the Theme Customizer — these cover most common tweaks without any code:

1. Go to Shopify Admin → Online Store → Themes → Customize
2. Navigate to the page where your DonateMate widget is placed
3. Click on the DonateMate app block in the sidebar
4. You'll see style options including button colour, text colour, and border radius

If the built-in options don't give you what you need, read on for CSS customisation.

Option 2: Add Custom CSS via the Theme Customizer

Most Shopify themes let you add custom CSS directly:

1. Go to Shopify Admin → Online Store → Themes → Customize
2. Click the ⚙️ Theme settings icon at the bottom of the left sidebar
3. Scroll down to Custom CSS
4. Paste your CSS rules there
5. Click Save

Common CSS Customisations

Here are the most frequently requested style tweaks with working CSS snippets:

Change the Add to Cart Button Colour

.donatemate-app-wrapper #donatemateAtc {
  background-color: #your-colour-here !important;
  border-color: #your-colour-here !important;
  color: #ffffff !important;
}

Change the Preset Amount Button Style

/* Unselected preset buttons */
.donatemate-app-wrapper .dm-donation-value-button {
  border: 2px solid #your-colour-here !important;
  color: #your-colour-here !important;
  background: transparent !important;
}

/* Selected/active preset button */
.donatemate-app-wrapper .dm-donation-value-button.active {
  background-color: #your-colour-here !important;
  color: #ffffff !important;
}

Change the Widget Background Colour

.donatemate-app-wrapper {
  background-color: #f5f5f5 !important;
  border-radius: 8px !important;
  padding: 20px !important;
}

Change the Widget Font

.donatemate-app-wrapper,
.donatemate-app-wrapper * {
  font-family: 'Your Font Name', sans-serif !important;
}

Hide the Widget Description

.donatemate-app-wrapper .donatemate-text {
  display: none !important;
}

Change the Custom Amount Input Field Style

.donatemate-app-wrapper .donatemate-container input {
  border: 2px solid #your-colour-here !important;
  border-radius: 4px !important;
}

Finding the Right CSS Selectors

If the snippets above don't quite work for your theme setup, you can inspect the widget's HTML to find the right selectors:

1. Visit your store page where the DonateMate widget appears
2. Right-click on the element you want to style → Inspect
3. Find the CSS class or ID for that element in the browser DevTools
4. Write your CSS rule targeting that class

Tip: DonateMate widget elements are wrapped in .donatemate-app-wrapper , so scope all your rules inside that to avoid affecting other parts of your theme.

CSS Not Working?

If your CSS isn't applying, try these fixes:

• Add !important — theme styles are often highly specific, so your custom CSS may get overridden without it
• Check specificity — more specific selectors win. Try adding the parent wrapper: .donatemate-app-wrapper .your-element
• Hard refresh the page — your browser may be caching the old styles (Cmd+Shift+R  on Mac, Ctrl+Shift+R  on Windows)
• Check the CSS location — make sure your CSS is in the right place (Theme Settings → Custom CSS, not in a JS file)

Still stuck? Flick Ben a message with your store URL and a screenshot of what you're trying to achieve — happy to help. 🎨