Laura Geller — Theme Settings

Customer: Laura Geller Website: https://www.laurageller.com Date: 2026-04-14 (updated with live site analysis) Theme: Custom — Brandon Grotesque body, Minion 3 Display headings, dark maroon accent Typekit Kit: pdz7iln (@import url("https://use.typekit.net/pdz7iln.css"))

Font Stack

Laura Geller loads fonts via Adobe Typekit:

Body: brandon-grotesque, sans-serif (weights 100–900)
Headings: minion-3-display, sans-serif (weights 400–700)

Product card text uses the body font (brandon-grotesque, weight 400).

Production: Set fontFamily: "inherit" everywhere — the Marqo widget inherits brandon-grotesque from their theme.

Dev store workaround: Their Typekit kit is domain-locked to laurageller.com. On dev stores, load Raleway (closest Google Fonts match) via Custom CSS @import and override font-family. Remove the override when deploying to their real store.

Product Display

Marqo Setting	Value	Source
`imageRatio`	`1:1`	`--product-card-image-padding: 0rem`
`cardBorderRadius`	`0`	`--product-card-corner-radius: 0.0rem`
`cardBorderWidth`	`0`	`--product-card-border-width: 0.0rem`
`cardBorderColor`	`#e2e8f0`	(unused — border width is 0)
`cardBackgroundColor`	`#ffffff`	transparent cards, image bg is #f3f3f3
`cardShadow`	`none`	`--product-card-shadow-opacity: 0.0`
`cardHoverEffect`	`none`	no hover effect observed
`columnSpacing`	`16`	`--grid-desktop-horizontal-spacing: 16px`
`cardContentSpacing`	`8`	tight spacing below image
`columns.desktop`	`4`	4-column grid
`columns.tablet`	`2`
`columns.mobile`	`2`
`alignment`	`left`	left-aligned text

Price Display

Marqo Setting	Value
`priceDisplay.salePriceColor`	`#93021a`
`priceDisplay.compareAtPriceColor`	`#666666`
`priceDisplay.showCompareAtPrice`	`true`

Text Styles

Group	fontFamily	fontSize	fontWeight	color	Notes
vendor	`inherit`	`0` (hidden)	`500`	`#64748b`	Hidden via fontSize 0 + CSS
title	`inherit`	`14`	`400`	`#0c0c0c`	Brandon Grotesque, light weight
price	`inherit`	`14`	`400`	`#93021a`	Same light weight as titles
variant	`inherit`	`0` (hidden)	`400`	`#9ca3af`	Hidden
collections	`inherit`	`0` (hidden)	`400`	`#b0b8c4`	Hidden

Note: Laura Geller uses weight 400 for product titles and prices — lighter than our defaults. The font size is also smaller (14px) for both.

Sale Badge

Marqo Setting	Value
`saleBadge.enabled`	`true`
`saleBadge.position`	`top-left`
`saleBadge.backgroundColor`	`#93021a`
`saleBadge.textColor`	`#ffffff`
`saleBadge.borderRadius`	`0`
`saleBadge.textFormat`	`SAVE {percent}%`

CTA Button

Marqo Setting	Value
`cta.enabled`	`true`
`cta.behavior`	`navigate`
`cta.buttonText`	`SHOP NOW`
`cta.backgroundColor`	`#000000`
`cta.textColor`	`#ffffff`
`cta.borderColor`	`#000000`
`cta.borderWidth`	`1`
`cta.borderRadius`	`0`
`cta.fullWidth`	`true`

Reviews

Marqo Setting	Value
`productReviews.enabled`	`true`
`productReviews.provider`	`okendo`
`productReviews.starColor`	`#c8a000`
`productReviews.starSize`	`14`
`productReviews.textColor`	`#0c0c0c`
`productReviews.showCount`	`true`

Filters

Marqo Setting	Value
`filters.filterMode`	`sidebar`
`filters.iconStyle`	`chevron`
`filters.showProductCount`	`true`
`filters.styling.backgroundColor`	`#ffffff`
`filters.styling.textColor`	`#0c0c0c`
`filters.styling.textFontSize`	`14`
`filters.styling.textFontWeight`	`400`
`filters.styling.separatorColor`	`#e0e0e0`
`filters.styling.activeIndicatorColor`	`#0c0c0c`
`filters.styling.buttonBackgroundColor`	`#ffffff`
`filters.styling.buttonTextColor`	`#0c0c0c`
`filters.styling.buttonBorderColor`	`#e0e0e0`

Sorting

Marqo Setting	Value
`sorting.enabled`	`true`
`sorting.defaultSort`	`relevance`
`sorting.dropdownStyling.backgroundColor`	`#ffffff`
`sorting.dropdownStyling.borderColor`	`#e0e0e0`
`sorting.dropdownStyling.textColor`	`#0c0c0c`

Pagination

Marqo Setting	Value
`pagination.mode`	`paging`
`pagination.itemsPerPage`	`24`
`pagination.showPerPageDropdown`	`false`
`pagination.dropdownStyling.backgroundColor`	`#ffffff`
`pagination.dropdownStyling.borderColor`	`#e0e0e0`
`pagination.dropdownStyling.textColor`	`#0c0c0c`

Layout

Marqo Setting	Value
`layout.showSearchBar`	`false`
`layout.pageTitleTemplate`	`{count} results found for "{term}"`
`layout.resultsCountStyle.fontFamily`	`inherit`
`layout.resultsCountStyle.fontSize`	`14`
`layout.resultsCountStyle.fontWeight`	`400`
`layout.resultsCountStyle.color`	`#0c0c0c`

States

Marqo Setting	Value
`states.loading.enabled`	`true`
`states.error.enabled`	`true`
`states.noResults.enabled`	`true`

Selectors

Marqo Setting	Value
`selectors.embedElement`	`#MainContent, #main-content, #main, main`

Custom CSS Overrides

These are styling details that can't be achieved with knobs alone.

For production (on laurageller.com — font inherits from theme):

/* Hide vendor, variant title, and collections */
.marqo-vendor, .marqo-variant-title, .marqo-collections { display: none !important; }

/* Card — no border, transparent content area, image bg matches their grey */
.marqo-product-card { border: none !important; box-shadow: none !important; background: transparent !important; }
.marqo-product-card-image { background: #f3f3f3 !important; }
.marqo-product-card-content { padding: 10px 0 0 0 !important; background: transparent !important; }

/* Title — light weight matching brandon-grotesque 400 */
.marqo-product-card h3 { font-weight: 400 !important; line-height: 140% !important; letter-spacing: 0 !important; }

/* Price — light weight */
.marqo-price, .marqo-price-sale, .marqo-price-compare { font-weight: 400 !important; }
.marqo-price-compare { text-decoration: line-through !important; color: #888 !important; }

/* Stars — amber/gold */
.marqo-stars-fg { color: #c8a000 !important; }
.marqo-stars-bg { color: #e0d6b8 !important; }
.marqo-review-count { color: #666 !important; font-size: 12px !important; }

/* Sale badge — compact, square */
.marqo-sale-badge { text-transform: uppercase !important; font-size: 11px !important; font-weight: 500 !important; padding: 4px 6px !important; line-height: 1 !important; }

/* CTA button — uppercase, clean */
.marqo-cta-button { text-transform: uppercase !important; font-weight: 500 !important; font-size: 12px !important; letter-spacing: 1.5px; padding: 12px 8px !important; margin-top: 6px !important; }

/* Carousel arrows — always visible, no bg */
.marqo-carousel-prev, .marqo-carousel-next { opacity: 1 !important; background: none !important; border: none !important; box-shadow: none !important; color: #0c0c0c !important; font-weight: 300 !important; }
.marqo-product-card-image .marqo-carousel-prev, .marqo-product-card-image .marqo-carousel-next { display: flex !important; opacity: 1 !important; }

/* Filter sidebar — compact, uppercase titles */
.marqo-filter-header h3 { font-size: 14px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px; }
.marqo-filter-section-title { text-transform: uppercase !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.5px; }
.marqo-filter-section { padding: 10px 0 !important; }
.marqo-filter-option-input { padding: 4px 0 !important; border-radius: 0 !important; min-height: 28px !important; }
.marqo-filter-option-input:hover { background: transparent !important; }
.marqo-filter-accordion { border-bottom: 1px solid #e0e0e0 !important; }
.marqo-filter-accordion:last-child { border-bottom: none !important; }

/* Pagination — square */
.marqo-pagination-button { border-radius: 0 !important; }
.marqo-pagination-button.marqo-active { background: #0c0c0c !important; color: #fff !important; border-color: #0c0c0c !important; }

/* Sort/dropdowns — square */
.marqo-sort-select, .marqo-select { border-radius: 0 !important; }

Additional dev store override (remove when deploying to real store):

/* Load Raleway as brandon-grotesque approximation (Typekit is domain-locked) */
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap");

.marqo-search-layout, .marqo-search-layout *,
.marqo-product-card, .marqo-product-card *,
.marqo-filter-sidebar, .marqo-filter-sidebar * {
  font-family: "Raleway", sans-serif !important;
}

Font Stack​

Product Display​

Price Display​

Text Styles​

Sale Badge​

CTA Button​

Reviews​

Filters​

Sorting​

Pagination​

Layout​

States​

Selectors​

Custom CSS Overrides​