Uisce

The flagship preset. Uisce is now tuned for premium Irish coastal service commerce: home design, renovation, interiors, studios, and other consultation-led merchants that need a screenshot-ready Theme Store presence.

Who it's for

Premium service businesses, design practices, renovation studios, consultants, and project-led merchants. Uisce works best when the merchant sells trust, taste, process, and transformation rather than a simple retail catalogue.

The vibe

Coastal editorial commerce. Uisce uses Atlantic ink, misted surfaces, warm stone, sea-glass accents, strong image crops, glass-like borders, and narrow waterline dividers. It should feel like an architecture magazine with a Shopify checkout attached: calm, premium, and distinctive without gimmicky wave graphics.

Color schemes

Uisce includes four color schemes. You can use any of them on any section, and edit the colors at any time.

Scheme 1 — Light

Heading text

Body text sample

Button

Scheme 2 — Dark

Heading text

Body text sample

Button

Scheme 3 — Accent

Heading text

Body text sample

Button

Scheme 4 — Bold

Heading text

Body text sample

Button

Font pairing

Role	Font	Weight
Headings	Assistant	Bold (700)
Body	Assistant	Regular (400)

Using the same font for headings and body keeps the preset controlled and highly readable. The visual distinction comes from scale, crop rhythm, metadata hierarchy, waterline dividers, and service-commerce composition rather than decorative type tricks.

Recommended sections

These sections define the Uisce flagship journey:

• Slideshow or banner - Image-led editorial hero with transparent/glass header treatment
• Announcement bar - signal strip with badge, message, icons, and an optional countdown; demo content uses numbered intake stages (01 Brief, 02 Callback, 03 Launch)
• Service packages - Consultancy-style service cards with inclusions, turnaround, and quote CTAs
• Before/after - Transformation proof as a core visual spine
• Featured collection - Editorial card rhythm for services sold as products
• Featured product - A service-detail preview with booking-style hierarchy
• Trust badges - Reassurance placed as part of the commerce journey
• Process steps - Numbered transformation flow for consultation-led conversion

Catalog size

Best for small to mid-size service catalogues, from a few high-value packages to a larger studio/service menu. Collection pages use a curated discovery rhythm with a wider first card and alternating crop ratios so the grid feels composed rather than dumped.

Art-direction rules

• Product cards use editorial crops, translucent metadata bands, waterline dividers, and designed badges.
• Announcement bar uses a badge, message, and icons on a single line; demo content shows numbered service-intake stages, proof metadata, a countdown on the closing message, and a mobile-first touch-safe dismiss control. The whole strip is clickable when the message carries a link.
• Header/navigation uses glass overlay, waterline hover states, compact icon affordances, and transparent-to-sticky behavior.
• Product pages pair a large media gallery with a consultancy booking panel.
• Cart drawer is treated as a finished screenshot surface with polished line items, strong checkout CTA hierarchy, and premium empty state.
• Visual changes live in durable component CSS and preset tokens, not pasted generated code.

Live demo — Uisce preset homepage

---

Target merchant profile

Celtic for "water" — Uisce is the premium services preset for Shopify merchants offering residential cleaning, tradespeople services, professional services, and appointments-based businesses. The coastal-glass visual signature — glass header chrome, sea-glass accents, and fine waterline rules — signals calm professionalism, trust, and flow, ideal for merchants competing against Squarespace/Wix service sites on Shopify.

Uisce serves merchants who:

• Sell services by appointment (cleaning, plumbing, electrical, consulting, grooming, tutoring)
• Have a portfolio of completed work or case studies
• Offer tiered service packages with different price points
• Collect service enquiries or booking requests via a form

Small-to-medium service businesses: 1–30 staff, appointment-driven, location-based service area, typically €50–500 per job. Common on Shopify as "service products" (selling a service SKU, then fulfilling offline), or as a simple booking-enquiry flow via the Booking form section.

Visual signature details

The Uisce preset loads assets/preset-uisce.css automatically when settings.preset is set to uisce in Online Store → Themes → Customize → Theme settings → Preset. This CSS applies:

• A soft mist wash down the top of the page, easing into your background colour (an ultra-subtle lift in dark mode, so the page reads as one surface)
• A coastal blue/teal accent palette complementing the base color scheme, including a sea-glass button colour in dark mode
• A deep navy image wash behind slideshow and banner sections, so hero text stays legible over any photograph

You do not need to configure the visual signature; it activates from the preset setting.

Header signature — glass service-commerce chrome

The header (a shared component across all presets) wears Uisce's coastal-water signature, loaded from assets/uisce-visual.css:

• Glass bar — a translucent, blur-backed chrome (backdrop-filter: blur(18px)) over your background colour. On the homepage with transparent header enabled it floats over the hero on a navy scrim; on scroll and on inner pages it settles to a solid glass bar with a soft drop shadow.
• Sea-glass waterline underline — each nav link reveals a 2px coastal gradient underline on hover and on the current page, and dropdown parents reveal theirs while the menu holds keyboard focus. It scales in flat from the centre (scaleX) — a calm, level line, not a sweep or a rise. This replaces the generic primary-blue underline of a stock theme.
• Bordered icon affordances — the account, search, menu, dark-toggle, and cart controls sit as bare glyphs at rest and, on hover or keyboard focus, take the shared sea-glass wash inside a soft pill border (a compact, tactile "glass chip" that never shows a heavy fill). The wash follows your colour scheme, so all five controls match.
• Navy cart badge — the item-count bubble is brand navy with light digits.
• Mist-gradient mobile drawer — the hamburger panel opens onto a mist → transparent surface with a soft border, carrying the nav, the country/language selector, and the theme toggle.

The signature is decoration only — colour, border, blur, and the underline animation. It adds no menus; your navigation comes from your Shopify menu. It is right-to-left safe (logical properties throughout) and reduced-motion safe (the underline appears instantly, without animating, for visitors who request reduced motion). See the Header guide for the live demo.

Booking form section (sections/booking-cta.liquid)

A service-booking enquiry form with a consent checkbox, a live booking summary, and service selection. This is the primary conversion surface for service merchants.

What it does

• On desktop the form fieldsets run down the wide left column and a frosted booking summary sits in the right rail, sticking to the top of the viewport as the customer scrolls. Below 990px everything stacks into one column.
• Fieldsets, in order: Select a service (a dropdown built from your Service blocks), Your details (Full name, Email address, Phone number), Preferred date (Preferred date, Additional notes), and Your consent.
• Full name, Email address, Service, and the consent checkbox are required; the submit button stays disabled until consent is ticked.
• The booking summary shows the selected service, its deposit amount, your deposit note, and your trust points, then the submit button. It updates the moment a service is chosen.
• The deposit amount comes straight from the Service block — the theme formats it in your store currency and prints it. There is no percentage calculation and no payment is taken here.

Schema settings

Setting	Type	Default	Description
color_scheme	color scheme	scheme-1	Section background color scheme
eyebrow	text	—	Small kicker line above the heading
heading	text	Request a booking	Section heading
subheading	text	—	Short line under the heading
form_action_url	URL	—	Required. Where booking requests are sent. If it is empty the form reloads the page and the request is lost.
deposit_note	text	—	Fine print under the fee in the booking summary — for example, whether the fee is credited against the project
reassurance	textarea	—	Trust points shown in the booking summary, one per line
related_article_handle	article	—	Optional. A blog post linked under the heading. The link hides itself automatically if the post is unpublished or removed.

Where to find it in the theme editor: Sections → Booking form → Section settings tab.

Configuring the form endpoint

1. Create a Netlify form, Formspree endpoint, or your own POST handler.
2. In the theme editor, select the Booking form section.
3. Paste your endpoint URL into Form action URL.
4. Add a Deposit note and Trust points if you want them in the booking summary.

The form submits as a standard POST to that URL, so the page the endpoint returns is what the customer sees next. Configure your confirmation page — and any error handling — in the service that receives the booking.

Adding service blocks

Each service block in the Booking form section defines one service the customer can select.

1. In the theme editor, click Add block → Service in the Booking form section.
2. Fill in Service handle (the value sent with the booking to identify the service, often the product handle — customers never see it), Service name (what the dropdown shows), and Deposit amount (a whole number in your store currency: 195 shows as €195).
3. Add one block per service. The dropdown lists them in block order, and a service with no deposit amount simply shows no fee.

Consent note

The consent checkbox is required, and the submit button stays disabled until it is ticked. The consent copy is intentionally booking-specific (not generic tracking consent) to comply with GDPR Article 7 — do not remove or soften the booking-purpose language. Its link points at your store's privacy policy from Settings → Policies → Privacy policy, falling back to /policies/privacy-policy if that policy is empty.

Shopify's Customer Privacy API is consulted for analytics only. A visitor who declines tracking can still send a booking — consent for the booking itself is the checkbox, and nothing else gates the submit.

Portfolio section (sections/portfolio.liquid)

A case-study gallery showcasing completed work with before/after images, a short write-up per project, and filtering by category.

What it does

• A curated grid: the first case study runs wide across both columns, the rest follow in pairs
• Each portfolio block renders: category label, project title, excerpt, before/after image pair, and an optional case-study link
• Category filter row at the top of the section — clicking a category button filters the visible case-study cards (JavaScript filter; no page reload)
• Categories are derived automatically from all blocks' category settings and deduplicated by handle, so "Kitchens", "kitchens" and " Kitchens " produce one button rather than three
• No metaobject dependency — all content is block-driven, with no cap on the number of case studies

Schema settings

Setting	Type	Default	Description
color_scheme	color scheme	scheme-1	Section background
heading	text	Selected work	Section heading
subheading	text	—	Optional introductory line
related_article_handle	article	—	Optional. A blog post linked from the heading. The link hides itself automatically if the post is unpublished.

Where to find it in the theme editor: Sections → Portfolio → Section settings tab.

Adding portfolio blocks

1. In the theme editor, add the Portfolio section to your service page template.
2. Click Add block → Case study.
3. Fill in: Title, Category (e.g., "Residential", "Commercial", "End-of-tenancy"), Excerpt, Before image, After image, and an optional Case study URL.
4. Repeat for each case study. Categories appear as filter buttons automatically.

Service Packages section (sections/service-packages.liquid)

A coastal-editorial service index — full-bleed, image-forward cards for the practice's services (kitchen design, bathroom renovation, interior styling, …). It reads like the services spread of a print folio rather than a generic feature grid. Intended for the homepage or a dedicated "Services" page.

What it does

• Spans the full width of the page, edge to edge — the image band and cards run the whole viewport with only a thin "waterline" gutter between cards. The background blends with the rest of the page (it is not a separate floating block), so the section flows as one continuous spread.
• Leads with a centered, elevated header: a small uppercase sea-glass eyebrow (e.g. "Our Services"), a centered serif heading, and a centered intro line beneath.
• Takes up to 6 service cards and lays them out in 2 or 3 columns (your choice); stacks to a single column on mobile. With fewer cards than columns the grid clamps down so no empty column is left behind.
• Each card is a softly frosted, scheme-tinted panel carrying, top to bottom: a portrait (4:5) interior photo; a serif-styled service title; a short description; the inclusions, each opening with a small sea-glass check-tick; then, pinned to the card foot, a captioned Price / Duration stat row divided by a fine hairline, and a full-width call-to-action button with a thin arrow.
• Highlight a service: tick Highlight this service on one block. Every card carries the same sea-glass rule across its top, so the highlighted one is marked by a small uppercase Most popular label instead — a quiet recommended-tier callout, not a loud ribbon. Change the wording with Highlight label, which appears once the tick-box is on.
• No image? If a service block has no photo, the card falls back to a tinted icon in place of the image — choose it under Icon, which appears while no image is set.

Block settings (one block per service)

Setting	Type	Description
title	text	Service name (e.g. "Kitchen Design").
description	rich text	One or two sentences describing the service.
inclusions	text area	One inclusion per line; each renders as a spec line opening with a sea-glass check-tick.
price_text	text	Free-text price, e.g. "From €4,500" — shown in the captioned Price cell of the stat row.
turnaround	text	Lead time, e.g. "6–8 weeks" — shown in the captioned Duration cell of the stat row.
cta_label / cta_link	text / link	The call-to-action button and its destination (a booking page or the service product).
image	image	Portrait interior photo (cropped to 4:5). Omit to use the icon fallback.
icon_type	select	Icon used only when no image is set: Briefcase, Wrench, Paintbrush, Home, Star, Clock, or None. The select appears while no image is chosen.
highlighted	checkbox	Marks this the "Most popular" card.
highlighted_label	text	Overrides the "Most popular" wording (only shown when Highlight this service is on).

Section settings

Setting	Type	Description
eyebrow	text	Small uppercase kicker line above the heading (e.g. "Our Services").
heading	text	Section heading (centered serif).
subheading	text	Short intro line under the heading (centered).
columns	select (2/3)	How many cards per row on desktop. Fewer cards than columns auto-clamp.
color_scheme	color scheme	Drives the whole section — background, ink, and the sea-glass accent.

Where to find it in the theme editor: Sections → Service packages → Section settings tab; click a card to edit a service block.

The sea-glass accent is your color scheme's accent colour. The eyebrow, the top rule on every card, the "Most popular" label, the inclusion check-ticks, and the CTA button's hover fill all draw from the section's Color scheme accent (the button rests on the scheme's foreground ink for contrast). To make the section flow as one page rather than a separate block, pick the same light/mist scheme your neighbouring sections use — the Uisce demo uses scheme 1 (the page's base mist near-white, whose accent is the coastal sea-glass). There are no per-element colour pickers — one scheme keeps light and dark mode legible automatically.

Important: Service packages blocks define the marketing copy independently from your Shopify product catalogue. The preferred merchant workflow is:

1. Create Shopify products for each service (e.g., "Kitchen Design", "Bathroom Renovation") — these drive cart, checkout, and order management.
2. Use Service Packages section blocks to present the editorial tier view (photo, inclusions, turnaround, highlighted "Most popular").
3. Point each card's CTA either to the product page (add-to-cart journey) or to your booking page (enquiry journey). Mixing both is valid; choose the journey that fits your fulfilment model.

Per-preset CSS activation

The Uisce visual signature CSS file (assets/preset-uisce.css) loads only when settings.preset is set to uisce in Online Store → Themes → Customize → Theme settings → Preset. This is controlled in layout/theme.liquid. No action needed from you unless you switch presets.

Niche-specific structured data

The Uisce preset extends snippets/json-ld.liquid to emit Service + Offer JSON-LD for service products. This schema activates when the product has a uisce_uisce.deposit_percent metafield populated.

Schema.org field	Source
@type	Service
name	Product title
description	Product description (first 30 words)
provider	LocalBusiness with shop name
offers	Offer with price, currency, and InStock availability

To validate:

curl -s "https://your-store.myshopify.com/products/uisce-standard-clean-2br" \
  | grep -A 20 '"@type": "Service"'

Paste the product URL into Google's Rich Results Test (search.google.com/test/rich-results) to verify the Service schema renders cleanly.

Demo-data setup

The scripts/populate-niche-uisce.mjs provisioner script populates your Uisce dev store with:

• The three metafield definitions in the uisce_uisce namespace: deposit_percent, duration_minutes, service_area
• 7 service products — Deep Clean — 2 Bedroom Home, Deep Clean — 3 Bedroom Home, Standard Clean — 2 Bedroom Home, Post-Tenancy Premium Clean, Same-Day Standard Clean, Office Clean — Small (up to 500 m²), and Luxury Rental Changeover Clean — each carrying those three metafields, and each published to the Online Store channel
• The same three metafields back-filled onto matching service products you already have
• 2 pages: Book a service (handle book-a-service) and Our portfolio (handle portfolio)
• Two links merged into your existing main menu: Book a service → /pages/book-a-service and Portfolio → /pages/portfolio. Links you already have are left alone, and nothing is removed.
• Demo blog articles and an out-of-stock product fixture used by the test suite

To populate demo data for the Uisce preset, run:

node scripts/populate-niche-uisce.mjs

# preview every change without writing to the store
node scripts/populate-niche-uisce.mjs --dry-run

The script reads the Uisce store's admin token from .env.stores as UISCE_TOKEN; the store domain comes from the script's own store map.

Or via the orchestrator (recommended for all 5 stores together):

STORE_PRESET=uisce node scripts/populate-niche.mjs

The script is idempotent — re-running it will update existing products/pages instead of creating duplicates (lookup by handle/SKU). It makes no changes to your footer.

Manual setup steps (after provisioner)

1. Create a booking page: Online Store → Pages → Add page. Assign the page.book template to it. Set the page handle to book-a-service.
2. Configure the Booking form section: Add your form endpoint, deposit note, trust points, and service blocks (see Booking form section above).
3. Create a portfolio page: Add page, assign page.portfolio template, handle portfolio. Add portfolio blocks for your case studies.
4. Add Service Packages to homepage or Services page: Insert the section and add up to 6 service blocks.
5. Update the header menu: Verify "Book a service" and "Portfolio" are in your header navigation (the provisioner merges both links into your existing main menu; check the menu you have assigned in the Header section settings under Navigation → Main menu).

Metafield setup

Service products emit Service structured data once they carry a deposit value, so create the metafield definitions:

1. Shopify Admin → Settings → Custom data → Products.
2. Add definition: namespace uisce_uisce, key deposit_percent, type number_integer.
3. Add definition: namespace uisce_uisce, key duration_minutes, type number_integer.
4. Add definition: namespace uisce_uisce, key service_area, type single_line_text_field.
5. Back-fill values on each service product (or use the provisioner script).

Recommended apps

The Uisce theme ships the booking SURFACE — the form, the service-selection, the deposit acknowledgment. The actual calendar, slot-availability, and confirmation flow require a booking/scheduling app. Recommended integrations:

App	Use case	Connection method
Calendly	Simple appointment scheduling	Set form_action_url to your Calendly embed URL or Calendly webhook endpoint. Alternatively embed a Calendly widget on a custom HTML block on the booking page.
Acuity Scheduling	Advanced scheduling with staff, buffer times	Acuity provides a Shopify app and an embed script; add an HTML block to the booking page template with the Acuity embed code.
Square Bookings	If already using Square for POS	Square provides a Shopify integration for service-selling.
Shopify Inbox	Quote/enquiry follow-up after form submission	Install Inbox; connect the automated reply to acknowledge booking enquiries.

No theme code changes are needed to connect these apps — the theme ships the presentation surface; the app handles the calendar/availability/confirmation.

Behavior callouts

Visual signature applies automatically

The Uisce signature — the mist page wash, the coastal accent palette, and the navy wash behind slideshow and banner media — appears as soon as settings.preset is set to uisce. Nothing to switch on per section.

Where the booking form submits

The form is a standard HTML POST to your Form action URL, so the browser navigates to whatever your endpoint returns. Your confirmation page, and any error page, come from that service — the theme does not intercept the response. If Form action URL is empty the form posts back to the current page, which reloads and loses the request, so set it before you publish.

Deposit amount on service selection

When a customer picks a service, the booking summary shows that block's Deposit amount, already formatted in your store currency, alongside the service name. It is a straight read of the value you entered — there is no percentage arithmetic — and no payment is taken. Collecting the deposit itself is the job of your booking app or a Shopify checkout.

Booking form consent gate

The submit button stays disabled until the consent checkbox is ticked, and the browser's own validation holds back a form with required fields still empty. Shopify's Customer Privacy API is read separately, for analytics only: when the visitor allows tracking, the theme publishes a booking event alongside the POST; when they decline, the booking still sends.

Service packages do not affect cart directly

The Service Packages section is a marketing display section. Adding a product to cart still requires the customer to navigate to a product page or use a dedicated product/buy-button section. If you want a direct "Add to cart" from a package card, point the block's Button link at your product page; the customer clicks through to ATC.

Pre-submission checklist

Shopify Theme Store checklist (Uisce-specific)

• [ ] At least one complete service product with deposit_percent, duration_minutes, and service_area metafields populated
• [ ] Booking form section has form_action_url set (not blank)
• [ ] Portfolio section has at least 2 case-study blocks with real images
• [ ] Service Packages section has at least 2 tier blocks with inclusions
• [ ] Page book-a-service uses page.book template
• [ ] Page portfolio uses page.portfolio template
• [ ] settings.preset is set to uisce in Theme settings
• [ ] Header menu includes "Book a service" and "Portfolio" navigation items
• [ ] All section headings use localized copy (no hardcoded English if selling internationally)

Google Rich Results

The Uisce preset emits Service + Offer JSON-LD for service products. To validate:

curl -s "https://your-store.myshopify.com/products/uisce-standard-clean-2br" \
  | grep -A 20 '"@type": "Service"'

Paste the product URL into Google's Rich Results Test (search.google.com/test/rich-results) to verify the Service schema renders cleanly.

Facebook Catalog / Meta Commerce

Facebook Catalog requires product price + availability. Service products on Shopify do not have "in stock" inventory by default. Set each service product to "Continue selling when out of stock" or set a fixed inventory quantity ≥1 to ensure Facebook Catalog accepts the feed.