Umber — Documentation
Set up Umber.
Umber is a Shopify theme for apparel and fashion lookbooks — a warm, editorial look with the shop's chrome floating over the media. This page covers installing it, the settings that matter most, and where to reach us.
01 — Getting started
Install and preview
After purchase, add Umber to your store from the Shopify theme library, then open the theme editor to customise it. Nothing here needs code.
- In Shopify admin, go to Online Store → Themes and add Umber to your theme library.
- Click Customize to open the editor. The theme ships with three colour presets and demo content to build from.
- Preview on desktop and mobile with the device toggle before publishing.
Umber is built on Shopify's Skeleton base and uses only native browser features — no external libraries — so it stays fast and works even before scripts load.
02 — Header & navigation
The floating header
Umber's header is a compact frosted pill that hovers over your content rather than sitting in a bar. It stays as narrow as its contents allow.
Navigation layout
Choose a drawer that slides out with drill-down menus, or an inline menu shown in the header on wider screens. Both support a featured panel — an image, product or collection — attached to a top-level menu item.
Announcement bar
A slim bar above the header with rotating messages, optional links, and optional dismissal. Add or remove messages as blocks.
Country & language selector
Shown automatically when your store sells in more than one market or language. Toggle it in the header settings.
03 — Product page
The product stage
The product page leads with full-bleed media and a floating buy panel. Its settings live on the Product template in the editor.
Image zoom
Three ways for shoppers to look closer: zoom in place, a magnifying lens that follows the cursor, or a full-screen view. Touch devices always get the full-screen view, since a lens needs a mouse.
Media fit
Contain shows the whole product; Cover fills the stage. Choose per your photography.
Trust badges
Add reassurances — free shipping, returns, secure payment — directly under the buy button as blocks, each with an icon from a curated set or your own image.
Pickup availability
Shows local pickup status for the selected variant, if any of your locations offer it. It updates as the shopper changes size or colour.
Information rows
Collapsible details — fabric, sizing, care — as blocks, opened from a link beside the buy panel.
04 — Sections
Sections you can add anywhere
Add these from the theme editor's Add section button on any page, then reorder and configure them. Each ships with sensible defaults.
- SlideshowFull-bleed rotating hero
- Before / afterDrag to compare two images
- Image hotspotsPins on a photo that open products
- Shoppable lookbookLooks with the products in them
- Collection explorerBrowse collections with swapping media
- Fit check galleryCustomer photos of the product worn
- Trust badgesA row of reassurances
- FAQGrouped questions, with optional SEO data
- Recently viewedProducts the shopper has seen
- Countdown heroA timed hero for drops
- MarqueeScrolling text band
- ReviewsQuotes with ratings
Quick view is a store-wide setting, not a section: turn it on in Theme settings → Appearance to add a button on every product card that opens the product in a dialog.
05 — Languages
Five languages, built in
Umber ships translated into English, French, German, Spanish and Italian. To offer a language to shoppers, add and publish it in Shopify under Settings → Languages — the theme's translations are applied automatically.
Any text you enter yourself — headings, buttons, announcements — is translated in Shopify's Translate & Adapt app, not the theme.
06 — Presets & colours
Three starting points
Umber includes three presets — Paper, Clay and Ink — each a full colour scheme tuned to meet accessibility contrast standards. Pick one in Theme settings as a starting point, then adjust colours, fonts and spacing to your brand.
Every colour scheme is checked so text stays readable against its background. If you change colours, keep enough contrast between text and background — the theme's defaults meet WCAG AA.
07 — Support
Stuck on something?
Email us and we'll help. Include your store URL and a screenshot or short description of what you're seeing.