Laura Geller Integration Guide

Onboarding checklist and configuration steps to deliver the features promised to Laura Geller during the sales process.

Customer website: https://www.laurageller.com Dev store: dev-raynorchavez-marqo.myshopify.com

Feature Status

Feature	Infrastructure	Configuration needed
Quickshop modal	DOM Events shipped (`marqo:cta.click`)	Theme bridge script
Okendo reviews	Admin UI + hydration implemented	Verify metafields, enable in settings
Custom badges (New, Best Seller, etc.)	Template variables available	Edit product card template
Inline promo tiles	Grid Injections shipped	Create content in admin UI
Curated PLP images	Metafields indexed, template comment added	Edit product card template
Videowise video tiles	Grid Injections + DOM Events shipped	Create injection + theme script
Audience/UTM segmentation	DOM event hooks available	Third-party tool (Visually) populates containers

What the customer wants: Clicking "Shop Now" on a product card opens a variant-selection modal (shade picker + Add to Bag) instead of navigating to the PDP.

How it works: Laura Geller's theme has a custom <quick-add-modal> web component (in their global.js + quick-add.js). We bridge our CTA click to their theme's modal.

Steps:

Add the following script to Laura Geller's theme.liquid before </body>:

<script>
  document.addEventListener('marqo:cta.click', function(e) {
    e.preventDefault(); // Stop default navigation to PDP

    // Create a reusable quickshop modal if not already present
    var modal = document.querySelector('#MarqoQuickAdd');
    if (!modal) {
      document.body.insertAdjacentHTML('beforeend',
        '<quick-add-modal id="MarqoQuickAdd" class="quick-add-modal">' +
          '<div role="dialog" class="quick-add-modal__content global-settings-popup" tabindex="-1">' +
            '<button type="button" class="quick-add-modal__toggle" aria-label="Close">&times;</button>' +
            '<div class="quick-add-modal__content-info"></div>' +
          '</div>' +
        '</quick-add-modal>'
      );
      modal = document.querySelector('#MarqoQuickAdd');
    }

    // Their theme's <quick-add-modal> web component:
    // 1. Reads data-product-url from the opener element
    // 2. Fetches the product page HTML from that URL
    // 3. Extracts the <product-info> element (variant selector, prices, Add to Bag)
    // 4. Renders it in the modal
    e.detail.element.setAttribute('data-product-url', e.detail.productUrl);
    modal.show(e.detail.element);
  });
</script>

Test on the dev store by clicking "Shop Now" on a product card — the modal should open with the variant selector.
Verify the modal works for products with multiple variants (shades, sizes).

Fallback: If the theme's <quick-add-modal> web component doesn't initialize on dynamically created elements, try importing their quick-add.js explicitly or use customElements.whenDefined('quick-add-modal') before calling .show().

2. Okendo Reviews

What the customer wants: Star ratings and review counts on product cards, powered by Okendo.

How it works: Okendo stores review data in Shopify product metafields (okendo.ReviewCount, okendo.ReviewAverageValue). Our indexer extracts these. The storefront widget renders fallback stars and hydrates Okendo's native widget.

Steps:

Verify metafields exist: In Shopify admin, check a few Laura Geller products for metafields under the okendo namespace. Look for ReviewCount and ReviewAverageValue.
Enable in admin UI: Go to Settings > Reviews section:
- Enable: On
- Provider: Okendo
- Metafield Namespace: okendo
- Review Count Key: ReviewCount
- Review Average Key: ReviewAverageValue
- Star Color: match Laura Geller's theme (likely gold/amber)
- Show Count: On
Verify Okendo JS loaded: Laura Geller's theme must load Okendo's JavaScript snippet (oke.js). The widget's hydrateReviews() function looks for window.oke and calls oke.initWidget() to replace fallback stars with native Okendo widgets.
If Okendo script not loading: Add to theme.liquid:

<script src="https://d3hw6dc1ow8pp2.cloudfront.net/reviewsWidget.min.js" defer></script>

Verification: Search for a product with reviews — stars should appear below the product title with the review count.

3. Custom Badges

What the customer wants: Product badges like "New", "Best Seller", "Limited Edition" displayed on product cards, driven by metafield data.

How it works: Laura Geller stores badge text in a product metafield (e.g., custom.badge_text). Our indexer indexes it as productMetafieldCustomBadgeText. The merchant edits the product card template to display it.

Steps:

Identify the metafield: Ask Laura Geller which metafield namespace and key they use for badges. Common patterns:
- custom.badge or custom.badge_text
- global.badge
- Could be a tag instead — check productTags
Edit the product card template in the admin UI (Advanced Template Editor > Product Card > HTML):

Find the image container section and add the badge above the <img>:

<!-- Custom badge from metafield -->
<span v-if="productMetafieldCustomBadgeText"
      style="position:absolute; top:8px; left:8px; background:#000; color:#fff;
             padding:4px 10px; font-size:11px; font-weight:600;
             text-transform:uppercase; letter-spacing:0.5px; z-index:2; border-radius:2px;">
  {{ productMetafieldCustomBadgeText }}
</span>

Adjust the metafield variable name to match the actual namespace/key (e.g., productMetafieldGlobalBadge).

Style to match Laura Geller's theme: Their current badges use black background, white text, uppercase. Adjust colors/positioning as needed.
If using tags instead of metafields: Use a tag-based approach:

<span v-if="productTags && productTags.includes('badge:new')"
      style="position:absolute; top:8px; left:8px; background:#000; color:#fff;
             padding:4px 10px; font-size:11px; text-transform:uppercase;">
  NEW
</span>

Verification: Products with the badge metafield should show the badge on their card. Products without it should show nothing.

What the customer wants: Promotional banners (e.g., "Complete Your Routine") inserted between products in the search results grid.

How it works: Grid Injections feature — configure in the admin UI.

Steps:

Go to admin UI > Settings > Grid Injections
Click "Add Content Block"
Configure:
- Position: 4 (after 4th product)
- Column Span: 4 (full width)
- HTML:

<div style="text-align:center; padding:32px 24px; background:#faf5f0; border-radius:8px;">
  <img src="https://cdn.shopify.com/s/files/1/laura-geller/routine-banner.jpg"
       alt="Complete Your Routine" style="max-width:100%; border-radius:4px; margin-bottom:12px;" />
  <a href="/collections/routines" style="color:#000; font-weight:600; text-decoration:underline;">
    Shop Routines →
  </a>
</div>

CSS: (leave empty if inline styles are sufficient)
Enabled: On

Add more injection blocks as needed (e.g., video tiles at position 8, editorial at position 12).

Verification: Search results should show the promo banner after the 4th product, spanning the full grid width.

5. Curated PLP Images

What the customer wants: Product card images on the PLP are driven by a metafield, not the default Shopify product image. This gives them visual diversity and curated imagery per product.

How it works: All product metafields are available as template variables. The default template includes a comment showing how to swap the image source.

Steps:

Identify the metafield: Ask Laura Geller which metafield they use for PLP images. Common patterns:
- custom.plp_image (URL to the curated image)
- custom.featured_image
Edit the product card template in the admin UI (Advanced Template Editor > Product Card > HTML):

Find the <img> line (it has a comment above it explaining this):

<img class="marqo-product-image" :src="imageUrl" :alt="title" loading="lazy" />

Change it to:

<img class="marqo-product-image"
     :src="productMetafieldCustomPlpImage || imageUrl"
     :alt="title" loading="lazy" />

Replace productMetafieldCustomPlpImage with the actual metafield variable name.

Re-index products to ensure the metafield values are in the Marqo index. Trigger a full sync from the admin dashboard.

Verification: Products with the PLP image metafield should show the curated image. Products without it fall back to the standard Shopify product image.

6. Videowise Video Tiles

What the customer wants: Video content from Videowise embedded in the product grid.

How it works: Grid Injections provide the container. A theme script hydrates it with Videowise's SDK.

Steps:

Add a grid injection in admin UI > Settings > Grid Injections:
- Position: 8
- Column Span: 2
- HTML:

<div class="videowise-player" data-videowise-widget-id="WIDGET_ID_HERE"
     style="min-height:300px; border-radius:8px; overflow:hidden;"></div>

Replace WIDGET_ID_HERE with the actual Videowise widget ID from Laura Geller's Videowise dashboard.

Add hydration script to Laura Geller's theme.liquid before </body>:

<script>
  document.addEventListener('marqo:grid.injected', function() {
    if (window.Videowise) {
      window.Videowise.init();
    }
  });
</script>

Verify Videowise SDK loaded: Laura Geller's theme should already have the Videowise script tag. If not, add it:

<script src="https://cdn.videowise.com/videowise.js" defer></script>

Verification: The video tile should appear at position 8 in the grid with a playable video.

What the CEO promised: Promo tiles can be segmented by audience, location, or UTM parameters.

What we actually support: The infrastructure — injectable grid containers + DOM event hooks. The segmentation logic comes from the merchant's existing tools (Visually, Nosto, etc.).

How to achieve basic UTM segmentation with a theme script:

<script>
  document.addEventListener('marqo:grid.injected', function() {
    var utm = new URLSearchParams(window.location.search).get('utm_campaign');
    var banners = document.querySelectorAll('.marqo-grid-injection');
    banners.forEach(function(banner) {
      // Show different content based on campaign
      if (utm === 'summer-sale' && banner.dataset.campaignContent) {
        banner.innerHTML = banner.dataset.campaignContent;
      }
    });
  });
</script>

For full audience segmentation (VIP tiers, geo-targeting, personalization):

Visually or Nosto would populate the injection containers via the DOM event hooks
We provide the container placement and the event — their tool provides the content logic
This should be positioned to the customer as "compatible with your existing personalization stack"

Integration Checklist

Font handling on production vs. dev stores

Laura Geller's theme loads brandon-grotesque via Adobe Typekit (@import url("https://use.typekit.net/pdz7iln.css")). Typekit kits are domain-locked — the font files are only served to whitelisted domains.

Production (laurageller.com): All fontFamily settings should be "inherit". The widget inherits brandon-grotesque directly from the theme. No @import needed in Custom CSS.
Dev stores: Typekit won't serve the font. Use a Google Fonts @import for Raleway (closest free alternative) in Custom CSS, plus a font-family override. Remove this override before deploying to the real store.

Before launch

After launch

Monitor for console errors on the storefront
Verify Okendo widget hydration fires (check for Okendo star ratings)
Verify quickshop modal opens correctly for all product types
Check badge display across products with/without the metafield
Confirm promo tiles show at correct grid positions
Test filter interactions (select, clear, mobile drawer)

Questions to Ask Laura Geller

Badges: What metafield namespace and key do you use for product badges? (e.g., custom.badge_text)
PLP Images: Do you use a product metafield for curated PLP images? If so, what's the namespace/key?
Promo tiles: What banner assets do you want in the grid? Provide image URLs and link destinations.
Videowise: What's the Videowise widget ID for the videos you want in the grid?
Reviews: Confirm your Okendo metafield namespace is okendo with keys ReviewCount and ReviewAverageValue.
Quickshop: Does your theme's quick-add modal work on all product types, or only products with variants?

Theme Files Reference

Laura Geller's theme was exported on 2026-04-08. Key files analyzed:

assets/global.js — defines <modal-opener> web component (click → modal.show(button))
assets/quick-add.js — defines <quick-add-modal> web component (fetches product page, extracts <product-info>, renders in modal)
assets/quick-add.css — modal styling (opacity/visibility toggle, z-index 1000)
snippets/card-product.liquid — product card with <modal-opener data-modal="#QuickAdd-{id}"> pattern
Theme export location: theme_export__www-laurageller-com-laura-geller-shopify-main__08APR2026-1132pm.zip

Feature Status​

1. Quickshop Modal​

2. Okendo Reviews​

3. Custom Badges​

4. Inline Promo Tiles​

5. Curated PLP Images​

6. Videowise Video Tiles​

7. Audience/UTM Segmentation for Promo Tiles​

Integration Checklist​

Font handling on production vs. dev stores​

Before launch​

After launch​

Questions to Ask Laura Geller​

Theme Files Reference​

Feature Status

1. Quickshop Modal

2. Okendo Reviews

3. Custom Badges

4. Inline Promo Tiles

5. Curated PLP Images

6. Videowise Video Tiles

7. Audience/UTM Segmentation for Promo Tiles

Integration Checklist

Font handling on production vs. dev stores

Before launch

After launch

Questions to Ask Laura Geller

Theme Files Reference