OPERATOR Theme Documentation

OPERATOR is a fast, app-free Shopify Online Store 2.0 theme with a dark, tactical aesthetic and a signature red accent. It ships a complete storefront system — mega menus, before/after sliders, countdowns, comparison tables, FAQ with rich results, lookbooks, wishlist, quick view, a compare page, predictive search, a cart drawer with upsells, 3D/AR product media, and native B2B volume pricing — all running natively with zero required apps.

What is new in this build

• 3D / AR product media — native <model-viewer> with a "View in your space" AR button.
• Native B2B — reads variant.quantity_price_breaks, enforces variant.quantity_rule (min/max/increment), and shows a company/location context banner for B2B buyers.
• Volume pricing widget — "buy more, save more" tiers with live per-unit price and active-tier highlighting.
• Wishlist (card + PDP + header count + /pages/wishlist), Quick view modal, Spin-to-win, Content tabs, Event calendar, Metaobject showcase.
• Design-tokens panel — shadows, card hover lift, focus-ring, input radius, motion speed, plus Pills & badges controls (radius, border, padding, uppercase).
• Two live in-theme references: the Style Guide (/pages/style-guide) and the Sections Library (/pages/sections-library).

Getting started

1. Add the theme

1. Online Store → Themes → Add theme → upload the theme zip (or add from the Theme Store).
2. It sits in your library as an unpublished draft — customize and preview safely first.
3. Actions → Publish when ready (this replaces your live theme but does not delete the old one).

2. First steps

1. Theme settings → Brand: logo, favicon, name, tagline.
2. Colors: pick a palette preset or set the 17 tokens.
3. Typography: display + body font and scale.
4. Build menus in Online Store → Navigation (icons are automatic — see Icon system).
5. Set your Cart style and free-shipping bar.
6. Preview on mobile, then publish.

Shopify plan requirements

OPERATOR runs on any Shopify plan that includes the Online Store (Basic and up). Most features are native to the theme and work everywhere. A few depend on your Shopify plan or a separate subscription/app — this is a Shopify limitation, not a theme one. Merchants should confirm the current specifics for their plan in Shopify's own docs.

Works on every Online Store plan (no gating)

Wishlist, quick view, quick order, bundle builder, 3D/AR product media, reviews & ratings, FAQ rich results, before/after sliders, mega menus, countdowns, spin-to-win, content tabs, event calendar, metaobject showcase, comparison table, all social-proof and promo sections, discounts/gift cards, and the full design-tokens system.

Global theme settings

Theme settings (the gear icon in the editor) control your entire store at once — set them once and every page inherits them. OPERATOR groups ~130 settings into the tabs below. Complete reference:

Brand

Colors

Typography

Layout

Buttons

Product cards

Badges

Pills & badges

Design tokens

Product page

Cart

Header

Search

Social & sharing

SEO & structured data

Animations

Integrations

Advanced

Design system & tokens

OPERATOR is fully tokenised — the whole look is driven by CSS variables you control from theme settings, no code required.

Colours

Start with a palette preset (Colors → Palette) for a one-click skin, or edit the 17 tokens: neutrals (black, void, surface, s2, border, b2), brand (red, red-2), text (white, w2, muted, m2, m3), and semantic (green, yellow, blue). Leave button colours blank to inherit your brand red.

Radius (per component)

• Global radius — Layout → Corner radius (default 0, sharp/tactical). Cascades to buttons, cards and inputs.
• Input radius — Design tokens → Input & field radius (overrides global for form fields).
• Pill radius / border / padding — Pills & badges group.
• Product card radius — Product cards → Corner radius.

Depth, focus & motion Design tokens

• Shadow depth — none / soft / medium / strong. Applied to cards, modals, dropdowns, popups. Default none keeps the flat look.
• Card hover lift — px the card rises on hover.
• Focus ring — colour + width for keyboard focus (accessibility).
• Animation speed — global motion multiplier (50–150%). Respects reduced-motion.

Pills & badges new

The Pills & badges group controls the status pills (.op-pill) and menu/sale badges: corner radius, border width, horizontal/vertical padding, and uppercase toggles. See every variant live on the Style Guide.

Icon system

OPERATOR shows a small icon beside menu links — automatically, and fully optional.

• Global toggle — Header → "Show menu item icons" turns all nav icons on/off.
• Automatic — icons are auto-assigned from each menu item's name (Home → house, Shop → grid, Blog → newspaper, etc.). Unmapped items get a neutral marker so nothing is bare.
• Set a specific icon — put [icon-name] in a menu item's title, e.g. [rocket] New Drops. Browse names on the Icon Library page.
• Remove one icon — put [none] in that item's title to hide just that one (used by default on Resources).
• Badges — [new], [hot], [sale], or [badge:VIP] add a coloured badge.

Header & navigation

Four header styles plus a built-in three-level mega menu, announcement bar and top bar — no navigation app.

Mega menu (3 levels)

1. Online Store → Navigation, open your main menu.
2. Level 1 = top-bar item (e.g. Shop). Level 2 = column headings nested under it. Level 3 = links nested under each column.
3. Enable Header → Enable mega menu, then choose which top items open as mega panels and add an optional featured image per panel.

Wishlist link

A wishlist icon with a live saved-count appears in the header when the Wishlist action is enabled. It links to /pages/wishlist.

Product pages

Fully modular: the media gallery sits beside a stack of blocks you add/remove/reorder, plus 22 ready-made product templates you can apply per product (Products → [product] → Theme template, or preview with ?view=template-name).

Gallery layouts

Set the default under Product page → Gallery layout (thumbnails left / right / bottom), with global toggles for zoom, sticky add-to-cart, and variant-aware media (gallery jumps to the selected variant's image).

Buy-box blocks

On the Product information section, Add block to assemble the buy box: Title, Vendor, SKU, Rating, Price, Inventory meter, Variant picker (with swatches), Quantity, Volume discounts table, Buy buttons, Bundle/build-a-box, Subscription, Pickup availability, Shipping estimate, Description, Accordion rows, Trust icons/badges, Size-guide trigger, Share, Countdown, Live counters, Custom Liquid, Spacer.

Colour swatches (name-driven)

Swatches render automatically: a Shopify swatch value is used if present, otherwise the option name (e.g. "Forest Green") maps to a hex via the built-in palette. No metafields or app required for standard colour names.

3D / AR product media new

OPERATOR renders native Shopify 3D models and AR with no app.

1. Upload a .glb/.usdz 3D model to a product (Products → [product] → Media → Add media → 3D model).
2. The gallery automatically shows an interactive 3D viewer for that media, and a "View in your space" AR button on supported devices.

Technically: the gallery emits model_viewer_tag inside a <product-model> element that lazy-loads Shopify's model-viewer + XR features via Shopify.loadFeatures. Nothing to configure — it activates the moment a model exists on the product.

Volume pricing & native B2B

Volume pricing widget

Add the Volume discounts table block to the product buy box. Configure up to three tiers (quantity + discount, e.g. 3+ → 5%, 6+ → 10%). The table shows a live per-unit price, highlights the active tier as quantity changes, and clicking a tier sets the quantity. Discounts display per-unit; create a matching automatic discount in Discounts for it to apply at checkout.

Quantity rules

The quantity picker automatically enforces variant.quantity_rule — minimum, maximum, and increment (e.g. "sold in cases of 6") — with a hint line, when a B2B catalog defines them.

Company context

For a logged-in B2B buyer, a banner shows "Ordering for [Company] · [Location]" at the top of the product info. All B2B features are dormant (invisible) for regular DTC customers.

Wishlist, quick view & bundles

Wishlist new

Heart buttons appear on product cards and the product page (enable under Product cards → Show wishlist and the Header wishlist action). Saves are stored on-device (localStorage); a live count shows in the header, and /pages/wishlist lists saved products with remove buttons and an empty state.

Quick view

Enable Product cards → Show quick view. The search icon on a card opens a modal with the full product (large image-forward gallery, variant picker, quantity, add-to-cart) fetched via the Section Rendering API — shoppers add to cart without leaving the collection.

Bundle builder & quick order

Bundle builder lets shoppers assemble a custom kit with an optional multi-item discount. Quick order is a B2B variant-quantity table that adds many variants to the cart at once.

Cart & checkout

Cart style (Theme settings → Cart): Drawer (slide-out, default), Page, or Notification popup. Plus a free-shipping bar with threshold, an upsell engine (off / auto / manual), order notes, and gift wrap. For a full cross-sell grid, add the Cart — Upsell section; for placeable gift options, add the Cart — Gift wrapping section. All native — no cart app required.

Marketing & popups

Spin to win new

A gamified prize-wheel email-capture popup. Add Segment blocks (label, discount code, colour, win-chance weight, optional "no win"). Configure email-required, trigger delay, and once-per-session. Shoppers enter their email, spin, and reveal a copyable code. Create matching codes in Discounts.

Other

Countdown (honest, no fake resets), Discount banner, Free delivery bar, Newsletter popup, Age gate, Cookie consent, Recent purchases live social-proof toast, and Promotion popup.

Content sections

120+ sections cover heroes, media, text, promos and utilities. Browse them all with live examples at Sections Library. New content sections:

Content tabs new

General tabbed content (not product-specific). Add Tab blocks with a label, optional icon, heading, rich content, image, and CTA. ARIA tablist with keyboard support.

Event calendar new

List of upcoming events/drops. Add Event blocks (date badge, tag, title, time, location, details, link, featured flag).

Metaobject showcase new

Renders entries of a metaobject definition as cards (designers, ingredients, materials, store locations…). Set the metaobject type handle and the title/image/text field keys.

Staples

Rich text, Image with text, Media-with-text (overlay/vertical/sticky/collage), Multicolumn, Feature grid, Timeline, FAQ (emits FAQPage JSON-LD), Accordion, Gallery, Lookbook (hotspots), Portfolio, Comparison table, Image comparison (before/after), Video, Map, Locations, Contact form, Pricing, Custom Liquid.

Social proof

Reviews (data-driven with the optional Shadow Suite, native otherwise), Testimonials, Press logos, Instagram grid, Counter showcase (animated stats), Recent purchases popup, and Current-sales "someone just bought" nudge.

Collections & filters

Eight collection templates (default, vertical-filter, horizontal-filter, no-filters, pagination-infinite, pagination-show-more, editorial, lookbook). Assign in admin or preview with ?view=.

Filters

OPERATOR renders every filter type automatically — you enable which filters in Shopify's free Search & Discovery app (Filters tab → Add filter → Save). Colour filters render as swatches. Custom filters (Weight, Material, Roast) are added once as a storefront-accessible metafield. Sorting is always built in.

SEO & structured data

Clean JSON-LD emitted natively — toggle each schema independently under SEO & structured data: Organization, Product, Article, BreadcrumbList, FAQPage, WebSite. If you run the Shadow Suite and want it to own schema, enable "Let Shadow Suite handle structured data" to avoid duplicates.

Style Guide & Sections Library

Two live pages ship with OPERATOR so you (and buyers) can see everything the theme does and where to change it.

• Style Guide — /pages/style-guide. Every component and design token (colours, type, buttons, pills, badges, forms, swatches, rating, quantity, inventory, countdown, stats, accordion, pagination, breadcrumb, brand devices) on labelled rows, each with a "Customize → Settings → …" hint. Sticky grouped side-nav.
• Sections Library — /pages/sections-library. All 120+ sections grouped by purpose with a one-line description and a "View live" link where a demo exists.

Both are linked from the Resources menu. To add them to a store yourself: Online Store → Navigation → Resources → Add menu item → link to those pages.

Performance & accessibility

Performance

• ~26 KB JS gzipped, deferred/async, vanilla web components — no external libraries.
• Self-hosted fonts (Barlow / Barlow Condensed / JetBrains Mono); AVIF/WebP + lazy-loading below the fold.
• Don't add external fonts or app scripts — use OPERATOR's native sections instead.

Accessibility

• Targets WCAG 2.1 AA: visible focus (configurable), ARIA on interactive components, keyboard-operable menus/drawers, reduced-motion support.
• Maintain colour contrast, write descriptive alt text, keep one H1 per page.

Troubleshooting & FAQ

A section looks empty / shows placeholders

It isn't connected to content — pick a collection/products/blog, or add blocks/images.

Swatches aren't the right colour

Set an explicit Shopify swatch (colour or image) on the variant for non-standard names.

The mega menu isn't showing

Check: (1) Header → Enable mega menu is on; (2) the menu is nested correctly (L1 → L2 columns → L3 links); (3) the top item opens as a mega panel.

A menu link has no icon (or the wrong one)

Add [icon-name] to set it, [none] to hide it, or toggle all icons off in Header settings.

3D model isn't showing

Upload a .glb to the product's media. The viewer only appears when a 3D model exists on that product.

Volume price shows but isn't applied at checkout

The table displays the offer; create a matching automatic discount in Discounts (or use a B2B catalog for native quantity price breaks).

Do I need any apps?

No. Reviews, FAQ schema, before/after sliders, mega menus, countdowns, wishlist, quick view, compare, upsells, 3D/AR and B2B pricing are native.

Changelog

v1.0.0 — Theme Store Edition

• Native 3D/AR product media; native B2B (quantity price breaks, quantity rules, company context); volume-pricing widget.
• Wishlist (page + header count), quick-view modal, spin-to-win, content tabs, event calendar, metaobject showcase.
• Design-tokens panel (shadows, hover lift, focus ring, input radius, motion) and Pills & badges controls.
• Live Style Guide and Sections Library reference pages; consistent, optional menu-icon system.
• Mobile, accessibility and anchor-navigation hardening across all templates.

Support

Docs: docs.getsyndicate.app · Support: support.getsyndicate.app/operator

When contacting support, include your store URL and a screenshot of the section/setting in question.

OPERATOR — Theme Store Edition · Documentation v1.0.0 · A fast, app-free Shopify Online Store 2.0 theme.