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.
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.
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.