Custom CSS

You have two places to add your own CSS: a global field in Uisce's theme settings (applies everywhere) and the Shopify editor's per-section Custom CSS box, available on every section (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 { 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 — Every section has a Custom CSS box, provided by the Shopify theme editor at the bottom of the section's settings. CSS you add there only affects that section, nothing else.

Examples

Make buttons rounded:

.button {
  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-foreground 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.