ABConvert offers a complimentary shipping bar that seamlessly integrates with your Shipping Tests. Simply configure the text and colors, and leave the rest to us! At present, we support two distinct shipping banner styles: a fixed top bar and a floating bottom bar. The floating bottom bar is compatible with all Shopify themes except for Streamline by Archetype. The fixed top bar might necessitate further integration with your theme.
Shipping banner will only be displayed if there is an active shipping test currently running and the visiting customer is apart of the test.
Let's get started!
✨ Looking for different types of shipping banners? Reach out to support via the chat on the bottom right to provide your feedback
Activate Carrier Rates
Before you can begin configuring your shipping bar our carrier services needs to be installed and activated on your store. You can read more about how to do that in our Getting Started with Shipping Tests Guide
Setting Up Shipping Bar
Once carrier rate eligibility has been checked visit the Settings by clicking the "Settings" text on the left sidebar. You'll now see new options which included a "Configure Shipping Banner" button.
Clicking this button will bring up a easy to use popup with all the options and styles that can be changed. Most of these settings are self explanatory and you can always preview them at anytime so we'll leave this section to you.
Configuring Banner Text
The text of your shipping banner is a crucial element when customizing it. We've thoughtfully provided some effective examples here, known to boost conversions. However, you can modify these options whenever you like. Additionally, we offer the capability to incorporate custom variables into your shipping banner that automatically update according to ongoing experiments and visitor locations. Here's a summary of the variables available for use:
{threshold} - By including this, the threshold value for the customer's experiment variant will be displayed, along with the currency and currency symbol (e.g., $150 for the USA, NT$150 for TW, €100 for the EU)
{shipping_rate} - Adding this will show the shipping rate cost for the customer's experiment variant, complete with currency and currency symbol
{country} - Inserting this variable displays the two-letter country code based on the visitor's location (e.g., NZ, US, CA)
{currency_code} - Including this will exhibit the three-letter currency code according to the customer's location (e.g., USD, CAD)
That's it! Once you've customized all these options to your liking the Shipping Banner will be displayed for all customers who are visiting from a country where your experiments are currently running and who are part of an experiment group as long as you remember to check the enable button at the top of the popup and save your settings.
Troubleshooting Fixed Header Banners
Although we strive to incorporate this kind of banner into your theme automatically, there may be instances where we cannot determine its placement. If you've selected the fixed header banner option and it doesn't appear after 5 minutes, you might need to add an additional snippet to your theme to support this banner style.
Simply insert the following snippet wherever you want the shipping banner to appear:
<div id="abconvert-shipping"></div>
ABConvert will only detect the first instance of this script, so we recommend placing it in one of your header.liquid files.
🎯 Not seeing any banner on your store? To provide a fast and seamless experience for your customers we cache banner data for a period of up to 5 minutes. This won't affect customers' checkout capabilities. If you'd like to test it yourself without waiting, simply append ?preview=0 or ?preview=1 to your URL bar, allowing you to preview the banner for that variant.
If you still don't see any banner after 5 minutes or with ?preview please reach out to support using the chat icon on the bottom right.