How to Duplicate Custom Templates for A/B Testing Widgets

Rebuy widgets that use custom Liquid templates stored in your Shopify theme files require extra steps when setting up an A/B test. Each variant needs its own custom template and updated CSS widget ID references, which goes beyond the standard A/B Testing Widgets setup.

To safely test the setup before pushing to your live storefront, it is recommended to duplicate your Shopify theme first then perform all theme-related changes from Steps 4 through 8 in the duplicated draft theme. After the Placeholder ID is installed and the experiment is started, the A/B test will only be live in the theme where the Placeholder ID is installed — so changes to the draft theme will not affect live traffic. Once confirmed working in the duplicated draft theme then publish the theme live.

To set up an A/B test for a widget that uses a custom template, start by duplicating the original widget in the Rebuy Admin. In your widget list, locate the widget you want to test, click the three-dot menu on the right side of that widget row, and select Duplicate. This creates a copy of the widget that will serve as your A/B variant.

The duplicated widget may not automatically carry over the Custom CSS from the original. Open the original widget, expand the CSS panel, select all the CSS (Command + A, then Command + C on Mac), then open the duplicated widget and paste that CSS into its CSS field.

Example:

Original Widget:

Duplicated Widget:

Custom CSS for Rebuy widgets is scoped to a specific widget ID using the selector #rebuy-widget-XXXXXX. Because the duplicated widget has a new ID, all widget ID references in the CSS must be updated to match. In the duplicated widget's CSS panel, find every instance of the original widget's ID and replace it with the new widget ID shown in the top-right corner of the widget editor.

For example, if the original widget ID was 273159 and the new duplicated widget ID is 276275, update every CSS selector from #rebuy-widget-273159 to #rebuy-widget-276275.

The custom widget template is stored inside your Shopify theme. Navigate to your Shopify Admin, go to Online Store, then Themes. Click the three-dot menu next to your active theme and select Edit code.

In the file explorer on the left, expand the snippets folder and look for the file named rebuy-extensions.liquid.

Note: The file may also be named rebuy-templates.liquid depending on how your theme was originally configured.

Inside the rebuy-extensions.liquid file, each widget's custom template is identified by a script tag containing the widget's ID. Search for rebuy-widget-XXXXXX (replacing XXXXXX with the original widget ID) to locate the opening of that widget's template block.

Copy everything from the opening script tag — or the HTML comment just above it — all the way down to and including the closing script tag for that widget's template.

Example, top of the custom template:

Example, last part of the custom template:

Paste the copied template code directly below the original template block in rebuy-extensions.liquid. Then update two things in the pasted block:

Once updated, click Save in the Shopify theme code editor.

The A/B test Placeholder ID is the widget ID Rebuy uses to randomly serve either the control or variant to each visitor.

Copy the Placeholder ID from the experiment settings in Rebuy Admin, then install it using one of two methods:

Option A — App Block in the Theme Customizer: Open the Shopify Theme Customizer, navigate to the page where the widget should appear, add a Rebuy Widget app block, and enter the Placeholder ID in the Widget ID field.

Option B — Dynamic Code in Theme Files: Open the appropriate Liquid template file and add a Rebuy widget div using the Placeholder ID as the data-rebuy-id value. This is the same div format used for any standard Rebuy widget installation.

Example:

The A/B test Placeholder ID handles rendering either the control or the variant widget for each visitor. If the individual widgets are also installed directly in the theme, they will render on their own and create duplicate widget appearances on the page.

Check the following to confirm neither widget is separately installed:

Go to the A/B Testing section in the Rebuy Admin, open the experiment, and click Start Experiment. Confirm the prompt to begin. The experiment is now live and Rebuy will randomly serve the control or variant widget based on the traffic split you configured.

Please see the next section for considerations when the experiment ends.

When an A/B test ends, Rebuy selects a winning widget and reassigns the Placeholder ID slot to that winner. The Placeholder ID remains installed in the theme, but the winning widget does not automatically carry over its custom template. Take one of these two actions to restore the custom template:

For more on how ending an experiment works, see the A/B Testing Widgets article.

Rebuy Support covers features and functionality within the standard Rebuy package. Custom template modifications, custom CSS, custom JavaScript, and custom scripts fall outside the scope of standard Rebuy Support.

If an issue arises and you are unsure whether the custom template is the cause, try running the A/B test without the custom templates temporarily. If the test runs and both widgets render correctly, the issue is likely specific to the custom template code rather than the Rebuy A/B testing feature.

If you're interested in having Rebuy's Professional Services team build and implement custom widget templates for you, tailored to your business, start your journey by meeting with a Rebuy team member to assess your business requirements. Based on your goals, the team will recommend a suitable implementation package and provide pricing details.

Schedule a call with our team today to learn more about our implementation packages and how we can help you achieve your goals.