Custom CSS

Uisce gives you two places to add your own CSS: a global field in theme settings (applies everywhere) and per-section fields on individual sections (applies only to that section).

This page is for merchants who already know some CSS. If you're not familiar with CSS, you can skip this — everything else in the theme works without it.

What it looks like

Here's the custom CSS field alongside a live preview. Edit the CSS in the left panel and watch the "After" button update in real time.

←Custom CSS

Custom CSS

.button--primary { border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; }

Applies to every page in your store. Try editing the CSS to see the preview change.

Live CSS preview

Before

After

Where to add CSS

Global custom CSS — Go to Theme settings > Custom CSS. Anything you type here applies to every page.

Per-section custom CSS — Many sections have their own Custom CSS field in their settings. CSS you add there only affects that section, nothing else.

Examples

Make buttons rounded:

.button--primary {
  border-radius: 999px;
}

Make product titles uppercase:

.product-card__title {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

Limit logo width:

.header__logo img {
  max-width: 100px;
}

Tips

• Be specific. Use the section's class names rather than broad selectors. Targeting .product-card__title is safer than targeting every h2.
• Test on mobile. Open the responsive preview in the theme editor before saving.
• Use CSS custom properties when possible. Uisce defines variables like --color-background and --color-text that automatically respect the active color scheme.

WARNING

Custom CSS survives theme updates, but the class names it targets might change. If you add extensive custom CSS, test it after each theme update.