Log in
Platform
Solutions
Use cases
Log in

Understand the basics of static blocks in Magento 2

Creating engaging web content is a real challenge in today’s day and age especially if you’re not a front-end developer. Web content management has become the cornerstone of delivering a personalized digital experience and is expected to grow irrevocably in the times to come. Projected growth of this industry seems limitless. As per research, its market is expected to grow from $ 6.9 Billion in 2021 to $14.3 Billion by 2026. And even though as common as it may seem, “A book should not be judged by its cover”, websites very often face extreme snap judgments. For instance, it takes a user about 50 million seconds (0.05 seconds) to decide if they either want to stay or not. 38% of the web users will stop engaging with a website if the content or its layout appears unattractive to them.

In order to ensure that, we’ll be leveraging one the most important features of Magento 2.0 i.e., Static blocks for a more promising and engaging user experience. Static blocks, simple blocks or CMS blocks are pieces of reusable content that can be displayed using a widget or a short code. ‘Static’ implies that they are based on fixed information that can be text, images, videos or any kind of dynamic information. Once created, they can be used in different pages of the website, saving oneself a lot of time while creating and updating content. Moreover, they can be used for a variety of purposes. For instance, they allow sharing information regarding special discounts, coupons and announcements.

Static blocks make most part of the content on a website. Most of the time they are used along with widgets in order to re-position that information elsewhere. Therefore, it could be said that both static blocks and widgets are considered as the key features of Magento 2.0’s page layout. It is necessary that once a static block is created it is ‘Called’ in order to display its content among relevant pages. There are certain predefined areas in Magento 2.0 where they can be called which can include the header, footer or top header etc.  

In order to understand the basics of static blocks one should have a brief introduction on widgets since they are interrelated. Widgets play a crucial role in Magento development. They are smaller sets of code that can display all sorts of data tailored for targeted content and enhance user experience at its best. Magneto 2’s widget is a Magento extension designed with a set of advanced configurations. One of its greatest perks is that they can be called from anywhere on the website and most importantly provide webs store administrators the opportunity to add static content to blocks that leads to high functionality and straightforward implementation.

Magento 2.0 Static block extensions:

Due to the fact that Magento 2 static block at default doesn’t provide the store administrator much room for creativity and isn’t flexible enough to target customers with a specific kind of content. Therefore, we use different extensions to somehow overcome its limitations. For instance, extensions like Mageplaza Better static block or any other advanced static block extension can help with the below mentioned things:

·         It helps in targeting specific customer groups with special and target driven content. For instance, content related to affiliate policies and refund policies should only be visible to wholesalers and affiliate customer groups.

·         Secondly, it allows admins to add labels to different blocks so that there can be an easy way of filtering different blocks based on them. For example, a label ‘Policy’ can be assigned to all those blocks with information relating to policies. Incase, a change is required in those blocks, they can be filtered accordingly.

·         Finally, it allows you to edit block content in mass actions. It saves the store admins of time which helps in easing up the whole content handling process.

How to create static blocks:

In order to get a basic understanding of static blocks one should know how to create static blocks in Magento 2.0. Follow the steps below to create one:

  •  Go to the admin panel in the extreme left, move to elements and then under Content on Blocks. After clicking a new page layout pops up. On this page, every single static block that has ever been created will appear displayed in order of date modified. In case one wants to edit the already existing block click on the ‘select ‘option and from there choose edit. Otherwise, in order to create a new block, click on “Add New Block” in the extreme right.
goQuwcRTLA3XYwn3WJes7h9gubw8 svJ1Ww2TILiVc0oGmbknWMoCS3dAoWx DiUV5bTG8apKFo1QeqJp8XSQmpADq2VFYJI4zIIZzVfgkF27wp4yeBY76ysmSg qSkoaciOjvwAeAd3OQV9lpY0M8s
  •   After that, choose and select to enter a new block. Primarily, swipe the Enable option if it’s not enabled. By default, Magento already has it enabled, if one wants to change the status then swipe block to No. Add the Block title which is used for internal references but once saved will appear on the front end. Every block has a unique identifier which should be only written in lowercase letters with an underscore in between. In addition to this, we have the store view which can be used to customize where we want the block to be visible. Finally, we have the ‘Edit with page builder’ option which can only be used if the page button has been enabled by the store admin at the back-end. Through this feature one can add any text, image or embedded video. However, if one prefers to work with HTML codes then we can use the Show\hide editor option.
xOuWdwUYc7hEx74LqvNyHWSjBUx WnKOFGhdD2WYmXFkkE9Jc EhZOep1WpvCBzJO5J2id8 n8fZ9pQE9u2PVcqCAf19OQv4aReM88ty48BwafW7OMs7eNh7duQDeJyi8lrsVtZTkt01B5JRJJB7wRA
uKIJRaKVTzzZMeQiX1EmizQT sHzGvgceDln Jtgnle3pFjJioF9U yjkS6qfgfVmkEZdKxG
  • Once all of the above steps have been carried out click the Save & Close button. A new block will appear at the bottom of the block list in the blocks grid.

Positioning static blocks in different areas:

Call static block using widgets:

As mentioned earlier, a static block cannot be used alone and can be only executed on different web pages with the help of widgets. Widgets tend to play a very important role in terms of standpoint functionality and can be called from anywhere on the website. In order to do that follow the below steps:

  • Go to content and then under elements click on Widgets this time. Again, in the page layouts one can see all the widgets created earlier. So, to create a new one, click on ‘Add widget’.
oPaxk8SSUdWJgLS4LirauzAfHoHdvTv5HIAc321 AtjEOEEohqp6izEqNslV 5oDm0b
  • A new page pops up. Select CMS Static block as type and choose the design theme as per desire then click on Continue.
UaSc d6gUev1gS3NozGLSOK0VVcCRbmorLpCCrQm9STSpDW2YOvWnYG3eahhpA8SBqJKEaMCnjUd8T0k mnB7xJANQft2NVaG6IEOSUjJWa1eHod0YN32 w9RPp0WQtS488ID35GdPc KeFpkI66Mm0
  • After this go to storefront properties. Here, add the widget title and then select where you want it to appear with the help of store view. Secondly, add the store order which represents the number at which the widget will be ranked at in the list of widgets while being positioned at the website.
S9IVPRlHEIWbOLeUpLRVxmMqA3jcLWyKPfekSt7QcJ0Kwh2
  •  In addition to this, in the layout updates we can select the pages or group of pages we want the static block to appear at.
2FRJcmM6WyLaeqfxizB7L6O567V3hCCxs lUmPIDTVKGr32ymWsshQd26t8gZ6LbAHLwQPeonjnIU43GQ z5846htt1Iep9rfWYXnqNAIjFL9tk8555fms2EOcuypTRHiRlYTG9KgoTyC87XNqAsaiQ
  • ·Finally in the widget option select the static block you want the widget to help display.
rLDkfv ffGLa G1i 3 HVBfgkhowNsf1t3rHVI5UhumQGpDlYo n9XtPQaVKnGeI6kDM4TicKKal7MBv4SR8A urFXdYSasPyOlwMHDy0lEe6SuM T4ZVv8QBrJYrlNjRrrJigpDNL XoDLIfenXX2k

Call static block using xml layout:

If the store administrator is a front-end developer and wants to code everything then he/she can use the following code to call the static block:

Ctp2 jWSm 6QBd3EB7EQY1rfdVXAayiIA8iH nmItSiS0aADL7yANMm40PCPZLS2QIGYEQMqDCAD8bZqzZkJd4UR7pxoctIiTdULfX6nHn9 ld8spMawlbhsJszLq63cZzOrD N4YMqcLsWqfImWnQ

The only difference is you need to replace “my_block_identifier” with your Static block Identifier.

Call static block from template phtml file:

Use the code below in case you want to show the static block in any template of Magento 2:

Add another block in the Static block:

In order to show another static block in the already created static block use the code below:

y2sGr1NDogDTajCG166dCJDfSLgVbZruPIEvFELOve21shDzoP3WlJCrIgnPrcaUg24taWPYFnw xEPOuLagW0 imTVc8SO2Hk9X2hv4odHl iIGSdSh 4KsU5MPt plXR556Juw0fNMQEKkhduwrW4

       Display Static block on Category page:

·         In order to choose the product category where you want to display the static block go Catalog Categories.

  •  Then go to the content section of that category and with the help of that choose the specific static block you want to display using the ‘Add CMS Block’ option. Finally go to the display settings and decide if you want to just display just the static blocks, products or both the static blocks and products.
gVSOQdRFHQ85CQCKM4Qyessrs6emXqpvv4BPgdldjT47ek ioBTNe4c38hAHx9NaOoHHlTvgAW1NMq8ga94

In conclusion, it can be said that static blocks are small modular units of information that can be used anywhere on the website with the help of either widget if one doesn’t know how to code or through widgets. Anyone who has an understanding of the basics of static blocks can play with its different features that enhance the content management of the website which in turn improves the customer user experience (UX). Websites with better engagement forces the user to come back again and again.

Get help from a human
Submit a request for help with your Braintree sandbox or production account.
Get Help
Select location and language

Contact Our Sales Team

Learn more about our products, features, and pricing options.
By submitting this form, you agree to receive promotional messages from Shopify about its products and services. You can unsubscribe at any time by clicking on the link at the bottom of our emails.
Product
Pricing
Use cases
Recourses
Documentation
Log in
Start a free trial