How to Use Widgets on blogs
We'll cover two ways to surface product recommendations in your blogs using Rebuy:
By including recommendations carousel to surface multiple products before or after your blog article; and
By featuring a specific product or collection within the body of the blog article itself.
Leveraging both strategies can bring some enhanced conversion opportunities to areas in your online store with high potential for customer engagement.
Include recommendations before or after your blog article.
Step 1.
From the Rebuy Admin, click on Widgets, then scroll down and click on Custom widgets to create a new carousel style widget.
Step 2.
(Optional)
Give your custom widget a title. By default, custom widgets do not include any widget language upon their creation. If you’d like the widget on your blog articles to include a title, expand the Language tab in the widget settings.
Step 3.
Set the widget’s Data Source. By default, the Data Source tied to a custom widget will be to return Specific Products followed by Rebuy’s AI Recommendations. If you do not select any specific products, only the AI Recommendations will be surfaced in the widget.
Once the Data Source has been configured to conditionally return whatever recommendations you want to surface, Save your changes.
Step 4.
Place the widget before or after the Blog post by adding a Rebuy app block to your desired Blog Article Template by customizing your Shopify Theme (Online Store 2.0 themes);
See:
If you have a legacy theme, you can place a widget before or after your blog article by revisiting Step 3. and adding a URL-based rule to your widget’s Data Source. This can allow you to surface the same widget across all your blog articles by including “blog” in the URL condition, or you can surface specific products or collections conditionally based on what article the visitor is reading by including an excerpt of the article name from its associated URL. The default placement location for this will be above the footer at the bottom of the page. To adjust the placement of the widget, enable Dynamic Placement Selectors.
See:
Video example:
Feature specific products or collections within your Blog Article’s body
Step 1.
From the Rebuy Admin, click on Widgets, then scroll down and click on Custom widgets to create a new carousel style widget.
Step 2.
Click on Data Sources. Delete the AI Recommendations Endpoint, then choose the specific product or collection you want to feature. Consider renaming the Data Source to reflect which product or collection you’ll be featuring in the Article Body. Save your changes.
Step 3.
Click Go back to widget settings. Configure the widget layout depending on whether you’re featuring a product or a collection.
Hint: for single specific products, expand the Layout tab and set the Items to Show value to 1. Be sure to also set the Grid Columns for each screen size to a value of 1:
Don’t forget to save your changes once you’ve configured the widget settings.
Step 4.
Place the widget inside the body of your blog article by expanding the Placement tab in the widget settings, highlighting, and copying the manual placement <div> to your clipboard.
Next, from the Shopify Admin, navigate to the blog article in Online Store > Blog posts. Click into the selected post and from the Rich Text Editor’s menu icons, click Show HTML:
From the HTML view, paste the Rebuy Widget’s <div> between the two paragraphs where you’d like to surface the featured product or collection. In HTML view, you won’t see the page breaks that tell you where a paragraph starts and ends, but you’ll be able to determine that by looking for </p>, which indicates the end of a paragraph, and for <p>, which indicates the beginning of a paragraph:
Paste in the Rebuy widget <div> from the clipboard, save your changes to the blog post and preview it to ensure your featured product or collection widget is placed correctly within the blog article body.
Example video: