magento-2-template-block-01

A Clear & Simple Guide on How to Set Template in Block in Magento 2

A clear tutorial on Magento 2 set template in the block is on the way right now!

Have you ever questioned whether templates, layouts, and blocks are the same or not? Well, they are not.

Do you know how to set templates in the block? If you don’t, you come to the right place.

Here we want to deliver another tutorial to help you create the best e-commerce website, and you can quickly impress your customers.

In this blog, you will see:

  • Differences among Magento templates, blocks, and layouts
  • Reasons why templates are essential for any website
  • How to set a template in a block in Magento 2
  • Bonus part: Best template option for Magento 2 block

Now, let’s get started now!

Differences Among Magento 2 Template, Block, and Layout

Many fresher developers usually cannot distinguish between template, block, and layout. Understanding this difficulty, we decided to help you with this section.

This section will show the connection between them and their role in a Magento website.

#1. Layout

magento-layout

>>> Want More? Click Now: How to Use Magento 2 Theme Layout for Your Storefront?

In Magento, the layout is to decide the structure of a web page using an XML file that identifies all the blocks composing a page.

Usually, a layout is called by the number of columns on the web page. Most pages on a website can be categorized as fitting into a 1, 2 to 3-column layout. The image above is an example of a 2-column layout.

#2. Block

To define, a block is a unit of content that can be located anywhere on the page layout. Content blocks are used to display fixed information, such as text, images, and videos. Such blocks sometimes are called static blocks or CMS blocks.

There are two types of blocks:

  • Structural blocks:

magento-structural-block

>>> Check It Out: Magento Grid Customization – Best Practices & Best Themes Review!

These blocks are created to position other blocks on the page. On the 2-column layout above, we will have blocks like Header block, Left block, Main block, and footer block.

  • Content blocks:

magento-content-blocks

Content blocks are displayed inside structural blocks. Each content block will represent a specific topic. For example, there are 4 content blocks shown on the left block: Category list, callout, product tags, and compare products.

You can create content blocks without executing coding. By using the Widget tool, or composing a layout update in XML, blocks can be positioned anywhere you want on the layout.

However, using just layouts and blocks is not enough to make a stunning website to impress customers to purchase at your online store. There is only text, and image, and stuff on a blank space, that’s all.

But don’t worry as templates are born to solve that problem. Let’s continue!

#3. Template

Templates are PHTML files located in the design folder. They contain both PHP and HTML code. These templates are used to take data from blocks and display it.

In other words, templates will decide how the blocks will be presented on the web page. Once the template is called in the layout, it will be displayed.

Now you can see that templates, blocks, and layouts are not the same, but they contain each other.

And to present layouts and blocks most cleanly and beautifully, you need to set the template in such blocks. That’s why you cannot overlook our simple and understandable tutorial below.

Why Do Templates Matter for Any Website?

magento-templates

>>> Don’t Miss This: A Simple Guide on How to Install Free Magento Template!

As we have said, templates decide how you display layout and block beautifully. But using templates is not the only way to design. Still, templates are highly recommended.

Templates can solve 3 main problems in designing:

  • Designing from the beginning to the end is quite time-consuming as designers have to create every detail.
  • Not everyone has professional skills in designing.
  • Hiring professionals is quite expensive.

With templates, even non-professionals can also design on their own. Therefore, it will save a lot of time and money.

Moreover, templates and extensions usually accompany that not only can make up your website but also can optimize your store. Hence, you can impress and create the best experience for customers as well.

Magento 2 Tutorial – How to Set Template in Block in Magento 2?

set-template-block-m2

>>> Have A Look Here: More Magento themes for e-commerce sites!

How to set a template in the block in Magento 2 is not so complicated as most users thought. You just need to follow these simple steps below.

There are 2 approaches:

  • Using the template attribute: The following code is a specific example of this approach.
<referenceBlock name="page.main.title" template="%Namespace_Module::new_template.phtml%"/>
  • use the <argument> instruction: Another way is to use the <argument> instruction, which is demonstrated by follows.
<referenceBlock name="page.main.title">
   <arguments>
     <argument name="template" xsi:type="string">%Namespace_Module::new_template.phtml%</argument>
   </arguments>
 </referenceBlock>

In both examples, the template is specified according to:

  • Namespace_module: Define the module the template belongs to. For example, Magento_Catalog
  • new_template.phtml: The path to the template relative to the templates directory. It might be <module_dir>/view/<area>/templates or <theme_dir>/<Namespace_Module>/templates

And that’s all you have to do to set a template in the block in Magento 2. It’s quite simple, isn’t it?

Final Thoughts

As we have always mentioned, designing is not an easy step at all. It requires qualifications, carefulness, details, and creativity. Also, unlike the usual design, web design is much more complicated as designers and developers have to deal with codes.

So, we hope that this article will help with those problems. You can know clearly about template-related concepts and terms. Besides, a clear tutorial on Magento 2 set templates in blocks will enable you to complete designing your website quickly.

If you have any questions or more detailed information about Magento 2 template blocks and Magento 2 tutorial, please feel free to contact us anytime.

Thanks a lot for reading!

About Scott Taylor

Scott is a Magento programmer, Drupal & Wordpress developer in Florida that experiences in PHP, MYSQL, jQuery, JavaScript, HTML & CSS. He'd love to have a BBQ at the weekends.
Previous 4 Simplest Ways to Upload a Magento 2 Themes
Next How to Install Magento: A complete guide for beginner

Check Also

printshop-theme

Printshop: Magento Print Theme Review & Installation Guide

Want to run an online store in the printing market? Magento Print Theme will help …

Leave a Reply

Your email address will not be published. Required fields are marked *