Theme Settings

Theme settings control the overall look of your store — colours, fonts, logo, and layout. You'll find them by clicking the gear icon in the left sidebar of the theme editor, or through Online Store > Themes > Customize > Theme settings.

Colours

Uisce comes with four colour schemes, labelled Scheme 1 to Scheme 4 in the editor — typically a light base, a dark scheme, a tinted scheme, and a high-contrast scheme, and you can add more if four aren't enough. You assign a scheme to each section on your site, so you can mix light and dark areas on the same page.

←Colors

Color scheme

Pick a scheme to edit its colours.

Background

#ffffff

Text

#1e293b

Primary button background

#2563eb

Primary button label

#ffffff

Accent

#2563eb

Used for links, icons, and highlights.

Colour preview

Section heading

This is how body text looks with Scheme 1. The background is white, the text is dark, and the button uses your primary colour.

Shop now

See Colour Schemes for a full walkthrough of all four schemes and how to customise them.

Typography

Two font pickers set the fonts across your entire store. Drag the sliders to see how heading and body sizes affect the preview.

←Typography

Heading font

Body font

Heading size scale

100%

Makes all headings larger or smaller proportionally.

Body font size

16px

Base size for paragraph text.

Font preview

Page heading

Section heading

Body text looks like this. It's used for product descriptions, page content, and navigation links.

See Typography for font pairing details and tips.

Logo & favicon

←Logo

Logo image

📷your-logo.png

Upload a transparent PNG for best results.

Desktop logo width

120px

How wide the logo appears in the header on desktop.

Dark-mode logo

📷Select image

Shown in place of the standard logo when dark mode is active. Leave blank to use the same logo in both modes.

Transparent header logo

📷Select image

Shown when the header overlays a full-bleed image section. Leave blank to use the standard logo.

Mobile logo width

160px

How wide the logo appears on mobile (screens under 640px).

Favicon image

📷favicon.png

The small icon in the browser tab. Use a square image (32×32px).

Header with logo

U

YourStore

Shop · About · Contact

If you don't upload a logo, your store name shows as text in the header. Both options look fine — use whichever suits your brand.

You can optionally upload separate logos for dark mode and for when the header overlays a hero image — each variant can be set independently. Set Mobile logo width to control how the logo scales on smaller screens.

Layout

These settings affect every page on your store. Drag the sliders to see their effect on the preview.

←Layout

Page width

110rem

Maximum width of your content area.

Page margin

20px

Space on each side of the page at desktop widths. On mobile, a fixed 12px gutter is used.

Input corner radius

4px

How rounded form fields look.

Layout preview

Contact us

Name

John Smith

Email

john@example.com

Message

Your message here...

Content area: 110rem · margin: 20px · radius: 4px

Setting	What it does	Default
Page width	Maximum content area width — slide from 60 rem (compact) to 120 rem (expansive)	110 rem
Page margin	Space on each side of the page at desktop widths (over 768px) — mobile uses a fixed 12px gutter	20px
Input corner radius	How rounded form fields look (0 = square, 10 = fully round)	4px
Card corner radius	Roundness of product, collection, article, and other content cards (0–24px)	8px
Card shadow	Lift applied to cards — None, Subtle, Medium, or Pronounced; cards step up one tier on hover	Subtle

Social media

Add your social profile links in this section. They show up in two places:

1. Footer — As clickable icons visitors can tap.
2. Search results — Shopify uses them for structured data so Google can display your profiles.

Supported platforms: Twitter / X, Facebook, Instagram, YouTube, TikTok, and Pinterest.

Custom CSS

A text field where you can add your own styling rules. Most merchants won't need this — it's there for stores that want fine-grained control. See Custom CSS for examples.