Operator — Merchant Guide

Everything here is done in the Shopify theme editor: Online Store → Themes → Customize. No code required.

Quick start

Pick a style — Theme settings → Theme styles → choose a preset → Save.
Add your logo — Theme settings → Logo.
Set your colors — Theme settings → Colors (contrast auto-adjusts).
Choose fonts — Theme settings → Typography.
Build your homepage — add, reorder, and remove sections, then Save.

1. Getting started

Choose a style

Operator ships with five preset styles — Operator, Outpost, Nightfall, Roastery, Atelier — each a complete look (colors, fonts, spacing). Switch under Theme settings → Theme styles, pick a style, and Save.

Heads up

Switching a style replaces the current colors, typography, and layout with that preset's values. If you've made custom color or font changes, note them first — switching overwrites them.

Add your logo

Under Theme settings → Logo: upload an image logo, or turn it off to use the text logo (your brand name) with an optional icon mark. Set the logo width and, optionally, a separate dark logo for the footer.

2. The five styles

Operator — bold, high-contrast, tactical. Condensed display type and a decisive accent.
Outpost — rugged and utilitarian, olive-toned, field-tested.
Nightfall — dark, cinematic navy with a warm gold accent.
Roastery — warm cream-and-rust, editorial and inviting.
Atelier — refined, minimal, gallery-quiet.

Every style is a complete, curated preset. Switch in one click; your content stays, only the presentation changes.

3. Global settings

Colors — set your base accent, green, and yellow plus neutrals. Text and badge colors adapt automatically so contrast stays AA-compliant even after you change the palette.
Typography — Display, Heading, and Body fonts, all self-hosted for speed.
Layout — global spacing, section width, and corner radius.
Buttons, pills & badges — radius, border, uppercase, padding.
Cart — drawer or page, order notes, free-shipping threshold, upsell mode.
Background watermark — optional large brand word behind the page.

4. Building pages

Operator is Online Store 2.0 — every page is built from sections you add, reorder, and remove. Each section exposes content, text colors, section colors, layout & spacing, and mobile overrides.

Key sections include the Hero finder, hero slider / slideshow / image banner, featured & grid product lists, collection lists, the numbered feature grid, bundle builder, product lists and tables, quick order list, reviews, FAQ, countdown, stamp banner, testimonials, and popups (newsletter, spin-to-win, promo).

Dynamic content

Any text, rich-text, or image setting can be connected to a metafield with “Connect dynamic source” in the editor — so per-product or per-collection content stays editable without code.

5. Products & collections

Product templates — default, immersive, magazine, gallery-grid, sticky, minimal, tabs, sale, preorder, quick-view. Set under Product → Template.
Per-color images & swatches — assign images to variants; swatches switch the gallery automatically.
3D / AR media — upload a 3D model (.glb/.gltf) to a product; it renders with a “View in your space” (AR) button on supported devices.
Volume / tiered pricing & B2B — quantity breaks and B2B quantity rules display automatically when configured on the product or catalog.
Collection templates — editorial, lookbook, infinite-scroll, load-more, vertical/horizontal filters, no-filters.

6. Product info & metafields flexible

The product page's Accordion row block can show either typed rich text or the value of a product metafield — ideal for details that vary per product, like ingredients, nutrition, materials, or care instructions.

Show a metafield in an accordion

Add an Accordion row block to the product section.
Set its Heading (e.g. “Usage & care” or “Ingredients”).
In “Or product metafield,” enter custom.usage or custom.ingredients (namespace.key).
The row shows that product's metafield value when set, and falls back to the typed Content when it's empty.

Operator ships with two ready-made definitions — custom.usage and custom.ingredients. Add or edit values per product under Products → (a product) → Metafields, or create your own definitions under Settings → Custom data → Products.

Why it matters

This keeps ingredient lists, nutrition facts, spec sheets, and care instructions per-product and fully editable — no theme code, and consistent across your whole catalog.

7. Accounts & Sign in with Shop new

Account menu

When customer accounts are enabled (Settings → Customer accounts), the header avatar opens Shopify's account sheet, letting customers sign in without leaving your store. If accounts are off, it falls back to a normal account link. Configure it on the header's Account block: Use Shop account menu toggles it on/off, and Account menu chooses which menu appears in the sheet.

Sign in with Shop

The login page shows a “Sign in with Shop” button above the email/password form, letting customers sign in and check out faster with Shop Pay. Toggle it under the login section's Sign in settings.

Requirements

The account sheet needs customer accounts enabled. The Shop button needs the Shop channel installed and Shop Pay activated.

8. Conversion features

Wishlist — a heart on product cards saves items for logged-out guests (stored on the device). Assign the “Wishlist” template to a page for the full list.
Quick view — opens a product modal from cards.
Cart drawer — slide-out cart with upsell and free-shipping progress.
Predictive search — instant results overlay.
Back-in-stock — sold-out products show a “Notify me” email capture.

9. Language & regions

Storefront text lives in the language editor: Settings → Languages → your language → Edit. Search a phrase to change it (e.g. “Add to cart,” “Search products…”). The theme includes 12 languages and full right-to-left (RTL) support.

10. Performance

Keep hero images reasonably sized — the theme serves AVIF/WebP and lazy-loads below the fold automatically.
Avoid pasting large third-party scripts into custom-liquid sections; that's the most common cause of slowdowns.
Operator's own JavaScript is ~26 KB gzipped and deferred.

All five styles pass WCAG 2.1 AA color contrast out of the box.
If you change colors, text and badge colors auto-adjust to preserve contrast. If you set very low-contrast heading/body combinations yourself, re-check readability.

12. FAQ

Switching styles erased my colors — why?

Theme styles overwrite presentational settings (colors, fonts, layout) by design. Your content (text, images, products) is preserved. Note custom color changes before switching.

The account avatar / Shop button isn't showing.

The account sheet requires customer accounts enabled; the Shop button requires the Shop channel + Shop Pay. Once enabled, both appear automatically.

My 3D model isn't appearing.

Upload a .glb or .gltf file to the product's media in the admin. The viewer and AR button appear automatically on supported devices.

Where do ingredient / care details come from?

From the custom.ingredients and custom.usage product metafields, shown via Accordion rows. Edit them per product under Products → Metafields.

13. Support

Need help? Reach out any time — we aim to respond within one to two business days. When you contact us, include your store URL, the theme version (Online Store → Themes), and a screenshot or a link to the page in question.

Contact support →