Testing Your Setup

Ensure everything works perfectly before going live with comprehensive testing.

Testing Overview

A thorough testing process covers:

• Display testing - Options appear correctly
• Functionality testing - Selections work properly
• Cart testing - Items add to cart correctly
• Checkout testing - Complete purchase flow works
• Order testing - Order data is accurate

Pre-Testing Checklist

Before you start testing, ensure:

• ☐ Uplift app is installed
• ☐ App block is added to theme
• ☐ At least one add-on group created
• ☐ Group assigned to at least one product
• ☐ Test products are active/published

Display Testing

Basic Display Check

1. Visit a product page with add-on groups assigned
2. Verify the options section appears
3. Check group titles display correctly
4. Confirm all options are visible
5. Verify styling matches your theme

Swatch Display

• ☐ Color swatches show correct colors
• ☐ Image swatches load properly
• ☐ Swatch size is appropriate
• ☐ Selection indicator is visible
• ☐ Labels display as configured

Responsive Display

Test on multiple screen sizes:

Functionality Testing

Selection Behavior

• ☐ Click/tap selects option
• ☐ Selection is visually indicated
• ☐ Single-select prevents multiple (radio/swatches)
• ☐ Multi-select allows multiple (checkboxes)
• ☐ Dropdown opens and allows selection

Pricing Updates

1. Select an option with a linked product
2. Verify price updates in real-time
3. Check price format is correct
4. Test multiple selections
5. Verify total calculation

Conditional Logic

If you have conditional rules:

• ☐ Trigger option shows target correctly
• ☐ Deselecting trigger hides target
• ☐ Hidden options don't affect price
• ☐ Multiple conditions work together

Canvas Testing

If using visual preview:

• ☐ Canvas loads initially
• ☐ Layers change on selection
• ☐ Layers align correctly
• ☐ Performance is acceptable
• ☐ Works on mobile

Cart Testing

Add to Cart Process

1. Make selections on product page
2. Click Add to Cart
3. Navigate to cart page
4. Verify:
   • Main product appears
   • Add-on products appear as separate items
   • Properties show selections
   • Prices are correct

Cart Page Display

• ☐ Line items are clearly labeled
• ☐ Customization details visible
• ☐ Prices are accurate
• ☐ Cart total is correct
• ☐ Quantity changes work (if applicable)

Mini Cart/Drawer Cart

If your theme uses AJAX cart:

• ☐ Products add without page reload
• ☐ All items appear in drawer/mini cart
• ☐ Properties display correctly

Checkout Testing

Full Checkout Flow

1. Add customized product to cart
2. Proceed to checkout
3. Verify items in checkout summary
4. Complete test payment
5. Check confirmation page
6. Verify confirmation email

Verification Points

• ☐ All items appear in checkout
• ☐ Prices match cart
• ☐ Properties shown in line items
• ☐ Order confirmation is correct
• ☐ Email includes customization details

Order Testing

Order Verification

1. Open the test order in Shopify admin
2. Verify all line items present
3. Check properties are recorded
4. Confirm hidden properties (underscore) exist
5. Verify pricing is correct

Order Checklist

• ☐ Main product with correct variant
• ☐ Visible properties show selections
• ☐ Add-on products as separate line items
• ☐ Prices match what was displayed
• ☐ Inventory decremented correctly

Browser Testing

Test in multiple browsers:

Edge Case Testing

Inventory Scenarios

• ☐ Add-on product out of stock behavior
• ☐ Main product out of stock behavior
• ☐ Low stock warnings if configured

Validation Scenarios

• ☐ Required option not selected
• ☐ Min/max selection limits
• ☐ Error messages display properly

Special Cases

• ☐ Product with no add-on groups
• ☐ Multiple products in cart (some with add-ons)
• ☐ Discount codes with add-on products

Setting Up Test Mode

Bogus Gateway (Recommended)

1. Go to Settings → Payments
2. Add (for testing) Bogus Gateway
3. Use test card numbers during checkout
4. Complete test orders without real charges

Shopify Payments Test Mode

1. Go to Settings → Payments
2. Click Manage on Shopify Payments
3. Enable Test mode
4. Use Shopify's test card numbers

Complete Testing Checklist

Display

• ☐ Options appear on product page
• ☐ Styling matches theme
• ☐ Responsive on all devices
• ☐ All browsers work

Functionality

• ☐ Selections work correctly
• ☐ Prices update in real-time
• ☐ Conditional logic functions
• ☐ Canvas updates (if used)

Cart & Checkout

• ☐ Add to cart works
• ☐ Cart displays correctly
• ☐ Checkout completes successfully
• ☐ Order is accurate

Next Steps

• Troubleshooting Guide - Fix any issues found
• Best Practices - Optimize your setup
• FAQ - Common questions