All Collections
Email Templates
Designers Guide
Product Widget: A Detailed Rundown
Product Widget: A Detailed Rundown

BayEngage's product widget 2.0

Danielle From BayEngage avatar
Written by Danielle From BayEngage
Updated over a week ago

This article explains the advantages of BayEngage's latest product widget and learn how to seamlessly add it into your email templates.

In order to effectively promote and boost sales, it is crucial to promote best-selling or most popular products in the emails to be sent out through campaigns and automations. With this in mind, we are introducing changes aimed at enhancing the configuration of products widget in email templates.

A side-by-side comparison of old vs new product widget:

Old Product Widget

New Product Widget

Supports only one product per widget

Supports up to 9 products per widget

There was only one layout option available, which was the Grid Layout.

It supports three layouts:

  • Grid

  • List Left

  • List Right

In the grid view, there is no provision for dynamic column support.

For example, if we want to change a single row from displaying one product to displaying two, we need to re-configure the layout completely.

The Grid layout now has a dynamic column feature that allows for up to three columns to be supported with just one click.

As only one product could be added per widget, we had to make design changes repeatedly for each product added to the template.

With the ability to support multiple products in a single widget, any design changes made will apply to all products within that widget.

The option to reorder the products in the widgets was not available, so we had to manually delete products and configure them in the desired order.

Now, we can seamlessly reorder products by selecting and dragging them using edit products option.

In the following section, we will dive deeper into the new features of the product widget. We will discuss:

  • How to add multiple products into the product widget?

  • How to edit the selected products in the product widget?

  • How to change the product view layout?

  • How to change the dynamic column view for grid layout?

  • How to edit product details?

I. How to add multiple products into the product widget?

As soon as your eCommerce store is linked with BayEngage, all products will be imported automatically. If you do not see the "Products" widget in the template editor, it indicates that you have not yet connected your eCommerce store with BayEngage. You can add up to 9 products in the new product widget. To do so:

  1. Drag and drop the “Columns” widget into the email template.

Tip💡:

✅ For better alignment, add just a single column per row.

❌ Adding more than one column will not result in a pleasing design experience.

2. Now, drag and drop the “Products” widget into the column.

3. Next, click on the widget within the template, and choose the "Add/Edit Products" option located on the right-hand side.

4. By default, “Grid View” layout for the widget and a single column will be pre-selected. You have the option to select up to three columns for the widget and also modify the layout as needed.

5. You can select a maximum of nine products using the "Choose Products" window available on the screen.

  • You have the ability to search for products by name

  • You can add a product by selecting the "Add Product" option.

6. The chosen products will be displayed on the right-hand side of the screen.

7. You can now rearrange the selected products by clicking on the "Click & Drag" arrow.

8. Once you have chosen the required products, kindly click on the "Add to Template" option located on the top right to add them into the product widget.

II. How to edit the selected products in the product widget?

After adding products to the widget, you have the option to delete, add, or reorder products on the product widget.

  1. To delete, add, or reorder products on the widget, kindly click on the product widget and select the "Add / Edit Products" option located on the right-hand side of the widget.

To Delete a product:

  • To remove a product from the widget, click on the "Delete" icon located to the right of the product name in the "Selected Products" window.

To Add a Product:

  • You can use the search bar to find a new product or choose from the displayed products and click on the "Add Product" option to include it in the widget.

To Reorder the products:

  • The products that you have selected will appear on the right-hand side of the screen. You can now rearrange the selected products by clicking on the "Click & Drag" arrow.

III. How to change the product view layout?

By default, “Grid View” layout for the product widget and a single column will be pre-selected. You have the option to select up to three columns for the widget and also modify the layout as needed. The available layouts are:

  • Grid View

  • List Right

  • List Left

To change the layout, click on the product widget on the template and choose different layouts available on the right hand side.

Different views of the layouts:

Grid View layout:

List Right layout:

List Left layout:

IV. How to change the dynamic column view for grid layout?

The product widget can display a maximum of three columns per row. To modify the number of columns, select the product widget and use the "Products in a Row" option to select the desired number of columns.

Tip:💡

For the "List Right" and "List Left" layouts, the default setting allows only one column. The number of columns cannot be modified in these layouts.

V. How to edit product details?

Once you have linked your eCommerce store with BayEngage, all of your products, including its name, price, URL, and inventory information, will be automatically imported. As you add the product to the widget, all of this information will be automatically fetched and populated within the widget. To modify or alter this information:

  1. To edit the product details, click on the "Edit" icon located to the right of the product name in the "Selected Products" window.

2. You can now update the necessary information on the "Update The Product Details" menu and then click on "Continue" to save the changes.

Note 📒:

If you are unsure about how to migrate from the old template, you can click here to learn more about the migration process.

Did this answer your question?