After creating a widget in the Rebuy Admin, the next step is adding it to your Shopify theme. Manual installation means placing the widget's embed code directly into your theme's liquid files.
Most Shopify themes today are 2.0 themes, which support app blocks through the Shopify Theme Customizer. App blocks are the recommended installation method for 2.0 themes. You can follow the app block installation instructions instead. If you're on an older Vintage (1.0) theme, app blocks are not available and manual installation is required.
Some widgets require manual installation regardless of theme version, including the Gift With Purchase (GWP) widget, Recharge, and third-party widgets like Rebuy's Tracking Page Widgets (Malomo, Passport Shipping, and Wonderment).
Note: Some widgets don't require manual installation or an app block at all. Smart Cart Cross-Sell and Pre-Purchase Cross-Sell are managed directly within the Smart Cart editor. Post Purchase and Checkout Extensions widgets are installed through the Shopify Checkout Editor.
Installation Instructions
Before you get started!
Ensure that the Rebuy Connector is activated within Shopify! While this setting should be enabled during your initial installation of Rebuy, you can verify it by navigating to your Shopify settings > sales channels > online store > click "customize" on your live theme > click "app embeds" on the left-hand navigation > confirm that the Rebuy Connector is toggled on, as shown in the screenshot below.
Step 1: Open the Installation Guide
Go to Merchandising Widgets in the Rebuy admin sidebar. In the widgets table, find your widget and click the Install button in its row.
You can also access this from inside the widget editor: click the Install link in the top navigation bar. Both routes open the same widget-specific installation guide.
(Screenshot above: a Rebuy Widget editor highlighting the "INSTALL" button in the top navigation bar)
If you do NOT want your widget to be visible to your customers, then be sure to toggle live mode OFF prior to installing the widget. The live mode setting is toggled ON by default. To understand the definitions of "installed," "uninstalled," and "live mode," you can refer to the Rebuy Widget Installation Definitions help article for more information.
Step 2: Follow the Installation Instructions
The installation guide walks you through the steps specific to your widget type and theme setup. Follow each step carefully, as the instructions vary depending on whether you're using app blocks or placing code manually in your theme files.
(Screenshot above: Example of the Widget Installation Instruction page)
You can then return to the widget's installation guide and click Mark as Installed in the Manual Tracking section to keep track of which widgets have been installed.
Note: Marking your widget as installed/uninstalled has no effect on the widget. It is used to keep track of which Rebuy widgets you have installed on your store.
Step 3: Test the Widget
Once the code is in place, use Rebuy Preview Mode to confirm the widget is rendering correctly. Click the Rebuy Data button to check the widget's status. It should show as Ready before you go live. If the widget isn't appearing as expected, verify your data source configuration as well.
Widget not showing? Check out Why Isn't My Widget Showing? for a full breakdown of common reasons a widget may not appear and how to resolve them.
Step 4: Enable Live Mode
When you're satisfied with how the widget looks and functions, enable Live Mode in the widget editor to make it visible to shoppers on your storefront.
If you run into any issues during installation, refer back to the installation guide or Check out Why Isn't My Widget Showing?
Manual Widget Installation for Shopify 2.0 themes
Instead of installing widgets via an app block you can opt for a manual installation by navigating to the widgets settings > placement tab and copying the widget div.
This can be useful if you're segmenting your store by users. Example: Don't load Rebuy for B2B or wholesale users.
You'd need to manually install the widgets instead because app blocks load Rebuy when they load the widget.
Copy all text as it appears and paste that into the theme file of your choosing, above the closing body tag </body>.
Examples: theme.liquid, product.liquid
This will manually install the widget the way an app block would have done so automatically.
Afterwards, you may need to adjust the placement of the widget on your page (drag and drop is only possible via app block). You can use the widgets dynamic placement selectors to move the widget where you want it.
Uninstalling a Widget Instructions
Step 1: Toggle Off Live Mode
If you need to uninstall a widget that required manual installation, the first step is to toggle off live mode. This will hide the widget from the public and allow you to make changes without affecting your website's live site. To do this, go to the widget page you want to uninstall and toggle off live mode.
Step 2: Locate the Code in Your Theme
The next step is to locate the code for the widget in your website's theme. This can be done through Shopify or by going to the widget page in Rebuy. Once you have located the code, you can delete it to completely remove the widget from your website.
Step 3: Delete the Code
To delete the code, simply access your theme through Shopify or go to the widget page in Rebuy and click on the "install" button in the top right corner. This will take you to the file where the widget code was previously installed. From there, you can delete the code and click save to remove the widget from your website.
And that's it! You have successfully uninstalled a widget from your website. If you ever need to reinstall the widget, simply follow the installation instructions like you did initially.
FAQs
How do I install an A/B test for widgets?
If you are using app blocks, you can add the placeholder ID directly into the app block where you would normally place your widget IDs. Follow the instructions in the app blocks help document.
Depending on the type(s) of widgets you are A/B testing, you have the option to directly install this code into different files: theme.liquid, or via the Smart Cart Settings. The specific placement of the code depends on the widget type being tested. For instance, if you are testing a widget for the home page, you would insert the code into the theme.liquid file. Please refer to the instructions for each widget to determine the exact location for inserting this code.
Refer to the A/B testing for widgets installation instructions for further clarification on how to install an A/B test for widgets.
How do I access my Shopify theme files?
You can access your Shopify theme files by going to your online store settings within the Shopify admin portal, clicking the horizontal ellipsis, and clicking "edit code." Once you are on the edit code screen
