Shopify Pricing A/B Testing - Advanced Customization Guide

IN THIS ARTICLE YOU WILL:

• Get an Overview of Advanced Customization
• Customize Price Element Selectors
• Customize Cart Drawer Selectors
• Understand Code-based Pricing Configs
• Migrate from Code to UI
• Troubleshoot Advanced Issues
• Understand Best Practices
• Edge Cases

Overview

• Customize price element selectors for custom themes
• Update cart drawer selectors for non-standard implementations
• Manually configure pricing rules via code (for dynamic logic)
• Troubleshoot theme-specific issues

Customizing Price Element Selectors

'.price-item'           // Dawn theme
'.price'                // Generic, many themes
'.product__price'       // Debut, Brooklyn, many others
'.product-single__price' // Product pages (Debut, Brooklyn)
'.product-price'        // Minimal, Supply
'.money'                // Generic price wrapper
'.price__current'       // Some newer themes
'.price__regular'       // Regular price display
'.price__sale'          // Sale price display
'.price-item--sale'     // Dawn theme sale price (for compare-at price products)

1. Open your store in a browser
2. Navigate to a product page
3. Right-click on a price element
4. Select "Inspect" or "Inspect Element"
5. Look for the CSS class name(s) in the HTML

<span class="custom-price-tag">$29.99</span>

1. Navigate to your Convert account
2. Click on your Experience
3. Go to Experience → Settings → Global JavaScript

// Update these selectors to match your theme's price elements
convert.shopifyPricingTags = convert.shopifyPricingTags || [];
convert.shopifyPricingTags.push(
  '.custom-price-tag',           // Example: Your custom theme
  '.price-display',              // Example: Another custom selector
  // Add more selectors if needed
);

convert.shopifyPricingTags = convert.shopifyPricingTags || [];
convert.shopifyPricingTags.push(
  '.my-theme-price',
  '.product-cost',
  '.sale-price'
);

1. Save the Global JavaScript
2. Clear browser cache (Ctrl+F5 or Cmd+Shift+R)
3. Visit a product page and check if prices update
4. Open console (F12) to see debug logs

• Product pages
• Collection pages
• Search results
• Home page
• Cart/Checkout (handled automatically by Cart Transform)

• Use .push() to ADD your custom selectors
• This keeps the defaults working for other parts of your store

• The system automatically handles variant price updates
• Make sure your selector targets ALL price displays (regular, sale, variant-specific)

Customizing Cart Drawer Selectors

'cart-drawer'           // Dawn theme (web component)
'.cart-drawer'          // Class-based
'#cart-drawer'          // ID-based
'.drawer--cart'         // Debut theme
'.mini-cart'            // Brooklyn, Minimal
'.ajax-cart'            // Venture, Supply
'.cart-popup'           // Some custom themes
'[data-cart-drawer]'    // Data attribute pattern
'.side-cart'            // Custom implementations
'#CartDrawer'           // Debut/Brooklyn
'.cart__sidebar'        // Some themes

1. Open your store in a browser
2. Add a product to cart (this opens the cart drawer)
3. Right-click on the cart drawer element
4. Select "Inspect" or "Inspect Element"
5. Look for the wrapper element's class or ID

<div class="my-custom-cart-drawer">
  <!-- cart items here -->
</div>

1. Navigate to your Convert account
2. Click on your Experience
3. Go to Experience → Configuration → Global JavaScript
   
   

// Update these selectors to match your theme's cart drawer
convert.shopifyCartDrawerTags = convert.shopifyCartDrawerTags || [];
convert.shopifyCartDrawerTags.push(
  '.my-custom-cart-drawer',      // Example: Your custom theme
  '#custom-cart',                // Example: ID-based selector
  // Add more selectors if needed
);

convert.shopifyCartDrawerTags = convert.shopifyCartDrawerTags || [];
convert.shopifyCartDrawerTags.push(
  '.theme-cart-sidebar',
  '#my-cart-drawer'
);

1. Save the Global JavaScript
2. Clear browser cache
3. Add a product with pricing rules to cart
4. Check if cart drawer shows correct prices
5. Open console (F12) to see if cart refresh is triggered

• Cart drawer automatically refreshes to show correct prices
• No customer action needed
• Works seamlessly

• Cart drawer automatic refresh not yet fully supported
• Customers see correct prices once they reach checkout
• Cart drawer prices correct on next page load

Code-Based Pricing Configuration (Advanced)

• Dynamic pricing logic (e.g., based on time of day, user properties)
• Runtime conditions (e.g., if cart value > $100, apply discount)
• Complex calculations that can't be expressed in the UI

• Navigate to your Experience
• Go to Experience → Settings → Global JavaScript
  
  

// Price element selectors (add custom selectors if needed)
convert.shopifyPricingTags = convert.shopifyPricingTags || [];
convert.shopifyPricingTags.push(
  '.price-item',           // Dawn theme
  '.price',                // Generic, many themes
  '.product__price',       // Debut, Brooklyn, many others
  '.product-single__price', // Product pages
  '.product-price',        // Minimal, Supply
  '.money',                // Generic price wrapper
  '.price__current',       // Some newer themes
  '.price__regular',       // Regular price display
  '.price__sale',          // Sale price display
  '.price-item--sale'      // Dawn theme sale price
  // Add custom selectors here if needed
);

// Cart drawer selectors (add custom selectors if needed)
convert.shopifyCartDrawerTags = convert.shopifyCartDrawerTags || [];
convert.shopifyCartDrawerTags.push(
  'cart-drawer',
  '.cart-drawer',
  '#cart-drawer',
  '.drawer--cart',
  '.mini-cart',
  '.ajax-cart',
  '.cart-popup',
  '[data-cart-drawer]',
  '.side-cart',
  '#CartDrawer',
  '.cart__sidebar'
  // Add custom selectors here if needed
);

1. Navigate to your Experience
2. Click on the Variation (e.g., "Variation 1")
3. Go to Variation JS section
   

// Shopify Pricing Rules
convertShopify.addPricingRules(convertContext, [
  {
    "type": "percentage",     // or "fixed"
    "value": -10,            // negative for discount, positive for increase
    "match": [
      {"field": "7211428872277", "regex": null},           // Product ID
      {"field": "awesome-cotton-tshirt", "regex": null}    // Product Handle
    ]
  }
]);

• "percentage" - Percentage-based adjustment (-10 = 10% off)
• "fixed" - Fixed amount adjustment (-5.00 = $5 off)

• Negative values = discount
• Positive values = price increase

• Each object represents an identifier
• field - The identifier value (product ID, handle, SKU, collection, tag)
• regex - Set to null for exact match, or a regex pattern for pattern matching

convertShopify.addPricingRules(convertContext, [
  {
    "type": "percentage",
    "value": -15,
    "match": [
      {"field": "product-handle-1", "regex": null},
      {"field": "product-handle-2", "regex": null}
    ]
  },
  {
    "type": "percentage",
    "value": -15,
    "match": [
      {"field": "product-handle-3", "regex": null}
    ]
  }
]);

convertShopify.addPricingRules(convertContext, [
  {
    "type": "percentage",
    "value": -20,
    "match": [
      {"field": "any", "regex": "^SHIRT-.*"}  // All products starting with "SHIRT-"
    ]
  }
]);

convertShopify.addPricingRules(convertContext, [
  {
    "type": "percentage",
    "value": -10,
    "match": [
      {"field": "collection:summer-sale", "regex": null}  // All products in "summer-sale" collection
    ]
  }
]);

convertShopify.addPricingRules(convertContext, [
  {
    "type": "fixed",
    "value": -5.00,
    "match": [
      {"field": "tag:vip", "regex": null}  // All products with "vip" tag
    ]
  }
]);

convertShopify.addPricingRules(convertContext, [
  {
    "type": "percentage",
    "value": -10,
    "match": [
      {"field": "collection:summer-sale", "regex": null}
    ]
  },
  {
    "type": "fixed",
    "value": -5.00,
    "match": [
      {"field": "tag:vip", "regex": null}
    ]
  }
]);

// Example: Time-based pricing
const currentHour = new Date().getHours();
const isHappyHour = currentHour >= 14 && currentHour < 17; // 2pm-5pm

if (isHappyHour) {
  convertShopify.addPricingRules(convertContext, [
    {
      "type": "percentage",
      "value": -25,  // 25% off during happy hour
      "match": [
        {"field": "collection:all", "regex": null}
      ]
    }
  ]);
} else {
  convertShopify.addPricingRules(convertContext, [
    {
      "type": "percentage",
      "value": -10,  // Regular 10% off
      "match": [
        {"field": "collection:all", "regex": null}
      ]
    }
  ]);
}

Migrating from Code to UI

1. Go to Shopify Admin → Apps → Convert → Pricing Rules tab
   
2. Select your Experience and Variation
3. Look at your existing Variation JS code
4. For each rule, translate it to the UI:

1. Add rules via the UI using the translation above
2. Click "Save All Rules" - this automatically updates your Variation JS
3. Test to ensure pricing still works
4. (Optional) Remove old manual code from Variation JS if fully migrated

• Single Source of Truth: Rules stored in Variation JS at Convert side
• Auto-Managed Code: UI generates and updates code for you
• Auto-Tagging: Experiences tagged with works-with-convert-shopify-app
• All Identifiers: System includes ID, handle, collections, tags automatically
• Strategy Selection: Easily choose how multiple rules combine
• No Coding Required: Visual interface for non-technical users

Troubleshooting Advanced Issues

1. Verify selectors:
   • Open console (F12)
   • Look for: No price elements found with selectors: [...]
   • If you see this, your custom selectors aren't matching
2. Inspect the price element:
   • Right-click price → Inspect
   • Copy the exact class or ID
   • Add to convert.shopifyPricingTags
3. Check selector syntax:
   • Classes start with . (e.g., .price-tag)
   • IDs start with # (e.g., #product-price)
   • Data attributes use brackets (e.g., [data-price])

1. Verify Dawn theme status:
   • Dawn theme: Should work automatically
   • Other themes: May require custom implementation
2. Add custom cart drawer selectors:
   • Follow "Part 2: Customizing Cart Drawer Selectors" above
   • Inspect your cart drawer element
   • Add the selector to convert.shopifyCartDrawerTags
3. Known limitation:
   • Non-Dawn themes may not support automatic refresh yet
   • Checkout will always show correct prices
   • Cart drawer corrects on next page load

• Theme loads prices before Convert tracking script runs
• Late-loading price elements

1. Built-in retry logic: The system already includes retry logic for late-loading prices
2. Contact Convert support: If flickering persists, it's likely theme-specific. Provide:
   • Theme name
   • Video/GIF showing the flicker
   • Browser console logs
3. Potential custom fix: Convert support can provide theme-specific CSS to hide prices until updated

1. Syntax errors:
   • Open browser console (F12)
   • Look for JavaScript errors in red
   • Check for missing commas, brackets, quotes
2. Variable names:
   • Must use convertShopify.addPricingRules()
   • Must pass convertContext as first parameter
3. Rule format:
   • type must be "percentage" or "fixed" (lowercase, quotes)
   • value must be a number (no quotes)
   • match must be an array of objects
4. Variation JS location:
   • Code must be in Variation JS, not Global JS
   • Each variation needs its own rules
   • Original/Control variation should have NO code

1. Enable verbose console logs:
   • Open browser console (F12)
   • Refresh the page
   • Look for messages starting with or
2. If still not showing:
   • Verify Convert tracking script is loaded
   • Check that your experience is active
   • Verify you're bucketed into a variation (not Original)
3. Console log format:

 Pricing rules added for experience #12345
 Total rules matched: 2
 Strategy: Sequential Application
 Final price: $100.00 → $85.00

Best Practices for Advanced Users

• Use a test/dev store
• Verify all page types (product, collection, checkout)
• Test multiple products and variants
• Check browser console for errors

• Only add selectors you actually need
• More selectors = slightly slower DOM queries
• Test after adding each new selector

• Keep a list of custom selectors you added
• Note which theme version you're using
• This helps when updating themes or troubleshooting

• Shopify theme updates can change CSS selectors
• Test pricing after every theme update
• Update convert.shopifyPricingTags if needed

• Even advanced users benefit from UI simplicity
• Reserve code-based method for truly dynamic logic
• Easier maintenance and troubleshooting

Edge Cases & Important Considerations

1. Shopify Admin → Settings → Checkout
2. Scroll to Abandoned checkouts emails
3. Uncheck "Send abandoned checkout emails automatically"

• The app updates both regular and sale prices
• Compare-at prices automatically adjust based on the new price
• Uses .price-item--sale and similar selectors

• If your theme uses custom compare-at price elements, add their selectors to convert.shopifyPricingTags

• Fixed amount discounts use the store's base currency
• Percentage discounts work across all currencies
• Checkout pricing (Cart Transform) handles currency conversion automatically

Need Help?

• Theme name and version
• Custom selectors you tried
• Browser console logs (with errors if any)
• Screenshots of the issue
• Your Experience ID