A couple of weeks ago we covered how to add a static block after a product image. This is really easy to do it you have mastered “after” because all we do in our layout xml is change “after” to “before”. Later in the series of how-to’s we’ll cover how to put something somewhere in the middle of a block and target its position more carefully.
Magento 2 XML Layout Updates – In brief
A layout update is a small bit of code written in XML format that instructs the Magento CMS to look in a particular section of the page and either pick up or put down another piece of code. In each of the how-to sections below I’ll write out what each of the Magento Layout Updates are doing in a human way so they are more easy to understand.
So let’s get going
For all examples in this guide of XML updates you will need to:
- replace block_namespace_here with a custom name for your block such as custom.product.message. This can be anything really that follow this format but try and keep them the same across your site when they are doing the same thing.
- replace block_identifier_here with the block identifier (the ID of the static block)
Where to add the code
Whether you are doing a Magento XML Layout update on a category, product or CMS page you’ll be looking for a box that looks like this one to make your edits. You can do layout updates on pages, products and categories.
How to add a static block before product images on product page in Magento 2
Ok so this one is pretty much the same as the last one except we’re going to put the image before the product image gallery.
- Create the static block you want to add after the image. When asked to give the block an identifier add something unique this will replace block_indentifier_here in the code below.
- Use this code to add the block remembering to change the block identifier and giving the layout update a namespace such as custom.image.after
<referenceContainer name="product.info.media"> <block class="Magento\Cms\Block\Block" name="block_namespace_here" before="-"> <arguments> <argument name="block_id" xsi:type="string">block_indentifier_here</argument> </arguments> </block> </referenceContainer>
Now you just need to style your contents that you’ve added to your CMS block. In my example below I am using an image as a banner but you could just as well inject anything you can put into a static block including widgets, products, code, text, video and more.
The result of adding a static before after the product image can be seen here on our Lumarix Magento Store
Uses for adding a static block before a product image in Magento 2
Would you like to learn more? Would you rather we just did these things for you?
Call us on 0117 2077504 or complete the form below to discuss your project or requirements.