Merchants new to Rebuy may want to test our Smart Cart versus their own native cart drawer prior to enabling Smart Cart full time. This can be done using Rebuy's in house general A/B testing feature.
Read more here.
How to create a Smart Cart
Before you can A/B test Smart Cart vs your native cart drawer you need to create a Smart Cart, please do so by following the steps shown here.
Hiding your native cart drawer
Once you have a Smart Cart created, whether it is live or you're using preview mode, you should see both Smart Cart and your native cart drawer on your store.
They're separate carts and both can exist at once.
Rebuy Smart Cart does not automatically remove, hide or otherwise override your themes native cart drawer. Both can and will exist until you take steps to suppress your native cart drawer.
You'll need to make a few changes so that your native cart drawer is automatically hidden when Smart Cart is active but if Smart Cart is not active your cart drawer functions as normal.
A/B Testing Smart Cart vs Native Cart Drawer
By now you should have created a Smart Cart and any CSS and JS necessary to hide your native cart drawer when Smart Cart is active. If not, please do so now before proceeding further.
Step 1: Creating your A/B test
Create a new General A/B Test
Step 2: Select your initial settings
Select your Page Targeting, adjust your test ratios and add the appropriate alias text to keep your test organized.
Step 3: Add the code to remove Smart Cart
Click the "Edit" button for the Native Cart variation (the second option in the image above). You'll see the option to add CSS and JS to this variation.
No CSS is needed unless you'd like some visual indicator of when this variation is running. Simply target any element on your store and add CSS to adjust it's color, size, padding, etc to your liking.
Copy and paste this code into the JS box of the Native Cart variation.
document.addEventListener('rebuy:smartcart.ready', (event) => {
/* removes Smart Cart from the page */
Rebuy.SmartCart.destroy();
/* removes the Smart Cart class name from the body */
document.querySelector('body').classList.remove('smart-cart--enabled');
/* confirms this variation is running in the console */
console.log('Smart Cart destroyed');
});
This code does 4 things.
Ensures Smart Cart has loaded and reached Ready status.
Removes Smart Cart from the page.
Removes the classname
smart-cart--enabledfrom the body element so the CSS hiding your native cart is removed.It adds a console log for your visual reference to confirm this variation ran.
Step 4: Select your final settings
Finish your A/B test setup by selecting your Experiment Goal and Test duration.
Step 5: Set your A/B test live
This A/B test will appear under the Draft tab of the "Manage Your Experiments" section.
Select "Start Experiment" to being the test.
Experiments cannot be edited once they are live. Double check all settings prior to going live. You'll need to create a new test to make any changes.
Confirmation
With your A/B Test now live, simply go to your store browser and you should see the experiment running. A/B testing places a cookie in your browser, deleting this cookie and refreshing the page is the fastest way to cycle through the test variations.
Details here: