What Operator is

Operator is a complete storefront system. Everything you normally bolt on with paid apps — mega menus, before/after sliders, countdowns, comparison tables, FAQ with rich results, lookbooks, wishlists, a compare page, predictive search, a cart drawer with upsells — ships inside the theme and runs natively. No script tags, no monthly app fees, no third-party scripts slowing your store down.

Who it’s for

Independent and small merchants in apparel, gear, coffee, supplements, beauty, pets, and lifestyle niches — anyone who wants a premium, opinionated storefront and the freedom to run it without a developer or a pile of subscriptions.

Getting started

Install the theme, learn the editor, load a demo, and make your first edits. Most stores are presentable within an hour.

1. Add the theme to your store

1. In your Shopify admin go to Online Store → Themes.
2. Under Theme library, choose Add theme and add Operator (from the Shopify Theme Store or by uploading the theme zip you received).
3. Operator now sits in your library as an unpublished draft. You can customize and preview it safely before going live.

2. Open the theme editor

From Themes, click Customize on Operator. The editor has three parts:

• Left panel — the list of sections on the current page. Click any section to edit its settings, or drag to reorder. Use Add section / Add block to build the page.
• Center — a live preview that updates as you change settings.
• Top bar — the page selector (Home page, Products, Collections, Cart, etc.), the device toggle (desktop / mobile), and Theme settings (the gear icon) for global options.

3. Load a demo preset (recommended)

Operator ships with 12 home-page presets so you don’t start from a blank page. In the theme editor, open the page dropdown at the top, pick a homepage template, then style it. The presets are:

Each preset is a curated arrangement of real Operator sections. Swap your own images, text and products in and you have a finished homepage.

4. Recommended first steps

1. Open Theme settings → Brand and add your logo, favicon, brand name and tagline.
2. Open Colors — pick a palette preset or set your own brand red and neutrals.
3. Open Typography — choose your display and body fonts.
4. Build your menus in Shopify admin (Navigation), then wire them into the Header.
5. Set up your Cart style and free-shipping bar under Theme settings → Cart.
6. Preview on mobile using the device toggle, then publish.

Global theme settings

Theme settings (the gear icon in the editor) control the look of your entire store at once. Set these once and every page inherits them. Operator groups roughly 120 settings into the tabs below.

Brand

Logo / Logo (dark)

Upload a light logo (for dark backgrounds) and an optional dark variant. Control its logo_width.

Favicon

The small icon shown in browser tabs.

Brand name & Tagline

Used as text fallbacks and in structured data when no logo image is set.

Colors

Start with a Palette preset (color_palette) for a one-click skin — Custom, Mono, Arctic and more — or set the 16 individual tokens. They are grouped as:

Typography

Display font & scale

The font for big headings (default ships a tall, tactical display face). type_display_scale tunes overall heading size.

Body font & scale

The font for paragraphs and UI. Operator self-hosts Barlow / Barlow Condensed / JetBrains Mono for speed.

Uppercase eyebrows / buttons

Toggle the all-caps tactical treatment on small labels and button text.

Layout

Container max width

layout_container_max sets your boxed content width. Operator is a boxed layout (range 1200–1680 px); the shipped default is 1320 px.

Section spacing

The vertical rhythm between sections.

Corner radius

layout_radius (0–16 px). The tactical look defaults to 0 (sharp corners).

Border width

Thickness of the hairline borders used throughout the UI.

Default pagination

Numbered buttons, a Show more button, or Infinite scroll — the store-wide default for collections.

Buttons

Set Primary (background / text / hover), Secondary (background / text / border) and Shape options — including an optional btn_arrow_icon and its position. Leave the colors blank to inherit your brand red.

Product cards

Controls how products look in every grid, carousel and list:

• Image ratio (natural / square / portrait), corner radius, and hover-to-show-second-image.
• Toggle color swatches, quick add, quick view, wishlist, vendor, rating stars and compare-at price.
• Choose badge style and quick-add button style.

Badges

Fine-grained control over the corner badges on cards: an automatic Sale badge (-%), a custom text badge, and an image badge — each with optional colors, size and corner. Placement sets the corner and X/Y offset.

Product page

Gallery layout

Thumbnails left / right / bottom, and more — the store-wide default (each product template can override).

Zoom

Enable click/hover zoom on product media.

Sticky add to cart

Keeps the buy button visible as the shopper scrolls.

Variant-aware media

The gallery jumps to the matching image when a variant is selected.

Inventory meter + threshold

Show a low-stock meter and set the count at which “low stock” appears.

Pickup & Recently viewed

Toggle in-store pickup availability and a recently-viewed row.

Cart

Choose the Cart style (slide-out Drawer, full Page, or a quick Notification popup), the free-shipping bar and its threshold, the Upsell engine mode (off / auto / manual), order notes, and gift wrap. See Cart.

Header

Global header behavior: sticky header, transparent over hero, and which icons appear (search, account, wishlist), plus the master mega-menu toggle. See Header & navigation.

Search

Enable predictive search and choose what it surfaces: products, collections, articles, pages.

Social

Add your Instagram, TikTok, Facebook, X, YouTube, Pinterest URLs (used in the footer and social sections), control share buttons on product pages, and set a default Open Graph image and Twitter handle for link previews.

SEO & structured data

Operator emits clean JSON-LD with no app required. Toggle each schema independently:

• Organization, Product, Article, BreadcrumbList, FAQPage, WebSite.
• Let Shadow Suite handle structured data — if you run the Suite app and want it to own schema, flip this on to avoid duplicates.

Animations

Toggle scroll-in reveal animations and hover effects globally. Both respect the visitor’s reduced-motion preference.

License & Advanced

License

Stores your purchase code and the Enable Suite hooks toggle for the optional Shadow Suite integration.

Advanced

Optional custom CSS, custom <head> and custom <body> code, preconnect domains, a demo palette switcher, and bring-your-own AI key fields (an optional Gemini-powered Brand Coach panel in the editor).

Header & navigation

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

Header layouts

Pick the header section that fits your brand from the Header group in the editor:

Global header behavior (sticky, transparent-over-hero, which icons show) lives in Theme settings → Header.

The mega menu (3 levels)

The mega menu turns top-level links like Shop and Features into rich, grouped panels. Build it entirely from Shopify’s native menu editor:

1. In admin go to Online Store → Navigation and open your main menu.
2. Level 1 = the top bar item (e.g. Shop).
3. Level 2 = the column headings inside the panel (e.g. Men, Women, New In). Nest these under the Level 1 item.
4. Level 3 = the links inside each column (e.g. Jackets, Tees). Nest these under the Level 2 item.
5. Enable the master toggle in Theme settings → Header → Enable mega menu, then in the Header section choose which top-level items open as mega panels and optionally add a featured image/promo per panel.

Announcement bar

The Header — Announcement bar section sits above the header for rotating promos, shipping notices, or a discount code. Add multiple messages as blocks; set colors, links, and (optionally) auto-rotation.

Top bar

The Header — Top bar adds a thin utility strip for things like contact details, store hours, or a country/language picker, sitting above the announcement bar.

Country / language & search

• Country & language selectors appear when you have multiple markets/locales enabled in Shopify Markets; place them in the header or footer.
• Search opens a predictive search modal (Utility — Search modal). Configure what it returns under Theme settings → Search.

Footer

The footer is built from the Footer group: the main Footer section (link columns, newsletter, payment icons, social), an optional oversized Footer — Logo banner, and a Footer — Sticky nav bar for mobile.

Homepage & sections

Operator includes 116 merchant-facing sections. Add any of them on the homepage, on pages, or wherever sections are allowed. Below is the full categorized reference, with the important sections expanded.

Collection banner (single H1)

Every collection page is led by the Collection banner (main-collection-banner). It provides the page’s one and only <h1> (the collection title), a built-in eyebrow label, an automatic breadcrumb, and the collection description. Width, top/bottom padding, heading and body sizes, and per-device (mobile) overrides are all adjustable in its settings — so you can tune height, spacing, alignment and typography per store without touching code.

Product pages

The product page is fully modular. The media gallery sits beside a stack of blocks you add, remove and reorder in the editor — plus 22 ready-made product templates you can apply per product.

Gallery layouts

Set the default under Theme settings → Product page → Gallery layout (thumbnails left, right, or bottom, and more), with zoom, sticky add-to-cart and variant-aware media as global toggles. Individual product templates can override the layout entirely.

Modular product blocks

On the Product information section, click Add block to assemble the buy box. Available blocks:

Color swatches (name-driven)

Operator renders color swatches automatically. If a variant uses a Shopify swatch value it uses that color; otherwise it maps the option name (e.g. “Forest Green”, “Navy”) to a hex via the built-in color palette. That means swatches just work — no metafields or app required — as long as your option names are normal color words.

Product template variants (?view=)

Operator ships 22 product templates. Assign one to any product in admin (Products → [product] → Theme template), or preview any of them with a ?view= URL parameter, e.g. /products/your-product?view=minimal. Available templates:

Pick the template that matches the product: immersive for hero products, minimal for simple items, grouped for product families, preorder / sale for those states.

Collections

Collection pages combine the single-H1 banner with a flexible product grid. Eight ready-made collection templates cover the common layouts.

Layout templates

Assign a collection template in admin (Collections → [collection] → Theme template) or preview with ?view=:

The store-wide default pagination (numbered / show-more / infinite) is also set globally under Theme settings → Layout → Default pagination.

Setting up filters

Operator already knows how to display every kind of filter — color swatches, price sliders, brands, sizes, weights, materials, anything. You just tell Shopify which filters to turn on. This is a one-time, no-code setup that takes about two minutes.

Step 1 — Open the filter settings

Install the free Shopify Search & Discovery app (Apps → search “Search & Discovery” → Install — most stores already have it), open it, and click the Filters tab. Availability and Price are on by default.

Step 2 — Add the filters you want

Click Add filter and pick from the built-in options — these work instantly because Shopify already has the data. Then click Save and refresh a collection page.

Drag filters to reorder them — that’s the order shoppers see. You can have up to 25 filters.

Step 3 (optional) — Custom filters like Weight, Material, Roast

For anything Shopify doesn’t track by default, add it once as a metafield, then filter on it:

• Settings → Custom data → Products → Add definition. Name it (e.g. Weight, Material, Roast level); type Single line text (or Integer/Decimal for numbers). Tick “Storefront access” — without it the metafield can’t be filtered.
• Open a few products → Metafields → fill in the value (e.g. Material = “Aluminum”).
• Back in Search & Discovery → Filters → Add filter → choose your new metafield → Save.

What each industry typically turns on

* = added once as a metafield (Step 3). Everything else is built in.

Color swatches (automatic)

Add a Color filter and Operator shows real color swatches automatically (same name-to-hex logic as product swatches). To control exact swatch colors, set them once under Settings → Custom data → Metaobjects → Color — Shopify’s native swatch system; image swatches (patterns/textures) work too.

60-second version: Apps → Search & Discovery → Filters → Add filter → tick Product type, Vendor, Color (and any others) → Save → refresh your collection page. Done.

Sorting

Sorting (price, newest, best-selling, A–Z, etc.) is built in and always available on collection and search pages — no setup needed.

The single-H1 banner

As covered under Collection banner, the banner provides the collection title as the page’s one H1, plus the eyebrow, breadcrumb and description — with adjustable height, padding, alignment and per-device overrides.

Cart & checkout

Choose how the cart behaves, add upsells and gift wrapping, and nudge shoppers toward free shipping — all native.

Cart style

Under Theme settings → Cart → Cart style pick one of:

• Drawer — a slide-out panel; the shopper stays on the page (default).
• Page — a full cart page at /cart.
• Notification — a quick confirmation popup on add, keeping the shopper in flow.

Free-shipping bar

Turn on the free-shipping progress bar and set the threshold (cart_free_ship_threshold). It shows shoppers how much more to add to qualify and fills as they get closer.

Cart upsell

The built-in Upsell engine (cart_upsell_mode) recommends add-ons inside the cart:

• Auto — suggests complementary products automatically.
• Manual — you choose exactly which products to offer.
• Off — no upsells.

For a full cross-sell grid on the cart page (or anywhere), add the Cart — Upsell section (cart-upsell): it shows recommended or fallback-collection products with quick-add and choose-options buttons.

Gift wrapping

Enable gift wrap in the Cart settings to offer an optional paid gift-wrap add-on at checkout. Pair it with order notes (also a Cart toggle) for gift messages.

For a richer, placeable experience, add the Cart — Gift wrapping section (gift-wrapping): it offers a paid gift-wrap product add-on (or a free gift-note checkbox) plus an optional gift-message field with a custom label and placeholder.

Customization & best practices

Colors & fonts

Set brand colors and fonts once in Theme settings — every section inherits them, so the store stays consistent. Prefer the palette presets to get a coherent skin, then adjust the brand red if needed. Leave button colors blank to inherit the accent automatically.

One H1 per page

Each page should have exactly one <h1>. On collections and most pages the banner owns it; on the homepage your hero should carry it. Set every other section’s heading to H2/H3. This is good for SEO and accessibility, and Operator’s sections are built around it.

Image sizes

Always upload at 2× the display size for retina sharpness and let Shopify generate responsive sizes. Keep aspect ratios consistent so grids stay tidy (no layout shift).

Performance tips

• Don’t add external fonts or scripts. Operator self-hosts its fonts; loading Google Fonts or app scripts will slow you down and is unnecessary.
• Use Operator’s native sections instead of apps wherever possible (reviews, FAQ, sliders, countdowns, comparison tables) — fewer third-party requests.
• Compress images before upload; let the first hero image load eagerly and everything below lazy-load (Operator handles this).
• Keep the Advanced custom code fields lean.

Accessibility

Operator targets WCAG AA: visible focus states, ARIA on interactive components, keyboard-operable menus/drawers, and reduced-motion support. To keep it accessible, maintain strong color contrast (be careful if you lighten text or darken the red), write descriptive image alt text, and use real heading levels rather than styling text to look like headings.

Shadow Suite (optional)

Operator is designed to work perfectly on its own. If you also install the optional Shadow Suite app, extra features light up automatically — no theme edits required.

What lights up

• Reviews & ratings — the Reviews section and the product Rating block become fully data-driven, reading real review data from Suite metafields and emitting aggregate-rating structured data.
• Loyalty — a loyalty pill/points display appears (the Suite — Loyalty pill block) when the Suite is active.

How it works

Operator detects the Suite via metafields and the Enable Suite hooks toggle (Theme settings → License). When the app is present, the relevant areas hydrate with live data; when it is absent, those areas gracefully fall back to the theme’s native presentation. If you want the Suite to own structured data, enable Let Shadow Suite handle structured data under SEO to prevent duplicate schema.

Troubleshooting & FAQ

How do I edit a section’s text or images?

Open Customize, pick the page from the top dropdown, click the section in the left panel, and edit its fields. Changes preview live; click Save when done.

A section looks empty or shows placeholders

Most likely it isn’t connected to content yet. Open the section and choose a collection, products, or blog, or add blocks / upload images. Featured-collection and collection-list sections show placeholders until you select a collection.

My color swatches aren’t the right color

Operator maps option names to colors. If a name isn’t a standard color word, set an explicit Shopify swatch (color or image) on that variant in admin so the exact shade displays.

The mega menu isn’t showing

Check three things: (1) Enable mega menu is on under Theme settings → Header; (2) your menu is nested correctly in Navigation (Level 1 → Level 2 columns → Level 3 links); (3) the top-level item is set to open as a mega panel in the Header section.

My homepage looks different from the demo

Demos are specific homepage presets. Select the preset you want from the page dropdown in the editor, then swap in your own images, text and products.

Where do collection filters come from?

From Shopify’s free Search & Discovery app. Install/configure filters there; Operator styles them automatically.

How do I change the cart from a page to a drawer?

Theme settings → Cart → Cart style → choose Drawer, Page, or Notification.

Do I need any apps?

No. Reviews, FAQ rich results, before/after sliders, mega menus, countdowns, wishlists, compare, upsells and more are native. Apps are entirely optional.

How do I apply a different product layout?

Products → open a product → Theme template → pick one of the 22 Operator templates. To preview without assigning, add ?view=template-name to the product URL.

Will the theme slow my store down?

No — that’s the point. Operator self-hosts fonts, uses vanilla JS, lazy-loads media, and avoids external scripts. The fastest setup is to use native sections and avoid adding extra fonts/apps.

Support

We’re here to help you get the most out of Operator.

Support details are placeholders for the store owner to finalize before the Theme Store listing goes live.