When adding a widget to a layout, occasionally we might want to add it into a different layout keeping most of the attributes with the same values.

That would require adding the same widget to both layouts and setting the attributes accordingly for each.

In the future if we were to change these widgets, we would have to go to each layout and change each widget individually.

That problem can now be solved with Parent/Child Widgets.

With this feature you can add a widget to a layout and set all the attributes you like as usual

View in the storefront

and then convert it into a Parent Widget.

A Parent Widget is always created by converting an existing widget into a parent.

Open a widget in a layout and click Convert to Parent Widget.

Important: It will be helpful for you if before converting a widget to a Parent you set its name to something more meaningful. Otherwise you might end up with multiple widgets in the Parent Widgets tab all with the same name. The name can be changed later but the name visible in the layout remains unchanged until you remove the child and add it back.

A parent widget will be created (with the id #187624 in this example) and you'll now see a new tab along the bottom called 'Parent Widgets'. This is where your parent widgets will be stored.

If you edit the child widget placed in this layout, all fields will be locked. These attributes are now inherited from the parent widget.

You can edit the parent following the link at the top

Or from the Parent Widgets tab

At this point, you can drag this widget to any layout you wish.

Let's add it to a custom layout cloned from the default Product Finder layout by dragging it from the Parent Widgets tab.

The default Product Finder widget was replaced by the Product Finder stored in the Parent Widgets tab.

See the same widget in use now also in a custom product finder layout

If you decide that this widget in the Product Finder layout should have some attributes with a different value, for example, suppose you want in this page to have the finder widget with labels above selections:

Open the child widget properties in this layout, check override for the attribute Labels Above Selections and enable it.

This option only in this layout will be different than the parent widget

So you can now have the product finder in the results page with labels above selections

And the same finder in the homepage with no labels above selections

A child widget can be reverted to a simple widget. The parent will always remain in the parent widgets tab for future use until you decide to delete it.

Values set in attributes being overridden will also follow to the simple widget.

Click on Revert to Simple Widget when editing a child widget from a layout

You can at any time see on which layouts a widget is being used by clicking on the green info icon at the top of the parent widget properties

Parent widgets can only be deleted if not in use, so if you attempt to delete a parent in use, you will see an identical warning

First remove all child widgets from the layouts using it (or convert them to simple widgets), and them remove it.

And that is all, hopefully this document will be all you need to use parent/child widgets. You can now go and try it yourself :)