Magento 2: How to Add Section after Image Gallery at Product Detail Page

How to Add Section after Image Gallery at Product Detail Page In m2

Hello Magento Friends,

In this blog, I am going to explain How to Add Section after Image Gallery at Product Detail Page in Magento 2.

Image Gallery in Magento 2 is used to add photos of similar categories and place them on the product detail page. Sometimes you need to show a block next to the image gallery on the product detail page. At that time you can make use of the below steps.

Steps to Add Section after Image Gallery at Product Detail Page in Magento 2:

Step 1: First, we need to create a “catalog_product_view.xml” file inside our extension at the following path

app\code\Vendor\Extension\view\frontend\layout\catalog_product_view.xml

Now add the code block given below

<?xml version="1.0"?>

<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="custom_content" template="Vendor_Extension::custom_content.phtml" after="product.info.media"/>
        </referenceContainer>
    </body>
</page>

Step 2:  After that, we need to create a “custom_content.phtml” file inside our extension at the following path

app\code\Vendor\Extension\view\frontend\templates\custom_content.phtml

Then add content based on the requirement

<div>
   Hello World!
</div>

Conclusion:

This way you can Add Section after Image Gallery at Product Detail Page in Magento 2. Also, Add Product Review on Product Detail Page in Magento 2.

If you have any doubt, feel free to ask me through the comment section. Share the article with your friends and stay in touch with us for regular updates.

Happy Coding!

Previous Article

Magento Speed Optimization Extension or Service: What to Choose?

Next Article

Magento 2: Add Extra Category Description on Product Listing Page

Write a Comment

Leave a Comment

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

Get Connect With Us

Subscribe to our email newsletter to get the latest posts delivered right to your email.
Pure inspiration, zero spam ✨