Skip to main content

Marketing Integrations

Klaviyo for email marketing and Yotpo for product reviews provide marketing automation and social proof.

Overview​

HHA Sports uses Klaviyo for sophisticated email marketing with product tracking and Yotpo for collecting and displaying product reviews. Both integrate with BigCommerce product data.

Klaviyo Integration​

Primary Integration​

Klaviyo Company ID: VNGrUw
Implementation: Child theme inc/class-klaviyo.php

Features​

  1. Onsite Script - Klaviyo tracking loaded on all pages
  2. Product Page Tracking - Automatic event tracking on product pages
  3. Add to Cart Tracking - Tracks when users add products to cart
  4. Product Metadata - Sends complete product info to Klaviyo

Klaviyo Scripts​

Onsite Script (loaded in <head>)​

URL: https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=VNGrUw

Inline JavaScript object initialization:

!function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];
// Klaviyo proxy setup...

Provides klaviyo.push() method for tracking events.

Tracks three events when user views a product:

1. Viewed Product Event​
klaviyo.push(['track', 'Viewed Product', {
    Name: "Product Name",
    ProductID: "123",
    ImageURL: "https://...",
    URL: "https://...",
    Brand: "Brand Name",
    Price: "99.99",
    CompareAtPrice: "129.99"
}]);
2. Viewed Item Event (for product recommendations)​
klaviyo.push(['trackViewedItem', {
    Title: "Product Name",
    ItemId: "123",
    Categories: [...],
    ImageUrl: "https://...",
    Url: "https://...",
    Metadata: {
        Brand: "Brand Name",
        Price: "99.99",
        CompareAtPrice: "129.99"
    }
}]);
3. Added to Cart Event (on button click)​
// Listens for clicks on .bc-btn--add_to_cart buttons
klaviyo.push(['track', 'Added to Cart', {
    Name: "Product Name",
    ProductID: "123",
    // ... same product data
}]);

Product Data Sent to Klaviyo​

For each product:

  • Name - Product title (escaped quotes)
  • ProductID - BigCommerce product ID
  • ImageURL - Featured image (large size)
  • URL - Product permalink
  • Brand - Brand name from BigCommerce
  • Price - Calculated price (sale price if applicable)
  • CompareAtPrice - Regular price (for showing discount)
  • Categories - Product categories (if applicable)

Integration with BigCommerce​

Code Location: wp-content/themes/suma-elementor-child/inc/class-klaviyo.php

if (function_exists('is_product') && is_product()) :
    $product = new \BigCommerce\Post_Types\Product\Product(get_the_ID());
    $prices = apply_filters(
        'bigcommerce/product/price_range/data',
        get_post_meta($product->post_id(), Product::PRICE_RANGE_META_KEY, true),
        $product
    );
    
    // Extract product data
    $name = $product->name;
    $id = $product->bc_id();
    $image = get_the_post_thumbnail_url($product->post_id(), 'large');
    $url = get_permalink($product->post_id());
    $brand = $product->brand();
    $price = $prices['calculated']['min'];
    $compare = $prices['price']['min'];
endif;

Klaviyo Flows & Campaigns​

Use these tracked events in Klaviyo for:

Flows:

  • Browse Abandonment - Trigger on "Viewed Product" without purchase
  • Cart Abandonment - Trigger on "Added to Cart" without checkout
  • Product Recommendations - Based on "Viewed Item" history
  • Post-Purchase Follow-up - After purchase completion

Segments:

  • Users who viewed specific product categories
  • Users who viewed high-value products
  • Users who added to cart but didn't purchase
  • Brand-specific viewers

Back in Stock Notifications (Klaviyo)​

Plugin: Back in Stock Notifications for Klaviyo v1.2.4
Location: wp-content/plugins/back-in-stock-notifications-for-klaviyo/

Features​

  • Product Feed - Custom feed for out-of-stock products
  • Sign-up Form - Klaviyo form for stock notifications
  • Automatic Integration - Works with BigCommerce inventory
  • Custom Templates - Overrideable form templates

Shortcode​

[back_in_stock_form]

Display sign-up form on out-of-stock product pages.

Integration​

Monitors BigCommerce product inventory and triggers Klaviyo "Back in Stock" flow when products become available.

Gravity Forms Klaviyo Integration​

Plugin: Gravity Forms for Klaviyo v1.7.3
Location: wp-content/plugins/gravityforms-klaviyo/
Author: CrossPeak Software

Features​

  • Feed Add-On - Connects Gravity Forms to Klaviyo API
  • Profile Creation - Create/update Klaviyo profiles from form submissions
  • List Management - Subscribe users to Klaviyo lists
  • Custom Properties - Map form fields to Klaviyo custom properties
  • Event Tracking - Track form submissions as Klaviyo events

Setup​

  1. Install and activate plugin
  2. Navigate to Forms → Settings → Klaviyo
  3. Enter Klaviyo API Key
  4. Configure feeds per form:
    • Map fields to Klaviyo properties (email, name, etc.)
    • Select Klaviyo list to subscribe to
    • Set conditional logic if needed

Use Cases​

  • Newsletter signups
  • Contact form submissions
  • Product inquiry tracking
  • Lead capture with segmentation
  • Event registration

Yotpo Integration​

Primary Integration​

Implementation: Child theme inc/class-yotpo.php

Features​

  1. Product Reviews Widget - Display reviews on product pages
  2. Star Rating Widget - Show star ratings
  3. Review Collection - Email flows to request reviews
  4. Social Integration - Share reviews on social media

Yotpo Widgets​

Widget Instance IDs​

  • Reviews Section: 983978
  • Star Rating: 983977

Shortcodes​

Reviews Section​

[yotpo-reviews-section]

Displays full reviews widget with review list and submission form.

Output:

<div class="yotpo-widget-instance" 
     data-yotpo-instance-id="983978" 
     data-yotpo-product-id="123"
     data-yotpo-name="Product Name"
     data-yotpo-url="https://..."
     data-yotpo-image-url="https://..."
     data-yotpo-price="99.99"
     data-yotpo-currency="USD"
     data-yotpo-description="...">
</div>

Star Rating​

[yotpo-star-rating]

Displays compact star rating (for product cards, etc.).

Output:

<div class="yotpo-widget-instance" 
     data-yotpo-instance-id="983977" 
     data-yotpo-product-id="123">
</div>

Integration with BigCommerce​

Code Location: wp-content/themes/suma-elementor-child/inc/class-yotpo.php

$product = new \BigCommerce\Post_Types\Product\Product($product_id);

$product_bc_id = $product->bc_id();
$product_title = $product->get_property('name');
$product_description = $product->get_property('description');
$product_url = get_permalink($product->post_id());
$product_image = get_the_post_thumbnail_url($product->post_id(), 'bc-large');
$product_price = $product->get_property('calculated_price');

Product Data Sent to Yotpo​

  • Product ID - BigCommerce product ID
  • Name - Product title
  • URL - Product page URL
  • Image URL - Featured image (bc-large size)
  • Price - Product price
  • Currency - USD (hardcoded)
  • Description - Product description

Yotpo Widget Loading​

Yotpo Script: Loaded by Yotpo admin or via widget embed code.

Widgets render automatically on page load when Yotpo JavaScript finds matching data-yotpo-instance-id elements.

Display Locations​

Typically displayed via shortcodes in:

  • Product single page templates (Elementor)
  • Custom product sections
  • Review tabs/accordions
  • Product summary areas

Elementor Widgets​

Theme includes custom Elementor widgets for Yotpo:

  • yotpo-review-carousel - Scrolling review display
  • yotpo-reviews - Static review list

Location: wp-content/themes/suma-elementor/inc/widgets/

Styling​

Yotpo widgets use Yotpo's default CSS. Custom styling via:

  • Theme CSS overrides
  • Yotpo admin customization settings
  • Custom CSS targeting .yotpo-* classes

Review Collection​

Yotpo automatically sends review request emails after purchases (configured in Yotpo dashboard):

  1. Purchase tracked via BigCommerce
  2. Yotpo triggered after X days
  3. Customer receives email with review link
  4. Review submitted through Yotpo
  5. Review displays on product page

BazaarVoice Integration (Alternative)​

Theme includes BazaarVoice widgets (may be for future use or specific products):

Elementor Widgets:

  • bv-questions-widget - Q&A section
  • bv-reviews-widget - Reviews display
  • bv-star-rating - Star rating

Note: Check if BazaarVoice is actively configured or if Yotpo is the sole review provider.

Email Marketing Strategy​

Klaviyo Flow Recommendations​

Based on the tracking implementation, recommended Klaviyo flows:

1. Browse Abandonment​

  • Trigger: Viewed Product, no purchase within 24 hours
  • Content: Product reminder, related products, discount offer
  • Timing: 2-3 emails over 7 days

2. Cart Abandonment​

  • Trigger: Added to Cart, no checkout within 2 hours
  • Content: Cart reminder, free shipping offer, urgency messaging
  • Timing: 1-3 emails over 24-48 hours

3. Post-Purchase​

  • Trigger: Purchase completion (from BigCommerce)
  • Content: Thank you, review request, cross-sell
  • Timing: Immediate, 7 days, 30 days

4. Welcome Series​

  • Trigger: Newsletter signup (Gravity Forms → Klaviyo)
  • Content: Brand intro, product highlights, first purchase incentive
  • Timing: 3-5 emails over 2 weeks

5. Back in Stock​

  • Trigger: User signs up for notification
  • Content: Product available notification
  • Timing: Immediate when inventory restocked

Segmentation Strategies​

Create segments based on:

  • Viewed Products - Category, brand, price range
  • Purchase History - Product type, frequency, recency
  • Engagement - Email opens, clicks, site visits
  • Geographic - Location-based promotions
  • Lifecycle - New, active, lapsed customers

Analytics & Reporting​

Klaviyo Reporting​

Track performance of:

  • Email flows (open rate, click rate, revenue)
  • Campaigns (engagement, conversion)
  • Product performance (views, adds to cart, purchases)
  • Customer lifetime value

Yotpo Reporting​

Monitor:

  • Review submission rate
  • Average star rating
  • Review impact on conversion
  • Top-reviewed products

Integration with Google Analytics​

Suma Analytics plugin (v1.3.5) pushes events to Google Tag Manager dataLayer, which can forward to Google Analytics:

  • Product views
  • Add to cart
  • Purchases
  • Custom events

See Custom Plugins - Suma Analytics for details.

Configuration & Setup​

Klaviyo Configuration​

Theme Configuration:

  1. Update company ID in inc/class-klaviyo.php if different
  2. Current ID: VNGrUw

Klaviyo Dashboard:

  1. Verify tracking data flowing
  2. Create flows and campaigns
  3. Set up forms and popups
  4. Configure email templates

Yotpo Configuration​

Theme Configuration:

  1. Update widget instance IDs in inc/class-yotpo.php if different
  2. Current IDs: 983978 (reviews), 983977 (star rating)

Yotpo Dashboard:

  1. Configure review collection emails
  2. Customize widget appearance
  3. Set up social sharing
  4. Enable Q&A if desired

Testing​

Klaviyo Testing:

  1. Visit product page
  2. Open browser console
  3. Check for Klaviyo events: _klOnsite array
  4. Add to cart and verify event fires
  5. Check Klaviyo dashboard for recent activity

Yotpo Testing:

  1. Place shortcode on test page
  2. Verify widget renders with product data
  3. Submit test review (may need Yotpo admin approval)
  4. Check review displays correctly

Troubleshooting​

Klaviyo Not Tracking​

Issue: Events not appearing in Klaviyo

Solutions:

  1. Verify company ID is correct
  2. Check browser console for JavaScript errors
  3. Ensure klaviyo.js script loaded
  4. Check product page is BigCommerce product post type
  5. Verify product has valid data (name, ID, price)

Yotpo Widgets Not Displaying​

Issue: Yotpo widgets don't render

Solutions:

  1. Verify Yotpo script loaded on page
  2. Check widget instance IDs are correct
  3. Ensure product ID passed correctly
  4. Check browser console for errors
  5. Verify Yotpo account active and configured

Add to Cart Not Tracking​

Issue: Klaviyo "Added to Cart" event not firing

Solutions:

  1. Verify button has class bc-btn--add_to_cart
  2. Check JavaScript event listener attached
  3. Ensure product data variables defined
  4. Test in browser with console logging
  5. Check for JavaScript conflicts