Once you've created a widget successfully, the next step is to integrate them into your theme using either manual installation to insert them into your theme files or app blocks, depending on your theme type. Vintage themes (1.0) require manual installation, whereas 2.0 themes utilize app blocks.
This guide will outline how to install widgets and A/B testing placeholders manually into the theme files for those vintage themes. If you are using app blocks, you can follow the app block installation instructions.
There are certain widgets that DO NOT require a manual installation or app block regardless you are running a 1.0 vintage or 2.0 theme such as a Smart Cart Cross Sell or Pre-purchase Cross-Sell widgets (which are housed within the Smart Cart). The Post Purchase and Checkout Extensions widgets also do not require a manual installation into the theme.liquid or app block.
Certain widgets, such as the Thank You Page, Gift With Purchase (GWP), Recharge, and Third Party Widgets, DO require manual installation regardless of whether you're using a 1.0 vintage or 2.0 theme.
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: Access the Widget Page
To begin the installation process, you will need to access the widget page that you wish to install. This can be found in the widgets tab section of the Rebuy dashboard. Once you have located the widget page, click on the "install" button on the top right.
Step 2: Follow the Instructions
After clicking the "install" button, a new window will open with specific instructions for you to follow to complete the install process. These instructions may include copying and pasting code, configuring settings, or other steps. It is important to follow these instructions carefully to ensure a successful installation.
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 3: Mark the Widget as Installed
Once you have completed the manual insert of code or any other necessary steps, you can return to the widget page and mark the widget as installed. This will help you keep track of which widgets you have installed on your website.
Step 4: Test and Set Live
After marking the widget as installed, it is important to test it to make sure it is functioning properly. Once you are satisfied with the widget's performance, you can set it live and it will be up and running on your website.
Congratulations!
You have successfully installed a widget on your website. If you encounter any issues during the installation process, please refer back to the specific instructions provided on the widget page.
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, checkout.liquid, additional script files, 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. Similarly, if you are testing a widget for the checkout page, the code would go into the checkout.liquid file. If you are testing a widget for the thank you page, you would add the code to the additional scripts section in the Shopify admin settings. 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
