Overview
Rebuy widgets are the front end user interface that customer interact with to add recommended products to their cart. These are typically used on the Home page, Product page, Cart page and Checkout page. Although they can be installed manually on any page by manually installing the widget html div into the corresponding liquid file. (2.0 themes can use app blocks to accomplish this)
Rebuy widgets are built in Vue.js which allows them to be dynamic according to the data that they are provided. You can learn more about the helpful attributes in this Vue.js guide.
Rebuy's standard widget (Recommended products) has three general layouts (grid, list and line) that can be adjusted via the widget Layout settings according to large, medium and small screens. More on this in Settings.
Rebuy widgets also have a list of methods that can be used in order to provide additional user experience when desired. These functions can be found in the Methods section of the "Widgets" docs.
Also, most all elements of a Rebuy widget have a specific Rebuy class attached to it and a parent id so that targeting specific styles for a widget can be achieved (e.g. #rebuy-widget-1234 .rebuy-product-info). This example would target the product info container of the widget with id 1234 so that you could add additional padding or margin if desired.