Testing Your Setup

A comprehensive checklist to ensure your customizer works perfectly before going live.

Pre-Launch Testing Checklist#

Complete each section before launching to customers:

• Theme integration verified
• All add-on groups configured
• Products linked correctly
• Pricing displaying properly
• Canvas previews working
• Conditional logic functioning
• Mobile experience tested
• Checkout flow complete
• Order data accurate

Theme Integration Testing#

App Block Installation#

Test Steps:

1. Go to Theme Customizer
2. Navigate to a product page
3. Verify Uplift block appears
4. Check position is correct

Expected Results:

• Block visible in customizer
• Renders on product page
• Doesn't break page layout

Multiple Themes#

If you have multiple themes:

1. Test on each published/draft theme
2. Verify app block added to each
3. Check styling consistency

Product Configuration Testing#

Add-On Group Display#

For each product with customization:

1. View product page on storefront
2. Verify group title appears
3. Check all options display
4. Confirm styling matches expectations

Option Types#

Swatches:

• Colors render correctly
• Selection highlights work
• Labels display (if enabled)
• Required validation works

Checkboxes:

• All options selectable
• Multiple selections allowed
• Prices display correctly
• Default states correct

Radio Buttons:

• Single selection enforced
• Required validation works
• Default selected (if configured)
• Prices show accurately

Dropdowns:

• Opens/closes properly
• All options visible
• Selection displays correctly
• Scrolling works (many options)

Pricing Testing#

Price Display#

1. Select various options
2. Watch price update
3. Verify amounts correct

Check:

• Base product price
• Add-on prices (if shown)
• Price format (currency, decimals)

Cart Pricing#

1. Add customized product to cart
2. Go to cart page
3. Verify:
   • Main product price
   • Add-on line items
   • Individual prices
   • Cart total

Discount Codes#

1. Apply discount code at checkout
2. Verify discounts apply correctly
3. Check:
   • Product discounts
   • Cart discounts
   • Add-on product eligibility

Canvas Testing#

Visual Preview#

Basic Functionality:

1. Load product with canvas
2. Verify base image displays
3. Select options with visuals
4. Confirm canvas updates

Layer Tests:

• Correct layer ordering
• Proper positioning
• Size/scale accurate
• Transparency works

Variant Switching#

1. Change product variant
2. Verify canvas updates
3. Check layer visibility changes
4. Confirm new base image loads

Performance#

• Canvas loads within 3 seconds
• Switching is smooth
• No flickering/jumping
• Mobile performance acceptable

Conditional Logic Testing#

Show/Hide Rules#

For each conditional rule:

1. Start with default state
2. Trigger the condition
3. Verify target shows/hides
4. Untrigger condition
5. Verify target returns to default

Complex Conditions#

If using multiple conditions:

• AND logic works correctly
• All conditions must be met
• Partial matches don't trigger

Edge Cases#

• Rapid selection changes
• Page refresh maintains state
• Hidden options don't validate
• Hidden options don't add to cart

Mobile Testing#

Device Testing#

Test on actual devices when possible:

• iPhone (Safari)
• Android (Chrome)
• iPad/Tablet

Touch Interactions#

• Swatches tappable
• Dropdowns work
• Scrolling smooth
• Canvas pinch-zoom (if supported)

Layout#

• Options stack properly
• Text readable
• Buttons large enough
• No horizontal scroll

Checkout Flow Testing#

Complete Purchase#

Full test purchase:

1. Go to product page
2. Make selections
3. Click Add to Cart
4. Verify cart contents
5. Proceed to checkout
6. Complete payment (use test mode)
7. Verify order created

Order Verification#

After test purchase:

1. Go to Shopify Admin → Orders
2. Find test order
3. Check:
   • All line items present
   • Customization properties visible
   • Prices correct
   • Inventory updated

Cart Persistence#

Test cart survival:

1. Add customized product
2. Close browser
3. Reopen and return
4. Verify cart intact
5. Verify customization intact

Performance Testing#

Page Load#

• Product page loads in <3 seconds
• Customizer initializes quickly
• No blocking JavaScript errors

Selection Speed#

• Options respond instantly
• Price updates immediately
• Canvas updates smoothly

Check for Errors#

1. Open browser DevTools (F12)
2. Go to Console tab
3. Interact with customizer
4. Check for JavaScript errors

Browser Compatibility#

Required Browsers#

Test on:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Optional Browsers#

Consider testing:

• Older Chrome versions
• Mobile Chrome
• Mobile Safari
• Samsung Internet

Test Scenarios#

Scenario 1: Simple Selection#

1. Go to product with swatches
2. Select a color
3. Add to cart
4. Complete checkout
5. Verify order

Scenario 2: Multiple Add-ons#

1. Product with multiple groups
2. Select options from each
3. Include some with products
4. Add to cart
5. Verify all line items
6. Complete checkout

Scenario 3: Required Fields#

1. Product with required options
2. Try to add without selecting
3. Verify validation error
4. Make selection
5. Successfully add to cart

Scenario 4: Conditional Display#

1. Product with conditional logic
2. Start with hidden option
3. Trigger show condition
4. Select newly shown option
5. Add to cart
6. Verify selection included

Scenario 5: Variant Changes#

1. Product with multiple variants
2. Select variant A
3. Configure options
4. Switch to variant B
5. Verify appropriate options
6. Complete purchase

Testing Tools#

Browser DevTools#

• Console: Check for errors
• Network: Monitor requests
• Elements: Inspect styling
• Performance: Check load times

Shopify Theme Editor#

• Preview on different devices
• Test with different products
• Verify app block placement

Test Orders#

• Use Shopify's test gateway
• Create realistic test scenarios
• Clean up test data after

Common Testing Mistakes#

Don't Skip#

❌ Testing only on desktop ❌ Using only one browser ❌ Skipping checkout flow ❌ Ignoring error console

Do Test#

✅ Full customer journey ✅ Edge cases and errors ✅ Real device experience ✅ Complete checkout

Pre-Launch Final Check#

Before going live:

1. ✅ All checklist items complete
2. ✅ Test orders placed successfully
3. ✅ No console errors
4. ✅ Mobile experience smooth
5. ✅ Team trained on orders
6. ✅ Support documentation ready

Next Steps#

• Troubleshooting Guide
• FAQ