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 gives you four colour schemes (light, dark, accent, and bold). 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

#2563eb

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

Logo width

120px

How wide the logo appears in the header.

Logo (dark mode)

📷Select image

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

Logo (transparent header)

📷Select image

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

Logo width (mobile)

80px

How wide the logo appears on mobile screens.

Favicon

📷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 Logo width (mobile) 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

Side margin on smaller screens.

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	Side margin on smaller screens	20px
Input corner radius	How rounded form fields look (0 = square, 10 = fully round)	4px

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.