Running an A/B Test on a Simplified Navigation Bar

I am trying to run an A/B Test with a variation that hides my Shopify navigation bar & replaces it with a simplified navigation bar created in builder.

Once I hide or unhide the navigation bar using Builder’s editor - any A/B Testing variations created don’t have the ability to then unhide or hide the bar again. For instance - if I create a control page as Test A (with the Shopify Nav) - I don’t have the ability in Test B to hide the Shopify Nav (the toggle box is no longer appearing).

Can someone please advise or help with the setup of this test? Thank you so much in advance!

Hi @blok,

You can use custom CSS to hide and unhide the Shopify header for test variants, you can find more help at our forum post Hide Shopify Header toggle not working.

Let us know how that works for you. Thank you!

Thank you Manish - this didn’t quite work:

I believe my scenario is slightly different form the example you shared. I’m unable to hide the header on only specific test variants when I use Builder’s A/B functionality. Can you take a look at the way this page is setup?

Hi @blok,

Please try adding the below CSS code to the test variation where you want to hide the header

#shopify-section-header{
    display: none !important;
}


Thank you! This worked perfectly — is there a way to generate preview links of the variants?

I copied the Variation ID: 5548ccc0df05488c8285151521972dd7 — but not quite sure how to reconfigure the URL to generate the exact A/B Testing Variant.

Hi blok!

I don’t think you can generate preview links for a/b test variants, but if the a/b test is set up and then you can check the preview of variants using browser incognito mode.

Thanks Manish - however once I publish the A/B Test — you can no longer make edits to any of the variations, correct? I’d prefer to have a way to see previews of the variants to share out with other functions / teams before we officially set the test live.

Hi @blok,

Once a test is published and receiving traffic, you cannot add or remove variants. This ensures that the results of your test aren’t impacted by data from previous tests or earlier versions of the content. To see the preview and share it with other teams before publishing it, you can possibly share the draft mode URL with them which they can verify by checking in browser normal mode and incognito mode.

I don’t believe the draft-mode URL is possible for additional variants. Can I duplicate the variants onto separate pages by chance & share out those as previews? Ideally need examples for all variants before we publish the test live.

Open to potential workarounds here! Thanks Manish

Hi @blok,

Duplicating test variants seems to be a good workaround for sharing within teams. If there is any other workaround that exists then we will let you know. Thank you!

Hi Manish - thank you! One last point here — Builder doesn’t seem to be allowing us to publish the A/B Test, it just becomes an endless loop here when hitting publish:

Hi @blok,

Looks like publish is failing because of the below error

Could not save auto save FirebaseError: [code=invalid-argument]: Document ‘projects/builder-3b0a2/databases…’ cannot be written because its size (1,741,310 bytes) exceeds the maximum allowed size of 1,048,576 bytes

We have a 1 MB limit on firestore documents, and your content has already exceeded that limit so publishing the content is failing. The general workaround has been to extract symbols/templates to make the document smaller. We recommend that you convert some of your sections to symbols and templates to make the document size smaller to resolve this.

You can refer to our loom for help understanding symbols Loom | Free Screen & Video Recording Software | Loom

I see - thanks for digging into this! You’re the best.

How do I see the various sizes of the different A/B tests / variant files?

Hi @blok

You can possibly check the different variant sizes in the Chrome dev tool