Customizing your widgets can significantly boost your sales and create cohesiveness throughout your store. The guide below provides a high-level overview of how to customize your widgets to fit your store, thereby driving sales and increasing average order value (AOV). If you wish to highly customize and create behaviors not default to our current widgets, you can do so by using a custom template. Refer to our guide on how to do this at How To Create A Custom Template For A Rebuy Widget. Custom templates provide unique styles and features tailored to your Rebuy widgets, facilitating integration with your store's design and functionality.Additionally, all widget customization features, including the ability to apply custom code snippets, are available across all Rebuy plans. You do not need to upgrade your account to enable these functionalities.
Important: Custom templates are currently not supported for post-purchase offers and checkout extensions.
Step 1: Getting There
From your Rebuy admin dashboard, select "Widgets". From here, you can view existing widgets as well as create new ones, more on that here. To customize your widget select the widget in question and click "Edit".
Step 2: Working through General
This is where you can make changes to the overall of the widget such as the name, product type and it's different redirects customizing the basic functionality of your widget. Depending on where you want the widget and how you want your widget to function, you need to select the widget type, whether or not it redirects you through either the add to cart action or on decline if you are using a pop up.
Product Types
Product Types
One Time - Widget will only show one time purchase as an option in the widget
Subscription only - Only items that have a Subscription frequency associated with it will populate in the widget. ⚠️ If you don't have your subscription integrations set up correctly this will not work. To make sure it is set up correctly double check the steps you took using this guide. If you have already done so then please reach our to Customer Support through the chat bubble on the lower right and we will be happy to assist!
One time and Subscription - This will return items that meet both the one time and subscription only criteria
Step 3: Language
From here you can edit the language of your widget! This includes headers, titles, button language, etc.
Step 4: Choosing the Layout
Changing the layout type can be very nice for changing the look of your widgets site-wide. First, Select the number of products you would like to display.
Then select your layout from the three possible configurations for each type of screen size. Grid, which has a carousel attached to it by default (you can uncheck this if you would like), list, and line. Selecting these options should auto-update the widget previewer on you can see the differences between these.
Grid:
List:
Line:
You can also change the "Product Options" these settings change how variant options are displayed and behave.
Step 4: Placement
Placement will default to the bottom of the page file you are adding the widget to the "product.liquid" file. These selectors are not used very often as you can manually move your widget to its desired location in your Shopify Theme. If you were to use these selectors, you would locate the CSS class name/ ID, and add it to the selectors, then choose before, after, etc for placement. If you are unfamiliar with getting the class name and ID you can do so by right clicking anywhere on the page and clicking on inspect W3 Schools can help with understanding how to identify classes and call them.
Step 5: Images
If you would like to customize the way images will load with the widget (such as the roundness or setting a specific height) you can add these settings here.
Pro tip: If your widgets add to cart buttons aren't lining up using fixed image heights can help line those up so they are uniform.
Step 6: Styles
If you have or haven't already created a "Rebuy Theme" to match the design of your site, you can do that here. If you would like to manually adjust the styles of your widget, such as the colors of your headers, titles, button language, etc. You can do so here. There is also a box where you can add custom CSS to affect your widget styles. For advanced customization, you can use JavaScript and additional CSS to add unique designs or elements, such as rendering specific text or interactive features into the widget. Compatibility of these customizations may vary based on the widget template used.For users looking to add advanced customizations, follow these steps:
Access the Guidance Documentation: Visit the help article How To Create A Custom Template For A Rebuy Widget for detailed examples, including code snippets for adding elements like price displays or 'Add to Cart' buttons.
Customize Your Template: Edit the template to meet your specific business needs, ensuring a seamless integration of your store's design elements into your widget.
Final Step: HIT SAVE!
Remember that you can toggle "Preview Mode" on your widget to make it viewable to customers or not while you work on it. If you have never used preview mode before we have a walkthrough below.
Known Limitations
Post-Purchase Offers and Checkout Extensions: Custom templates are not supported for these widgets.
Support for Custom Code: Assistance in crafting custom code falls outside the scope of Rebuy’s Support Team. For more advanced troubleshooting, refer to the Rebuy Help Center.
Implementing and Verifying Custom Code for Widgets
To ensure that custom code is correctly implemented and verified, follow these guidelines:
How to Verify Code Placement
Use Preview Mode: Access Preview Mode in the Rebuy Admin Dashboard to evaluate widget code placement within your theme.
Check the
theme.liquidFile: Place code snippets appropriately, like near the</body>tag or another vital section of your layout.Re-check Setup: Return to Preview Mode and use the Rebuy preview bar to confirm installation status and functionality.
By verifying the placement and functionality of custom code, you ensure the smooth and intended operation of your widgets.