Yarn (yarn.com) Integration

Store Details

Field	Value
Store URL	https://www.yarn.com
Shopify domain	yarndev.myshopify.com
Published theme	ID: 189670850906 (native/live)
Marqo theme	ID: 193577189722 (preview/unpublished)
Marqo index	lebg0row-shopify-feamu9-1k
Pixel customer ID	4dd951f4-14fd-4911-afa8-4e3b945c84fa
Parent account	lebg0row (MSQC account)
Storefront shop ID	lebg0row-shopify-feamu9-1k (index name, used for settings API)
Storefront API key	(same as MSQC — lebg0row account key)
Preview URL (Marqo)	https://www.yarn.com/?preview_theme_id=193577189722
Preview URL (Native)	https://www.yarn.com/?preview_theme_id=189670850906
DynamoDB table	prod-ShopifyEntitiesTable
AWS profile	controller
Shopify access token	(retrieved from DDB at runtime — see shopify_graphql.py)

Status

• Index created and populated (lebg0row-shopify-feamu9-1k)
• Pixel onboarded (PR #470, #471 merged)
• Purchase pixel installed on Shopify
• App embed enabled (on Marqo theme)
• App blocks inserted (search + collection templates)
• Settings exist in DynamoDB
• Search page functional
• Collection page functional
• Product card CSS matched to theme
• Filter sidebar CSS matched to theme (Yarn Weight, Fibers, Price, Brand, Craft, Characteristics via Akeneo metafields)
• Pagination CSS matched to theme
• Sort dropdown CSS matched to theme
• Page heading / typography matched (Playfair Display, #5d4a66, coral separator)
• Sale badges reviewed and adjusted (text: "SALE", bg: #e01e4f)
• CTA button configured (always display, black bg — matches native)
• Price display colors adjusted (regular: black, sale: #e01e4f, compare-at: #747474 strikethrough)
• Mobile responsive verified
• Collection page layout verified
• Search page layout verified
• Settings backed up (post-customization)
• Swym wishlist integration enabled (app needs verification)

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.yarn.com/?preview_theme_id=193577189722
• Published theme (native): https://www.yarn.com/?preview_theme_id=189670850906

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.

Relationship to MSQC

Yarn is a separate brand under the same Marqo system account (lebg0row) as Missouri Star Quilt Company. They share the same account infrastructure but have independent indexes, pixel configs, and storefront themes.

Reference: MSQC Integration for the sister store's setup.

Theme Inspection Approach

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

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

{
  theme(id: "gid://shopify/Theme/189670850906") {
    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 2026-06-15 via Chrome inspection of published theme (preview_theme_id=189670850906).

Global Typography

Token	Value
Body font	"Source Sans 3", sans-serif
Body size	18px (base)
Body weight	400
Body color	rgb(51, 51, 51) / #333333
Heading font	"Playfair Display", serif
Heading weight	700
Heading color	rgb(93, 74, 102) / #5d4a66 (muted purple)
Subtitle/description color	rgb(33, 15, 41) / #210f29 (deep plum)

Brand Colors

Color	Value	Usage
Primary purple	rgb(146, 78, 167) / #924ea7	Filter toggle button, "See more" links, accent
Heading purple	rgb(93, 74, 102) / #5d4a66	Page headings (Playfair Display)
Accent/separator	rgb(255, 107, 107) / #ff6b6b	3px bottom border under collection header
Sale/badge	rgb(224, 30, 79) / #e01e4f	Sale badge bg, sale price text
Text dark	rgb(51, 51, 51) / #333	Body text, titles
Text plum	rgb(33, 15, 41) / #210f29	Subtitles, descriptions
Border/light	rgb(216, 212, 218) / #d8d4da	Borders, dividers, checkbox borders
Compare-at grey	rgb(116, 116, 116) / #747474	Strikethrough compare-at price

Product Cards (Native)

Element	Styles
Card container	Transparent bg, no border, no shadow, no radius. Flex column, gap 16px
Grid (no filters)	6 columns, ~175px each, 40px gap, container ~1248px
Grid (with filters)	5 columns, ~162px each, 40px gap, container ~968px
Image	aspect-square, overflow hidden, no border-radius, no border
Title	Source Sans 3, 18px, 600, #333, line-clamp-3, no text-transform
Subtitle	Source Sans 3, 14px, 400, #210f29 (e.g., "Downloadable PDF, English")
Product description	Source Sans 3, 14px, 400, #210f29, line-height 20px (e.g., "100% Wool, 219yds...")
Regular price	Source Sans 3, 18px, 700, black
Sale price	Source Sans 3, 18px, 700, #e01e4f (raspberry)
Compare-at price	Source Sans 3, 12px, 400, #747474, line-through
Sale badge	"SALE", 14px, 600, white on #e01e4f, no border-radius, padding 2px 12px, top-left position
Options badge	On image bottom-right, e.g., "200 options"
Wishlist heart	Positioned top-right of card image area (Swym)
Hover	No explicit hover shadow or border observed; cursor changes

Filter Sidebar (Native)

Element	Styles
Filter toggle button	"Filter / Hide", Source Sans 3, 16px, 600, white text, #924ea7 purple bg, 2px solid #924ea7 border, 4px radius
Filter heading	<summary> accordion, Source Sans 3, 18px, 400, black, chevron icon
Filter option label	Source Sans 3, 18px, 400, black, cursor pointer
Checkbox	24x24px, 2px solid #d8d4da border, square (no radius)
"See more" link	Source Sans 3, 18px, 600, #924ea7 purple, underline
Section separator	Between facet groups (Yarn Weight, Fibers, etc.)
Sidebar width	~250-280px (inferred from grid delta: 1248 - 968 = 280px)

Pagination (Native)

Element	Styles
Container	Flex, space-between, padding 32px 0
Prev button (disabled)	"←", Source Sans 3, 18px, 400, #333, bg #d8d4da, border 1px solid #d8d4da, pill-shaped (huge border-radius), opacity 0.4
Next button	"Next Page →", Source Sans 3, 18px, 400, #333, transparent bg, border 1px solid #d8d4da, pill-shaped, padding 4px 16px
Page indicator	"1 of 500", textBlack class, right-aligned
Layout	← on left, "Next Page →" centered, page indicator on right

Sort Dropdown (Native)

Element	Styles
Select	Source Sans 3, 14px, 400, black, transparent bg
Border	1px solid #d8d4da, radius 6px
Size	Height 42px, padding 4px 12px
Label	"Sort by:", Source Sans 3, 14px, 600, #333

Results Count (Native)

Element	Styles
Text	Source Sans 3, 14px, 400, #333
Format	"1-50 of 25001 items"

Page Heading (Native)

Element	Styles
Heading	Playfair Display serif, 48px, 700, #5d4a66 (muted purple), left-aligned
Margin-bottom	28px
Separator	3px solid #ff6b6b (coral red) bottom border on .collection-header__container
Breadcrumbs	Source Sans 3, pipe "
Collection image	Circular, left of heading on collection pages
Collection description	Source Sans 3, below heading, #210f29 text

Navigation Bar (Native)

Element	Styles
Bar	Dark bg, full-width
Links	"Yarn", "Patterns", "Knitting", "Crochet", "Weaving", "Sale", "Learning"
"All" button	Hamburger menu icon + "All" text

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 MSQC doc (msqc.md) as a structural reference.

Important for agents: Before writing CSS, navigate to the published theme (preview_theme_id=189670850906) and take screenshots of the component you're styling. Visually inspect for any styling details not captured in the design reference above.

Task 1: Product Cards + Grid

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

Task 2: Filter Sidebar

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

Task 3: Pagination + Sort + Results Count

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

Task 4: Page Heading + Collection Page + Misc

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

Notes

• Yarn is a quilting/yarn/fabric store -- similar product vertical to MSQC but distinct branding.
• Pixel is onboarded under the MSQC account with its own pixel customer ID.
• Website pixel PR #471 merged; purchase pixel installed 2026-06-05.