Customizing Widgets
Strauss Van Wagenen avatar
Written by Strauss Van Wagenen
Updated over a week ago

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: Selecting the Widget Type

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, as well as the data source attached to it.

Step 3: Choosing the Layout

Changing the layout type can be very nice for changing the look of your widgets sitewide. First, Select the number of products you would like to display. Then select your layout from the three possible configurations. 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. You can also change the "Product Options" these settings change how variant options are displayed and behave.

Grid:

List:

Line:

Step: 4 Placement

Placement will default to the bottom of the page file you are adding the widget to such as the "product.liquid" file. These selectors are not used very often as you can manually move the Rebuy

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.

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.

Step 6: Language

From here you can edit the language of your widget! This includes headers, titles, button language, etc.

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

Did this answer your question?