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.

Heading text

Body text sample

Button

Heading text

Body text sample

Button

Heading text

Body text sample

Button

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, icon, and CTA; demo content uses numbered intake stages (01 Brief, 02 Design, 03 Build)
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, icon, and CTA; demo content shows numbered service-intake stages, proof metadata, one explicit trailing CTA, and a mobile-first touch-safe dismiss control.
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.

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 fluid wave-overlay visual signature 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-CTA 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:

Fluid wave-overlay: a soft SVG backdrop mask with gentle wave curvature behind niche-anchor section headings (.niche-anchor--uisce selector)
Rounded corners on service cards and package tiers (less industrial than Tine)
A coastal blue/teal accent palette complementing the base color scheme

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, active, and 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, dark-toggle, and cart controls sit as bare glyphs at rest and, on hover or focus, fill with a mist tint inside a soft border (a compact, tactile "glass chip" that never shows a heavy fill).
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 CTA section (`sections/booking-cta.liquid`)

A GDPR-compliant service-booking enquiry form with consent gating, deposit acknowledgment, and service-selection. This is the primary conversion surface for service merchants.

What it does

Renders a two-column layout: left side descriptive copy + service benefits; right side the enquiry form
Form fields: Name, Email, Phone, Service type (select from seeded service blocks), Preferred date, Preferred time (optional), Property size / scope notes (optional textarea), Booking notes
GDPR consent checkbox — required field; consent text is localizable via sections.booking_cta.consent_text locale key; checkbox is gated by the Shopify Customer Privacy API (window.Shopify.customerPrivacy.analyticsProcessingAllowed())
Deposit acknowledgment — if a block sets deposit_percent, the JavaScript in niche-uisce.js calculates the deposit amount from the service price and displays it in the form summary before submit
Service block schema supports: service_name, service_price (numeric), deposit_percent (numeric 0–100), duration_minutes (numeric), service_description (richtext)

Schema settings

Setting	Type	Default	Description
`form_action_url`	URL	—	Required. POST endpoint for booking form (Netlify, Formspree, custom endpoint). Leave blank to see an error state.
`form_success_heading`	text	—	Heading shown after successful form submission
`form_success_body`	richtext	—	Body copy shown after successful submission
`show_deposit_summary`	checkbox	true	Show a deposit summary card before submit
`niche_metafield_namespace`	text	`uisce_uisce`	Namespace for service metafields (default uses uisce namespace)
`color_scheme`	color_scheme	scheme-1	Section background color scheme

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

Configuring the form endpoint

Create a Netlify form, Formspree endpoint, or your own POST handler.
In the theme editor, navigate to the Booking CTA section.
Paste your endpoint URL into Form action URL.
Set Success heading and Success body for the post-submission confirmation.

Adding service blocks

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

In the theme editor, click Add block → Service in the Booking CTA section.
Fill in: Service name, Service price (numeric, in your store currency), Deposit percent (0–100), Duration (minutes), Service description.
Add up to 10 service blocks. The select element in the form will list all seeded service names.

The consent checkbox is required and wired to the Shopify Customer Privacy API. Booking submission is gated on analyticsProcessingAllowed(). The consent copy is intentionally booking-specific (not generic tracking consent) to comply with GDPR Article 7 — you may not remove or soften the booking-purpose language. You may update the privacy policy URL via Theme settings → Policies → Privacy policy URL (standard Shopify setting).

Portfolio section (`sections/portfolio.liquid`)

A case-study gallery showcasing completed work with before/after images, client outcomes, and filtering by category.

What it does

Grid or list layout (configurable via section setting layout: grid | list)
Each portfolio block renders: project title, category badge, before/after image pair, outcome/description (richtext), optional CTA 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 correctly (uses exact-equality deduplication, not substring matching)
No metaobject dependency — all content is block-driven; up to 20 portfolio item blocks

Schema settings

Setting	Type	Default	Description
`heading`	text	—	Section heading
`subheading`	richtext	—	Optional introductory paragraph
`layout`	select	`grid`	`grid` (masonry-like) or `list` (horizontal pairs)
`show_filter`	checkbox	true	Show the category filter buttons
`color_scheme`	color_scheme	scheme-1	Section background

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

Adding portfolio blocks

In the theme editor, add the Portfolio section to your service page template.
Click Add block → Case study.
Fill in: Project title, Category (e.g., "Residential", "Commercial", "End-of-tenancy"), Before image, After image, Outcome description, optional CTA URL + label.
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.
Renders 2–3 service cards (you choose 2 or 3 columns); stacks to a single column on mobile.
Each card carries, top to bottom: a portrait (4:5) interior photo; a serif-styled service title; a short description; the inclusions, each separated by a fine "waterline" hairline rule; then, pinned to the card foot, the price + uppercase letter-spaced turnaround and an understated text-link call-to-action with a thin arrow (not a heavy filled button).
Highlight a service: tick Highlight this service on one block. The highlighted card gets a sea-glass rule across its top and a small uppercase Most popular label — a quiet recommended-tier callout, not a loud ribbon. Change the wording with Highlight label.
No image? If a service block has no photo, the card falls back to a tinted icon (choose the icon under Icon) in place of the image.

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 under a waterline hairline rule.
`price_text`	text	Free-text price, e.g. "From $4,500".
`turnaround`	text	Lead time, e.g. "6–8 weeks" (shown uppercase, letter-spaced).
`cta_label` / `cta_link`	text / link	The text-link call to action 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`	select	Icon used only when no image is set.
`highlighted`	checkbox	Marks this the "Most popular" card (sea-glass top rule + label).
`highlight_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.
`related_article_handle`	text	Optional blog-post handle to surface as a "read more" link.

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 highlighted top rule, the "Most popular" label, and the CTA hover all draw from the section's Color scheme accent. 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:

Create Shopify products for each service (e.g., "Kitchen Design", "Bathroom Renovation") — these drive cart, checkout, and order management.
Use Service Packages section blocks to present the editorial tier view (photo, inclusions, turnaround, highlighted "Most popular").
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.

Schema settings reference

`niche_metafield_namespace` setting

All Uisce niche sections that read product metafields accept a niche_metafield_namespace setting. Default value: uisce_uisce. This is the Shopify metafield namespace prefix used by the scripts/populate-niche-uisce.mjs provisioner.

When to change it: If you have existing products with metafields already under a different namespace (e.g., mystore_services), set niche_metafield_namespace to that namespace on each section or in the product card snippet. The theme reads metafields via Liquid bracket notation: product.metafields[section.settings.niche_metafield_namespace].

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:

bash

curl -s "https://your-store.myshopify.com/products/standard-clean" \
  | 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:

5–8 service products (Standard Clean, Deep Clean, End-of-tenancy, Carpet Clean, Move-in Clean, Window Clean, Commercial Office, Post-renovation Clean)
Metafields on each product: uisce_uisce.deposit_percent, uisce_uisce.duration_minutes, uisce_uisce.service_area
Portfolio case study pages (3 demo case studies)
Service header menu: Home, Services, Book a Service, Portfolio, About, Contact
Footer Quick Links block: Book Now, Services, FAQ, Privacy Policy

To populate demo data for the Uisce preset, run:

bash

STORE_PRESET=uisce SHOPIFY_STORE=your-uisce-store.myshopify.com \
  SHOPIFY_ACCESS_TOKEN=shpat_xxxx \
  node scripts/populate-niche-uisce.mjs

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

bash

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).

Manual setup steps (after provisioner)

Create a booking page: Online Store → Pages → Add page. Assign the page.book.uisce template to it. Set the page handle to book-a-service.
Configure the Booking CTA section: Add your form endpoint, success copy, and service blocks (see Booking CTA section above).
Create a portfolio page: Add page, assign page.portfolio.uisce template, handle portfolio. Add portfolio blocks for your case studies.
Add Service Packages to homepage or Services page: Insert the section and add 2–3 tier blocks.
Update the header menu: Verify "Book a Service" and "Portfolio" are in your header navigation (the provisioner creates this menu; you may need to assign it in the Header section settings under Navigation → Main menu).

Metafield setup

To expose service data (deposit %, duration) on product pages, create metafield definitions:

Shopify Admin → Settings → Custom data → Products.
Add definition: namespace uisce_uisce, key deposit_percent, type number_integer.
Add definition: namespace uisce_uisce, key duration_minutes, type number_integer.
Add definition: namespace uisce_uisce, key service_area, type single_line_text_field.
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 fluid wave-overlay backdrop on niche-anchor sections appears as soon as settings.preset is set to uisce. You will see the CSS class .niche-anchor--uisce applied to the Booking CTA, Portfolio, and Service Packages sections when they render in the Uisce preset context.

Booking form post-submit state

After a successful form POST (200 response from form_action_url), the booking form replaces itself with the success heading + body configured in section settings. If your endpoint returns an error status, the form renders an error message using role="alert". The success/error state is driven by niche-uisce.js fetch response handling.

Deposit calculation on service selection

When a customer selects a service type in the booking form, niche-uisce.js reads the deposit_percent from the selected service block (via a data-deposit attribute on the <option> element) and computes the deposit amount: service_price × deposit_percent / 100. This amount is displayed in the deposit summary card. The calculation is client-side only — no actual payment is collected via the theme. The deposit amount drives the acknowledgment copy only; actual deposits require your chosen booking app or Shopify payment flow.

The submit button is disabled until the GDPR consent checkbox is checked. The consent checkbox calls window.Shopify.customerPrivacy.analyticsProcessingAllowed() via the Shopify Customer Privacy API. In development/preview mode this always returns true; on live stores it respects the customer's cookie banner consent state.

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, set cta_url to your product page URL; 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 CTA 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.uisce template
[ ] Page portfolio uses page.portfolio.uisce template
[ ] settings.preset is set to uisce in Theme settings
[ ] Header menu includes "Book a Service" and "Services" 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:

bash

curl -s "https://your-store.myshopify.com/products/standard-clean" \
  | 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.

Uisce ​

Who it's for ​

The vibe ​

Color schemes ​

Font pairing ​

Recommended sections ​

Catalog size ​

Art-direction rules ​

Target merchant profile ​

Visual signature details ​

Header signature — glass service-commerce chrome ​

Booking CTA section (sections/booking-cta.liquid) ​

What it does ​

Schema settings ​

Configuring the form endpoint ​

Adding service blocks ​

GDPR consent note ​

Portfolio section (sections/portfolio.liquid) ​

What it does ​

Schema settings ​

Adding portfolio blocks ​

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

What it does ​

Block settings (one block per service) ​

Section settings ​

Schema settings reference ​

niche_metafield_namespace setting ​

Per-preset CSS activation ​

Niche-specific structured data ​

Demo-data setup ​

Manual setup steps (after provisioner) ​

Metafield setup ​

Recommended apps ​

Behavior callouts ​

Visual signature applies automatically ​

Booking form post-submit state ​

Deposit calculation on service selection ​

Booking form GDPR gate ​

Service packages do not affect cart directly ​

Pre-submission checklist ​

Shopify Theme Store checklist (Uisce-specific) ​

Google Rich Results ​

Facebook Catalog / Meta Commerce ​

Uisce

Who it's for

The vibe

Color schemes

Font pairing

Recommended sections

Catalog size

Art-direction rules

Target merchant profile

Visual signature details

Header signature — glass service-commerce chrome

Booking CTA section (`sections/booking-cta.liquid`)

What it does

Schema settings

Configuring the form endpoint

Adding service blocks

GDPR consent note

Portfolio section (`sections/portfolio.liquid`)

What it does

Schema settings

Adding portfolio blocks

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

What it does

Block settings (one block per service)

Section settings

Schema settings reference

`niche_metafield_namespace` setting

Per-preset CSS activation

Niche-specific structured data

Demo-data setup

Manual setup steps (after provisioner)

Metafield setup

Recommended apps

Behavior callouts

Visual signature applies automatically

Booking form post-submit state

Deposit calculation on service selection

Booking form GDPR gate

Service packages do not affect cart directly

Pre-submission checklist

Shopify Theme Store checklist (Uisce-specific)

Google Rich Results

Facebook Catalog / Meta Commerce