Want the label bold, bigger, red, or uppercase — or a smaller comment box or repositioned calendar icon? Built-in options come first; anything finer is a quick line of CSS.
- Start with the built-in Styles. The Styles tab controls colors and text — label color, button colors, error-message color, calendar colors, and the widget’s text labels (Select Date, Placeholder, Timeslot, Error Message, Comment box, and more). Set what you can here first.
- For finer control, add custom CSS targeting the widget’s classes. The label, for example, uses the class
.dds-label-text— to make it bold:.dds-label-text { font-weight: bold; }
You can stack more lines for other elements (uppercase text, a smaller comment box, moving the calendar icon). - Put the CSS in the right place. Add it to a new custom file included in
theme.liquid— never inside the app’s own files. Edits to our files are overwritten on update and aren’t supported; if changes are made there and something breaks, it’s outside our scope to fix.
Heads-up: the comment box keeps a drag handle, so even when resized smaller a customer can still enlarge it. And in a tight cart drawer, some elements may shift on small screens due to limited space.
If still stuck: Tell us the exact element and the look you want, and we’ll share the class and a CSS snippet — reach us at support.