Missouri Star Quilt Company (MSQC) Integration

Store Details

Field	Value
Store URL	`https://www.missouriquiltco.com`
Shopify domain	`msqc.myshopify.com`
Account / index	`lebg0row` / `lebg0row-shopify-msqc`
Theme	Custom theme (ID: `164588781603` - preview/unpublished)
Marqo search index	`lebg0row-shopify-msqc` (queried via shop domain in URL: `https://ecom.marqo-ep.ai/api/v1/indexes/shopify-msqc/search` with `x-marqo-index-id` header)
Settings backups	`tmp/integrations/msqc/msqc_settings_2026-06-18T0322Z_post-overlay.json` (most recent post-push snapshot — see "Settings Push History" below for the full timeline)
Storefront API key	(stored separately, not in docs)
Preview URL	`https://www.missouriquiltco.com/?preview_theme_id=164588781603`
DynamoDB table	`prod-ShopifyEntitiesTable` (59 items)
AWS profile	`controller`
Shopify access token	(retrieved from DDB at runtime — see `shopify_graphql.py`)

Status

Current State (2026-06-19)

Search and collection pages are live on the preview theme. The integration moved from "stock Marqo styling" (the 2026-06-03 baseline) to a customised config + Layer 3 CSS that matches several specific aesthetic goals the merchant flagged. Customisation is incremental — driven by merchant requests rather than an attempted full visual parity with the published Algolia theme.

For the pre-customisation context (what the merchant's native theme looks like, screenshot/computed-style audits) see "Native Theme Design Reference" below — that reference is still valid and useful when implementing future tweaks.

What's working with defaults

Search results load correctly (6,495 results for "quilt")
Collection pages load (~50K products in "All")
Filter sidebar visible on collection pages (Product Type, Brand, Price, Tags)
Sale badges rendering (red "SAVE X%")
Image carousels with prev/next arrows
Pagination at bottom
Sort dropdown (Relevance, Best Sellers, Price high/low, New Arrivals, A-Z/Z-A)
Filter mode: sidebar (inline on desktop, drawer on mobile at 768px breakpoint)

Third-party integrations detected

Algolia -- Existing Algolia instant search app is installed and throwing CSS selector errors (Instant search CSS selector is incorrect). This is a non-blocking error from their old integration.
Facebook Pixel -- Connection refused errors (blocked in Playwright, non-issue)
Trustpilot -- Script loaded via settings (widget.trustpilot.com)
Okendo -- Product reviews configured but currently disabled
Promotional popup -- "Try Your Luck" wheel popup appears on page load (from a third-party app, not Marqo)

Current settings snapshot

Columns: 4 desktop / 3 tablet / 2 mobile
Image ratio: 1:1
Card border: 1px #e2e8f0, radius 8px
Card hover: shadow effect
Price colors: Regular #059669 (green), Sale #dc2626 (red), Compare-at #9ca3af (grey strikethrough)
Title: 14px, weight 600, color #1e293b
Vendor: 12px, weight 500, color #64748b, uppercase
CTA: Disabled. Config: "Shop Now", navigate behavior, black bg, always display
Sale badge: Red #dc2626, white text, top-left, radius 4
Pagination: Paging mode, 24 items per page
Filter items: productType, productVendor (Brand), price (range), productTags
Swatches: Disabled
Instant search: Disabled
Reviews (Okendo): Disabled
Wishlist (Swym): Disabled

Customization Progress (2026-06-10 → 2026-06-19)

This section reflects the live state of the integration AFTER the 2026-06-03 baseline above. Many of these items shipped as code in addition to settings pushes; the original CSS task list below is preserved as a reference but is not the active workplan.

Code PRs shipped

PR	Title	Note
#3466	fix: deliver price multiplier to FilterSidebar via provide/inject	P0 chip multiplier root cause
#3467	feat: tag_namespacing — `productTagNs<key>` fields from separator-bearing tags	Backend + initial UI
#3468	feat: per-template heading visibility, color, alignment on marqo-results block	Heading toggle
#3475	fix: multiply active-filter chip range values by price multiplier	Cherry-pick of chip fix
#3483	fix: move tag_namespacing card to settings page	Standalone UI component
#3492	fix: render TagNamespacingConfiguration for shops with pre-existing settings	Defensive render fix
#3791	feat: redirect empty search to merchant-configured query	App-block setting `empty_search_default_query` (default `*`)
#3861	feat: max-facets-per-section render-time cap	Global default 100 + app-block override `max_facets_per_section`
#3868	feat: per-facet within-OR / between-AND filter mode (opt-in disjunctive)	Per-facet `facetMode: "narrowing" \| "disjunctive"`, default narrowing
#3880	fix: send limit:1 (not 0) on disjunctive facet requests	Marqo rejects `limit:0` with HTTP 400; without this fix #3868 silently fell back to narrowing

Settings pushed to MSQC (production)

Live shop: msqc.myshopify.com (account lebg0row, index lebg0row-shopify-msqc). Storefront admin API: https://admin.ecom.marqo.ai/api/v1/storefront/shops/msqc.myshopify.com/settings

Operationally significant changes:

Tag namespacing — card enabled with separator : (with surrounding spaces). Splits tags like Brand : Aurifil into productTagNsbrand: ["Aurifil"].
13 productTagNs facet filters* added to filter_config.items to mirror LG's native sidebar — all enabled: true. Existing productVendor and productType filters relabeled to "Supplier (legacy)" and "Product Type (legacy)" + disabled to avoid collision.
Per-template heading toggles pushed to 9 collection templates (3 hidden, 6 visible). Replaced MSQC's prior Layer 3 heading hider.
Price multiplier = 4 on all marqo-search-embed blocks (9 total).
OOS treatment in Layer 3 custom_css:
- "CURRENTLY UNAVAILABLE" full-width orange-on-white band overlaid at vertical center of the product image when [data-out-of-stock="true"] is set on .marqo-product-card.
- Light gray wash (rgba(243, 244, 246, 0.5)) overlay across the image to match merchant's live Algolia design.
- Bundle already emits data-out-of-stock="true" automatically (ProductCard.ts:1251) when stock_display.value.mode = "show_all" and product.stockTotal <= 0. MSQC's index has 3,745 products in this state — surfaced mostly on result-set tails due to the OOS score-modifier bury.
filter_config.defaultVisibility.search flipped from "hidden" → "visible" (autoshow filters on the search page).
Heading visibility / color / alignment configured per-template via app-block data-* attributes from PR #3468.
filter_config.maxFacetsPerSection: 10 — global render-time cap (PR #3861's default of 100 was kept for other merchants; MSQC explicitly set 10).
Disjunctive (Algolia-style) faceting on 4 facets — facetMode: "disjunctive" set on:
- productTagNsbrand (Brand)
- productTagNsdesigner (Designer)
- productTagNscolor (Color)
- productTagNsmaterial (Material)
Within each of these facets, selecting one value preserves the other options as visible and clickable (so the shopper can OR more values into the selection); the other 9 categorical facets stay in the default narrowing mode. The 4 disjunctive facets cost 1 extra Marqo request per filter click for each one that has an active selection — verified live with both single- and multi-select cases.

Settings push history

Backups at tmp/integrations/msqc/:

File	Captured	Note
`msqc_settings_2026-06-10T1148.json`	Pre-namespacing rollout	Baseline before tag_namespacing card
`msqc_settings_2026-06-11T1205.json`	Pre 13-facet push	Rollback snapshot
`msqc_settings_2026-06-11T1239_post-tagns-push.json`	Post namespacing + 13-facet push	Live state at end of namespacing rollout
`msqc_settings_2026-06-18T0304Z_pre-banner.json`	Pre OOS-banner / filter-autoshow	Baseline before 2026-06-18 changes
`msqc_settings_2026-06-18T0308Z_post-banner.json`	Post banner CSS + autoshow flip	Intermediate state
`msqc_settings_2026-06-18T0322Z_pre-overlay.json`	Pre image-overlay	Fresh fetch before overlay push
`msqc_settings_2026-06-18T0322Z_post-overlay.json`	Post overlay push	Banner + overlay + autoshow + namespacing
`msqc_settings_2026-06-19T0313Z_pre-facets-cap.json`	Pre `maxFacetsPerSection: 10` push	Captured immediately before 2026-06-19 changes
`msqc_settings_2026-06-19T0313Z_post-facets-cap.json`	Post facets-cap push	Adds `maxFacetsPerSection: 10`
`msqc_settings_2026-06-19T0401Z_pre-disjunctive.json`	Pre disjunctive push	Snapshot before flipping 4 facets to disjunctive
`msqc_settings_2026-06-19T0401Z_post-disjunctive.json`	Current live state	Adds `facetMode: "disjunctive"` on Brand / Designer / Color / Material

Always fetch → mutate → POST. Never partial updates. Always show the diff to the human before pushing.

Reindex history

Bulk Shopify export 2026-06-10: 3,231,332 objects / 4.92 GB
Marqo ingest: 102,608 total / 102,582 processed (99.97%) / 26 oversize doc failures
Job 37348e62-ed69-4004-b3f3-1a902b56807b on lebg0row-shopify-msqc, completed 2026-06-11T01:19:04Z
All 13 productTagNs* fields verified populated on samples via search proxy

QA verified end-to-end

All 13 facets pass 4 criteria each (presence / values populate / filter applies / chip clears) on the Marqo preview theme at /search?q=quilt and a sample collection page.
Width facet values with embedded quotes (44"/45") URL-encode correctly.
Sidebar facet order matches native: Price → Brand → Designer → Collection → Shop By → Product Type → Theme → Color → Material → Style → Width → Size → Skill Level → Finish.
Empty-search redirect verified live on all 4 variants (/search, /search?q=, /search?q=%20%20%20, /search?q=fabric).
OOS banner + overlay verified live on real OOS products (page 19 of ?q=fabric is 24/24 OOS because of the relevance-score bury — easiest verification path).
maxFacetsPerSection: 10 verified live: long facets (Brand, Designer, Collection, Shop By, Product Type, Theme, Color, Material, Style, Size) all show exactly 10 options; short facets (Width=4, Skill Level=4, Finish=1) unaffected.
Disjunctive faceting verified live on Brand (productTagNsbrand) with single-select (other brands stay clickable, 1 extra Marqo request fires) and multi-select (Ackfeld + Maywood → 549 results = OR-union, both checked, others still clickable).

Likely follow-ups

26 oversize-doc failures — needs per-product investigation (huge descriptions / many variants / large metafield blobs) and a per-doc trim policy.
Publish the Marqo theme 164588781603 to live — pending merchant approval.
Bundle's built-in OOS title strikethrough not firing on MSQC's cards — selector-class mismatch with our Layer 3 overlay. Separate small investigation.

Viewing Published vs. Marqo Theme

The published (live) theme and the Marqo preview theme are separate. To switch between them in a browser:

Marqo theme (unpublished): https://www.missouriquiltco.com/?preview_theme_id=164588781603
Published theme (Algolia, native cards): https://www.missouriquiltco.com/?_ab=0&_fd=0&_sc=1&preview_theme_id=162016165923

The Shopify preview session is sticky (persists via server-side HttpOnly cookies). Clearing JS-accessible cookies or localStorage does not reset it. To switch themes, you must explicitly navigate with the preview_theme_id parameter for the other theme.

Published theme: shopify-themes-2.0/prod-live (Dawn 12.0.0), ID 162016165923, role main
Marqo theme: June 3, 2026 | MSQC <> Marqo (Dawn 12.0.0), ID 164588781603, role unpublished

The published theme currently uses Algolia for search and collection pages. All native styling references below are from the Algolia-rendered components on the published theme.

Theme Inspection Approach

To verify or update the design reference below, use these methods:

Playwright screenshots — Navigate to the published theme (preview_theme_id=162016165923) and take screenshots. Visually compare against the Marqo theme.
Playwright browser_evaluate — Extract computed styles from native elements (fonts, colors, borders, spacing) via getComputedStyle().
Shopify GraphQL — Query the theme's settings_data.json for CSS variables and font declarations:

{
  theme(id: "gid://shopify/Theme/162016165923") {
    name
    role
    files(first: 10, filenames: ["config/settings_data.json"]) {
      edges {
        node {
          filename
          body
        }
      }
    }
  }
}

Use shopify_graphql.py which retrieves the access token from DDB automatically (see Tooling Reference).

Native Theme Design Reference

Extracted from the published theme via Playwright computed style inspection and visual screenshot analysis. Agents: always verify these values by taking your own screenshots and inspecting the live published theme -- don't blindly trust this reference. Check for details we may have missed (border-radius, horizontal rules, hover states, spacing, transitions, etc.).

Global Typography

Token	Value
Body font	`Montserrat, sans-serif`
Body size	`16px`
Body weight	`400`
Body color	`rgba(18, 18, 18, 0.75)`
Body line-height	`24px`
Heading font	`Montserrat, sans-serif`
Heading weight	`400` (CSS var), `700` on collection headings
Link color	`rgba(18, 18, 18, 0.75)`
Link decoration	`none`

Theme CSS variables: --font-body-family: Montserrat, sans-serif, --font-heading-family: Montserrat, sans-serif

Brand Colors

Color	Value	Usage
Teal/green	`rgb(10, 168, 143)` / `#0aa88f`	Nav text, sort dropdown border, filter accents, dotted separators
Orange/coral	`rgb(244, 130, 88)` / `#f48258`	CTA "add to cart" button, sale prices
Black	`rgb(0, 0, 0)`	Headings, pagination links
Dark grey	`rgba(18, 18, 18, 0.75)`	Body text, links
Medium grey	`#636363` / `rgb(99, 99, 99)`	Facet option labels
Light grey	`#707070` / `rgb(112, 112, 112)`	Sort text, facet counts, stats text
Facet header grey	`#757575` / `rgb(117, 117, 117)`	Filter section headings
Border grey	`#e5e7eb` / `rgb(229, 231, 235)`	Card image borders, general borders
White	`#ffffff`	Backgrounds, CTA button text

Page Heading

Property	Value
Font	`Montserrat, sans-serif`
Size	`25px`
Weight	`700`
Color	`rgb(0, 0, 0)`
Alignment	`left`
Text-transform	`none`
Letter-spacing	`0.6px`

Product Cards (Native Algolia)

Card container:

No border, no border-radius, no box-shadow, no padding, transparent background
Cards are borderless -- just image + text stacked vertically

Image:

2px solid #e5e7eb border on <figure> element
5px padding inside the figure
border-radius: 0px (square corners)
overflow: hidden
Square aspect ratio (1:1)

Title:

Below image
Montserrat, sans-serif, normal weight (400), dark color
No text-transform, standard line-height

Price:

Sale/current price: orange/coral rgb(244, 130, 88) / #f48258
Compare-at price: grey, strikethrough
No "SAVE X%" badge -- the native theme does NOT show sale badges

Reviews:

Gold star rating + count text shown between title and price

Hidden on native cards:

No vendor text
No sale badge
No variant title
No collection tags

CTA button (hover-only):

Text: add to cart (lowercase via text, uppercase via CSS)
Background: rgb(244, 130, 88) / #f48258 (orange)
Color: white
Border-radius: 9999px (full pill)
Font: Montserrat, sans-serif, 11.25px, weight 400
Text-transform: uppercase
Padding: 5px 15px
Appears on hover, centered over image

Facet headers:

Font: Montserrat, sans-serif, 15.2px, weight 400
Color: #757575 (grey)
Text-transform: uppercase
Dotted teal/green (#0aa88f) horizontal line below headers

Facet labels (checkbox options):

Font: Montserrat, sans-serif, 16px, weight 400
Color: #636363

Facet counts:

Font: 16px
Color: #707070
No background, no border-radius (inline text)

General:

Background: transparent
Font: Montserrat, sans-serif throughout
Teal/green accent color for active states and decorative elements

Pagination (Native Algolia)

Container:

text-align: center (pagination list centered)
padding: 32px 0, margin: 0 0 32px

Inactive page buttons:

Color: rgb(0, 0, 0) (black)
Background: rgb(247, 250, 252) (very light grey)
Border: 1px solid rgb(226, 232, 240)
Border-radius: 2.5px
Width: 32px, height: 32px, text-align: center
Margin: 0 5px
Weight: 400, size: 16px

Active/selected page:

Color: rgb(255, 255, 255) (white)
Background: rgb(244, 130, 88) (orange/coral -- NOT teal)
Border: 1px solid rgb(226, 232, 240)
Border-radius: 2.5px
Weight: 400, size: 16px

Next/prev arrows:

Color: rgb(244, 130, 88) (orange), 16px
Uses « ‹ › » symbols

Disabled prev/next:

visibility: hidden (completely hidden, not greyed out)

Navigation pattern: « ‹ 1 2 3 4 5 › »

Property	Value
Font	`Montserrat, sans-serif`
Size	`13.6px`
Weight	`400`
Border	`1px solid rgb(10, 168, 143)` (teal)
Border-radius	`4px`
Color	`rgb(112, 112, 112)` (grey)
Background	`#ffffff`
Padding	`0px 30px 0px 5px`

Results Count (Native Algolia)

Text: "1 - 42 of 1,255 results"
Font: Montserrat, sans-serif, 13.6px
Color: #707070

Layout & Spacing

Token	Value
Page max-width	`130rem` (`--page-width`)
Grid desktop gap	`8px` (`--grid-desktop-horizontal-spacing`)
Grid mobile gap	`4px` (`--grid-mobile-vertical/horizontal-spacing`)
Product card image padding	`0rem`
Product card corner radius	`0rem`
Product card text alignment	`left`
Product card border width	`0rem`
Product card shadow	none
Buttons border-radius	`0px`
Buttons border-width	`1px`
Inputs border-radius	`0px`
Navbar height	`~100px`

Transitions & Animations

Token	Value
`--duration-short`	`100ms`
`--duration-default`	`200ms`
`--duration-medium`	`300ms`
`--duration-long`	`500ms`

CSS Customization Tasks

All CSS goes into custom_css.value.css (Layer 3). Follow the sectioned format from the Storefront CSS Customization Guide. Use the Muji CA backup (tmp/muji_ca_settings_2026-05-29T1527.json, extract uiComponents.custom_css.value.css) as a format reference.

Important for agents: Before writing CSS, navigate to the published theme (preview_theme_id=162016165923) and take screenshots of the component you're styling. Visually inspect for any styling details not captured in the design reference above -- border-radius, horizontal rules/dividers, hover states, focus states, spacing, transitions, shadows, opacity, etc. The reference above is a starting point, not exhaustive.

Task 1: Product Cards + Grid

Scope: .marqo-product-card, .marqo-results-grid, image, title, price, badges, CTA, carousel

What to change:

Strip card border, border-radius, box-shadow, background (native cards are borderless)
Image container: 2px solid #e5e7eb border, 5px padding, border-radius: 0px
Title: Montserrat, weight 400 (currently 600), appropriate color
Price: change sale color from red #dc2626 to orange #f48258, regular price to black/dark
Compare-at price: grey strikethrough (keep current behavior)
Hide: .marqo-vendor, .marqo-sale-badge, .marqo-variant-title, .marqo-collections
CTA button: orange #f48258, white text, pill shape (border-radius: 9999px), uppercase, hover-only display, centered over image
Grid gap: 8px to match native --grid-desktop-horizontal-spacing
Carousel arrows: decide whether to keep or hide (native shows image swap on hover, not arrows)

Scope: .marqo-filter-sidebar, .marqo-filter-header, .marqo-filter-section, .marqo-filter-option, .marqo-filter-toggle, active filters, mobile drawer

What to change:

Facet section headers: Montserrat, 15.2px, weight 400, color #757575, uppercase
Add dotted teal (#0aa88f) separator line below filter headers (this is a distinctive MSQC native element)
Facet option labels: Montserrat, 16px, weight 400, color #636363
Facet counts: 16px, color #707070, no background pill
Filter toggle button: style with teal accent
Clear All button: match theme button styling
Active filter pills: use teal accent color
Accordion caret: match native expand/collapse icon style
Mobile drawer offset: top: 100px (navbar height ~100px)
Check for any green background on filter sections (visible in screenshot)

Task 3: Pagination + Sort + Results Count

Scope: .marqo-pagination, .marqo-sort-dropdown, .marqo-results-count

What to change:

Pagination buttons: 32x32 squares, light grey bg #f7fafc, 1px solid #e2e8f0 border, 2.5px radius
Active page: orange rgb(244, 130, 88) background with white text (verified from computed styles)
Inactive pages: black text, weight 400, 16px, light grey background
Disabled prev/next: visibility: hidden (native hides them entirely)
Sort dropdown: 1px solid #0aa88f (teal border), border-radius: 4px, 13.6px, grey text #707070
Sort label: native says "Sorted by" (Marqo default is "Sort by:")
Results count: Montserrat, 13.6px, color #707070
Results count format: "1 - 42 of 1,255 results" style
Items-per-page: hide (native does not show this)

Task 4: Page Heading + Collection Page + Misc

Scope: .marqo-page-heading, .marqo-collection-header, .marqo-search-layout, miscellaneous elements

What to change:

Page heading: Montserrat, 25px, weight 700, black, left-aligned, letter-spacing: 0.6px
Collection title: same styling as page heading
Search page heading: may differ slightly (verify)
Results header layout: spacing, alignment
Loading/error/no-results states: match theme fonts and colors
Any remaining elements that look out of place vs. the native theme

Notes

The Algolia instant search app is still installed and throws console errors. This doesn't affect Marqo functionality but the merchant may want to disable it to avoid confusion and reduce page load overhead.
The promotional popup ("Try Your Luck" wheel) overlays on top of everything including the Marqo UI. This is a third-party app and not something we control.
The store has a complex category navigation with icons (Daily Deal, Precut Fabrics, Fabric, Notions, Watch, Sales, Visit Shops).
Okendo reviews and Swym wishlist are configured in settings but disabled. These can be enabled later if the merchant wants them on PLP cards.

Missouri Star Quilt Company (MSQC) Integration

Store Details

Status

Current State (2026-06-19)

What's working with defaults

Third-party integrations detected

Current settings snapshot

Customization Progress (2026-06-10 → 2026-06-19)

Code PRs shipped

Settings pushed to MSQC (production)

Settings push history

Reindex history

QA verified end-to-end

Likely follow-ups

Viewing Published vs. Marqo Theme

Theme Inspection Approach

Native Theme Design Reference

Global Typography

Brand Colors

Page Heading

Product Cards (Native Algolia)

Filter Sidebar (Native Algolia)

Results Count (Native Algolia)

Layout & Spacing

Transitions & Animations

CSS Customization Tasks

Task 1: Product Cards + Grid

Task 2: Filter Sidebar

Task 4: Page Heading + Collection Page + Misc

Notes

Store Details​

Status​

Current State (2026-06-19)​

What's working with defaults​

Third-party integrations detected​

Current settings snapshot​

Customization Progress (2026-06-10 → 2026-06-19)​

Code PRs shipped​

Settings pushed to MSQC (production)​

Settings push history​

Reindex history​

QA verified end-to-end​

Likely follow-ups​

Viewing Published vs. Marqo Theme​

Theme Inspection Approach​

Native Theme Design Reference​

Global Typography​

Brand Colors​

Page Heading​

Product Cards (Native Algolia)​

Filter Sidebar (Native Algolia)​

Pagination (Native Algolia)​

Sort Dropdown (Native Algolia)​

Results Count (Native Algolia)​

Layout & Spacing​

Transitions & Animations​

CSS Customization Tasks​

Task 1: Product Cards + Grid​

Task 2: Filter Sidebar​

Task 3: Pagination + Sort + Results Count​

Task 4: Page Heading + Collection Page + Misc​

Notes​

Store Details

Status

Current State (2026-06-19)

What's working with defaults

Third-party integrations detected

Current settings snapshot

Customization Progress (2026-06-10 → 2026-06-19)

Code PRs shipped

Settings pushed to MSQC (production)

Settings push history

Reindex history

QA verified end-to-end

Likely follow-ups

Viewing Published vs. Marqo Theme

Theme Inspection Approach

Native Theme Design Reference

Global Typography

Brand Colors

Page Heading

Product Cards (Native Algolia)

Filter Sidebar (Native Algolia)

Pagination (Native Algolia)

Sort Dropdown (Native Algolia)

Results Count (Native Algolia)

Layout & Spacing

Transitions & Animations

CSS Customization Tasks

Task 1: Product Cards + Grid

Task 2: Filter Sidebar

Task 3: Pagination + Sort + Results Count

Task 4: Page Heading + Collection Page + Misc

Notes