Styling Error Messages with CSS
Want to change the size, color, or style of DC Order Limits error messages? You can use custom CSS in your Shopify theme.When to use this
Use custom CSS when you want to:
- Make error messages larger or more visible
- Change the font size, color, or weight
- Match error messages to your theme's style
- Add borders, backgrounds, or icons
Note: This only affects messages on product pages, cart pages, and cart drawers. Checkout page messages are controlled by Shopify and cannot be styled with custom CSS.
CSS class reference
DC Order Limits uses two notification styles: corner alerts and modal dialogs. Here are the CSS classes you can target:
Corner notification classes
| Class | Element |
|---|---|
.dash-corner-alert |
Main notification container |
.dash-alert-content |
Inner content wrapper |
.dash-alert-message |
The error text |
.dash-alert-close |
Dismiss button |
Modal dialog classes
| Class | Element |
|---|---|
.dash-modal-overlay |
Full-screen backdrop |
.dash-modal-content |
Modal box container |
.dash-modal-header |
Header area |
.dash-modal-title |
Title text |
.dash-modal-close |
X close button |
.dash-modal-body |
Message content area |
.dash-modal-message |
The error text |
.dash-modal-footer |
Footer with OK button |
.dash-modal-ok |
OK button |
Adding custom CSS to your theme
Option 1: Theme settings (recommended)
- In Shopify admin, go to Online Store then Themes
- Click Customize on your active theme
- Click Theme Settings (gear icon in the sidebar)
- Look for Custom CSS (location varies by theme)
- Paste your CSS code and save
Option 2: Edit theme code
- In Shopify admin, go to Online Store then Themes
- Click Actions then Edit code
- Find your theme's main CSS file (usually base.css, theme.css, or similar in the Assets folder)
- Add your CSS at the end of the file
- Save
CSS examples
Style corner notifications as a warning box
.dash-corner-alert {
background: #fff4e5 !important;
border: 2px solid #d9534f !important;
border-radius: 8px !important;
padding: 16px !important;
}
.dash-alert-message {
color: #7a2e2e !important;
font-size: 15px !important;
font-weight: 600 !important;
}Make corner notifications larger
.dash-corner-alert {
max-width: 400px !important;
}
.dash-alert-message {
font-size: 16px !important;
line-height: 1.5 !important;
}Style modal dialogs
.dash-modal-content {
border-radius: 12px !important;
max-width: 500px !important;
}
.dash-modal-title {
color: #c00 !important;
font-size: 20px !important;
}
.dash-modal-message {
font-size: 16px !important;
}Troubleshooting
My CSS changes are not showing
- Clear your browser cache and reload the page
- Check for typos in the CSS class names
- Add !important to override existing styles
- Inspect the element in your browser developer tools to confirm the class name
Changes show on cart page but not cart drawer
Both the cart page and cart drawer use the same CSS classes. If styles appear on one but not the other, check that your theme loads the custom CSS on both pages.
Related articles
- Customizing and Translating Error Messages - Change the text and wording
- Setting up error messages for DC Order Limits - Configure where messages appear