Widgets in Magento Commerce

Widgets in Magento Commerce allow business users to insert different kinds of content throughout the front end of their websites without having to write a single line of code. Widgets are a commonly underused feature in Magento, as they aren’t the most intuitive feature and until you create one or two, it is not always clear how to accomplish what you want.

In this article, we’re going to cover:

• Overview of Widgets
• Types of Widgets
• Where you can insert Widgets
• A couple of real-world examples of Widgets in use

Overview of Widgets

Prior to the introduction of Widgets in Magento Commerce, if you wanted to insert content into any of Magento’s layout blocks (header, left column, main column, footer, etc) you needed to use Layout XML. For developers, this was fairly straightforward. But business users found this clunky and difficult to work with.

Widgets are Magento’s answer to the problem of how to conditionally insert content into any section and page of your site. Combined with Banners/CMS Blocks and Customer Segments, you can get really creative in displaying targeted marketing to your customers.

Types of Widgets

This is a list of all of the Widget types in Magento:

Banner Rotator

Insert one or more banners

CMS Hierarchy Node Link

Insert a link to a specific CMS page OR to a CMS node. This is helpful if you want to insert a CMS menu into all CMS pages.

CMS Page Link

Link to a specific CMS page

CMS Static Block

Insert a Static Content block.

Catalog Category Link

Link to a specific Category

Catalog Events Carousel

Display a list of all Catalog Events on site.

Catalog New Products List

Insert a list of new products

Catalog Product Link

Link to a specific Product

Gift Registry Search

Insert a form to allow user to search for registry

Order by SKU

Insert an “Order by SKU” form

Orders and Returns

Insert a form that allows guests to find their order using their Order ID, Last Name, Email, and Zip.

Recently Compared Products

Insert a list of recently compared products

Recently Viewed Products

Insert a list of recently viewed products

Wishlist Search

Insert a form that allows a visitor to search for a wishlist

Where you can insert Widgets

When you create a new Widget Instance, you have to decide on what pages you want that Widget to display and in what blocks on the page that widget should display in. You’ll do this in the “Layout Updates” section.

• You will first choose a “Display On” value to tell Magento what page you want this Widget to display on. If you want to use the Widget on multiple pages, you can insert multiple Layout Updates using the “Add Layout Update” button.
• You will now need to choose where on the page you want this Widget to show—you’ll do this using the “Block Reference” drop-down. Depending on what Widget type and “Display On” you have selected, different options will show here, but this is a list of the commonly available locations:
  • Breadcrumbs
  • Left Column
  • Main Content Area
  • My Cart Extra Actions
  • Navigation Bar
  • Page Bottom
  • Page Footer
  • Page Header
  • Page Top
  • Right Column
  • Store Language

This is a screenshot explaining what each of those locations relates to:

Example 1

A massive snowstorm just buried your main warehouse. You need to let all of your customers know that their shipments are going to be delayed by a couple of days, so you want to display a site-wide message with this information.

1. Create a CMS Static Block that contains the content you want to display.
2. Go to “CMS > Widgets” and click “Add New Widget Instance”
   • Select “Type: CMS Static Block” and the appropriate “Design/Package Theme” value
3. Select these options on the “Frontend Properties” tab:
4. Select these options on the “Widget Options” tab:

Your message will now be displayed on all pages:

Example 2

Your store offers free shipping if an order is equal to or greater than $100. You want to promote this offer to customers that have less than $100 in their cart by telling them about the promotion and you want to congratulate customers that already have $100 in their cart by telling them that they’re getting free shipping. To accomplish this, we’re going to use a combination of Customer Segments (what visitors to display the message to), Banners (what message display), and Widgets (where to display the message).

1. Create a Customer Segment called “Less than $100 in cart” and add this condition:
2. Create a Customer Segment called “More than $100 in cart” and add this condition:
3. Create a CMS Banner called “Free Shipping – Order $100 to Qualify”. In the “Content” tab, insert a message like “<h2>Free shipping over $100!</h2>”
4. Create another CMS Banner called “Free Shipping – Your Order Qualifies”. In the “Content” tab, insert a message like “<h2>You get free shipping since you’re ordering over $100!</h2>”
5. Now that you’ve created the Customer Segment and Banners, we’ll tie this all together with a new Widget:
   • Create a new Widget Instance with the type of “Banner Rotator”
   • Select these options on the “Frontend Properties” tab:
   • Select these options on the “Widget Options” tab:

Once you finish these steps, you can see it in action:

Conclusion

After reading this summary of Widgets, I’d recommend referring to the “Widgets” section of the Magento Commerce User Guide to get answer any questions you might have. Hopefully, this overview will help you see how you can use Widgets to more effectively run your business.