Promotional Banner Test

Let's create a simple test that shows different promotional banners.

Step 1: Create a Test in Shoplift Dashboard

1. Navigate to Tests → Create New Test

2. Select "JavaScript API" as the test type

3. Copy the hypothesis IDs for use in your code

Step 2: Implement the Test Logic

Add this code to your theme where you want the test to run:

// Example: Testing promotional banners
async function initPromoBanner() {
  // Replace with your actual hypothesis ID from Shoplift dashboard
  const variantId = "aa800953-3e22-4335-a53b-50f61db17538";
  
  try {
    // Check if visitor is in the variant group
    const showNewBanner = await window.shoplift.isHypothesisActive(variantId);
    
    if (showNewBanner) {
      // Show variant: Special offer banner
      document.querySelector('.promo-banner').innerHTML = 
        '<strong>Limited Time: Free Shipping on Orders Over $50!</strong>';
    } else {
      // Show control: Standard banner
      document.querySelector('.promo-banner').innerHTML = 
        '<strong>Welcome to Our Store</strong>';
    }
  } catch (error) {
    // Always fail gracefully - show control experience on error
    console.error('Shoplift test failed:', error);
    document.querySelector('.promo-banner').innerHTML = 
      '<strong>Welcome to Our Store</strong>';
  }
}

// Run when page loads
document.addEventListener('DOMContentLoaded', initPromoBanner);

Step 3: Test Your Implementation

• Preview with URL parameters:

  • Add ?slVariant=YOUR-HYPOTHESIS-ID to test specific variant

• Check the console:

// Verify Shoplift is loaded
console.log(window.shoplift);

// Check your test assignment
window.shoplift.isHypothesisActive('YOUR-HYPOTHESIS-ID')
  .then(result => console.log('In variant:', result));