The Beginners Guide to Magento Blocks and Widgets

Blocks and Widgets are the key layout features in Magento. These two features are very closely linked, and are often used together.

One way to think about Blocks is that they are mini-Pages. A Block can also contain text, images, video and more. But because Blocks are smaller, you will see them around the edges of your site. Blocks are often inserted into headers, sidebars and footers.

However, Blocks are placed using Widgets. First you create a Block, and then you use a Widget to decide where that Block will be displayed.

Let’s walk you through some examples and show you how Blocks and Widgets work in Magento.

This guide is taken from Magento 2 Explained, the best-selling book for Magento 2. We use the example of a store called “Orangeville” in that book, so you’ll see it referred to here.

---

Creating Magento Blocks Explained

Let’s go through the process of creating our first Block. This will contain an HTML link.

• Go to “Content”, and then “Blocks”.
• Click “Add New Block” in the top-right corner.

• Enter “Key Links” as the “Block Title”. This is what visitors will see on the screen.
• Enter “key_links” as the Identifier. This string is what Magento uses to identify the block, but visitors will never see it.

• Click the bullet icon in the editor toolbar:

• Type “About Orangeville” as a bullet point:
• Select the “About Orangeville” text and click the link icon.

• You will now see a pop-up window. Enter the URL of your “About Orangeville” page. If you’re not sure what this is, you can open your Magento site in a new browser tab and find the URL, which is likely to be example.com/about-orangeville/.
• Click “Insert”.
• You now have an “About Orangeville” link inside your Block:

• Click “Save Block”.

---

Creating Magento Widgets Explained

We now have the challenge of placing your block into your site design. This is where Magento’s Widgets come in useful. In Magento, a Block is just a piece of content. It’s the Widget that controls the placement of the Block.

However, that’s not all a Widget can do. A Widget can place our simple, new Blocks, but it can also place many other features.

• Go to “Content”, and then “Widgets”.
• Click “Add Widget”.
• For “Type”, choose “CMS Static Block”.
• For “Design Theme”, choose “Magento Luma”.
• Click “Continue”.

• Enter “Key Orangeville Links” for the “Widget Title”.
• Under “Assign to Store Views”, select “All Store Views”.

Next, we’re going to control which URLs this Block appears on.

• Click “Add Layout Update”.

• Choose “All Pages”.

• Choose “CMS Footer Links” for the “Container” option.

Both of these choices, “All Pages” and “CMS Footer Links”, may not make much sense to you yet. However, we’ll finish creating the widget and later in the chapter, in the section called, “Magento Widget Placement Explained”, we’ll explain more about why we made these choices.

Under “Layout Updates”, we’re going to make a second choice for where to place our widget.

• Choose “All Product Types”.
• Choose “CMS Footer Links” again.
• After adding both of these options, your screen will look like the image below.

At this point, you’ve created the Widget and told Magento where it should appear on your site: this Widget will appear on all our Pages and all our Products.

Now it’s time to choose the content of the Widget, which will be the Block you created earlier.

• Click “Widget Options” in the sidebar.
• Click “Select Block”.

• Now you can choose the “Key links” block you created earlier:

• Click “Save”.
• Visit the front of your site, and you’ll see your link is now published in the footer. You created a Block with the content, and published it inside a Widget.

---

Creating Blocks and Widgets Together

There are definitely some tricky steps as you create Blocks and Widgets. So let’s try this whole process together. We’ll create a second Block and place it on our site with the help of a Widget. This Block will tell people that we have a 100% satisfaction guarantee.

• Go to “Content”, and then “Blocks”.
• Click “Add New Block”.
• Title: Satisfaction Guaranteed
• Identifier: guarantee

• Enter text for your Block. I wrote “Here at Orangeville, your satisfaction is our top priority. If you’re not happy, we’ll refund your money.”

Next, we’re going to upload an image for our block. 

• Place your cursor into the main content area, below the text that you just wrote.
• Click the tree icon in your editor toolbar.
• When you see the pop-up box, click the small box icon.
• Find an image that you can upload. I’ve choosen a 100% badge.

• Click “Insert File”.
• Image Description: Satisfaction Guarantee 
• Click “Insert”.

• You now have a Block that contains both text and your new image.
• Click “Save Block” to finish creating this Block.

Next, let’s create the Widget that will display this Block on our site.

• Go to “Content”, and then “Widgets”.
• Click “Add Widget”.
• Type: CMS Static Block
• Design Theme: Magento Luma

• Widget Title: Satisfaction Guaranteed
• Assign to Store Views: All Store Views

• Layout Update: Anchor Categories
• Container: Sidebar Main
• Click “Widget Options” and choose the “Satisfaction Guaranteed” Block that you just created.

• Click “Save”.
• Visit the front of your site. Click on one of the category links in the top menu. In the image below, I clicked on “Fruit”. You will now see your guarantee Block in the left sidebar:

---

Magento Widget Placement Explained

One common question I get from Magento  learners is about the placement of Widgets.

How do you know to choose “CMS Footer Links” or “Sidebar Main” for the Container? After all, there are 22 different choices, as you can see in the image below.

What’s the difference between “After Page Header” and “After Page Header Top”? What’s the difference between “Page Footer” and “Page Footer Container”? Those names are so similar that they can definitely be confusing.

Unfortunately, there’s no sure way to tell in advance, although the name will give you a good idea of the placement:

• After Page Header: This is likely to be under the main menu.
• Main Content Bottom: This is probably low down on central part of the screen, underneath our products or Page content.
• Page Top: This will appear high up on Pages, but not on Product screens.

It’s worth noting that these options change, even on the same site. If you are trying to place a Block and choose “All Product Types” for your Widget’s “Layout Options”, then you will get a different set of choices, shown in the image below. These options provide some placements that only make sense for your product screens. For example, you now see choices that include “Product social links container” and “Review Form Fields Before”. Those Widget placements don’t make sense anywhere except for on Product screens.

On the other hand, this list can sometimes be much shorter. In the next part of this chapter, we’ll see that some Widgets only come with three Container options.

So, there’s no guaranteed way to tell exactly where your Widget will appear if you choose a particular Container. There will be some testing and experimentation involved as you test these different options.

---

Magento Blocks and Widgets Summary

Blocks and Widgets allow you to add new items to your site’s design. However, there are some elements on your site that can’t easily be modified or replaced from Magento’s admin interface. They look like they should be Blocks and Widgets, but Magento has not created them that way. So, I created a page with instructions for updating some of those default elements.

If you’re ready to learn more about Magento, check out Magento 2 Explained, the best-selling book for Magento 2.

We also have some more great Magento tutorials online, including:

• The Beginners Guide to Understanding Magento Taxes
• Base, Small, Thumbnail and Swatch Images in Magento
• Learn What Magento 2 Indexes Are and How You Can Manage Them