---
title: "How to Customize Product Page Layout in Magento 2"
url: "https://dolphinwebsolution.com/how-to-customize-product-page-layout-in-magento-2"
date: "2022-05-20T10:06:57+05:30"
modified: "2023-08-31T05:21:20+05:30"
author:
  name: "Jayesh Makwana"
categories:
  - "Blog"
  - "Magento"
word_count: 1051
reading_time: "6 min read"
summary: "In this article. we will create a new product layout in Magento.

As you may be aware, each product needs a distinct page layout depending on its features and style. The goal is to alter a produc..."
description: "In this article. we will create a new product layout in Magento. As you may be aware, each product needs a distinct page layout depending on its features and..."
keywords: "Product Page Layout,product layout,customize product, Blog, Magento"
language: "en"
schema_type: "Article"
related_posts:
  - title: "How to Boost Up your Magento Ecommerce Store with Use of Artificial Intelligence"
    url: "https://dolphinwebsolution.com/blog/boost-up-your-magento-ecommerce-store-with-use-of-artificial-intelligence/"
  - title: "Declarative Schema in Magento 2.3.x or later"
    url: "https://dolphinwebsolution.com/declarative-schema-in-magento-2-3-x-or-later"
  - title: "11 Reasons Why Your Business Needs an eCommerce Website Today"
    url: "https://dolphinwebsolution.com/blog/why-e-commerce-website-is-most-important-for-your-business/"
---

# How to Customize Product Page Layout in Magento 2

_Published: May 20, 2022_  
_Author: Jayesh Makwana_  

![](https://dolphinwebsolution.com/wp-content/uploads/2023/02/Product_Page_Layout-1-1024x536.png)

In this article. we will create a new product layout in Magento.
As you may be aware, each product needs a distinct page layout depending on its features and style. The goal is to alter a product page layout for numerous products within a category without changing the category layout.
To do so, we’ll need to go through the fundamentals first, and only then will we be able to change the product page layout using layout files. We are one of the top notch leading [**Magento 2 development company**](https://dolphinwebsolution.com/magento-2-development/).
#### How to customize product page layout
You’ll need to override the layout file for that page with a custom one if you want to change the layout. To do so, go to your theme’s product page and look for the layout files.
#### Customize product view pages
On the product page, use containers to organize content in the layout. You can add blocks to the container by referencing it.
Container tags in a layout XML file are used to assign content structure to a page. Except for the content of contained elements, a container has no additional content. Containers include the following:
- product.info.main
- product.info.price- product.info.stock.sku- product.info.form.content- product.info.extrahint- product.info.social- Product.info.media
**Method 1**: **Create a custom product layout by product type**

This section contains information on product layout files. In the common layout files, you can customize view pages for all product types. It is also possible to make the customization on a specific product type. please check the below default Magento product types.

| catalog\_product\_view.xml | Common layout. Affects all product types |
|---|---|
| catalog\_product\_view\_type\_simple.xml | Layout from this file is applied to simple products only |
| catalog\_product\_view\_type\_configurable.xml | Layout from this file is applied to configurable products only |
| catalog\_product\_view\_type\_grouped.xml | Layout from this file is applied to grouped products only |
| catalog\_product\_view\_type\_downloadable.xml | Layout from this file is applied to downloadable products only |
| catalog\_product\_view\_type\_bundle.xml | Layout from this file is applied to bundle product only |
| catalog\_product\_view\_type\_virtual.xml | Layout from this file is applied to virtual products only |

You’ll need to insert an an.XML file in a specific location (**app/design/frontend/<Vendor>/<Theme>/Magento Catalog/layout/catalog\_product\_view\_type\_<product-tyep>.xml**) to apply custom layout adjustments to your product pages. From there, I updated the layout. The XML file will then display as a selectable option under Custom Layout Update.
**Example**

**=>** Create catalog\_product\_view\_type\_configurable.xml file at **app/design/frontend/Dolphin/custom\_theme/Magento Catalog/layout/**

Inside the file we move the product info social code as shown below:
```
<?xml version="1.0"?>
<!--
/**
 * Created By: Dolphin Web Solution Pvt. Ltd.
 */
-->

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>

        <attribute name="class" value="custom page-product-configurable"/>
        <move element="product.info.social" destination="product.info.main" after="product.info.price"/>
    </body>
</page>
```

On the storefront, there is a new custom layout with your custom changes
**![Best AI Agent Development Companies in India (2026)](https://dolphinwebsolution.com/wp-content/uploads/2022/05/product-layout-1024x501.png)**

**Method 2**: **Create a custom product layout by product SKU**

You’ll need to insert an an.XML file in a specific location (**app/design/frontend/<Vendor>/<Theme>/Magento Catalog/layout/**) to apply custom layout adjustments to your product pages.
The custom layout update file names rule
The following rule should be followed while naming your custom layout update files:
catalog\_product\_view\_sku\_<Product SKU>.xml
**Note:** <Product\_SKU>: is the SKU of the product to that you want to apply a custom layout update
If we wish to deploy a new custom layout update to this SKU: MB01, for example. In /theme dir/Magento Catalog/layout/.
**Example**

**=>** Create catalog\_product\_view\_sku\_MB01.xml file at **app/design/frontend/Dolphin/custom\_theme/Magento Catalog/layout/**

Inside the file we move the product info social code as shown below:
```
<?xml version="1.0"?>
<!--
/**
 * Created By: Dolphin Web Solution Pvt. Ltd.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <attribute name="class" value="custom"/>
        <move element="product.info.social" destination="product.info.main" after="product.info.price"/>
    </body>
</page>
```

On the storefront, there is a new custom layout with your custom changes.
![Best AI Agent Development Companies in India (2026)](https://dolphinwebsolution.com/wp-content/uploads/2022/05/product-front-1024x499.png)

**Method 3**: **Create a custom product layout by product ID**

If you wish to alter the product page layout for a product with ID 2, the layout file’s name must follow this format:
File format: catalog\_product\_view\_id\_number.xml
**Example**

**=>** Create catalog\_product\_view\_id\_2.xml file at **app/design/frontend/Dolphin/custom\_theme/Magento Catalog/layout/**

Inside the file we move the product info social code as shown below:
```
<?xml version="1.0"?>
<!--
/**
 * Created By: Dolphin Web Solution Pvt. Ltd.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <attribute name="class" value="custom"/>
        <move element="product.info.social" destination="product.info.main" after="product.info.price"/>
    </body>
</page>
```

On the storefront, there is a new custom layout with your custom changes
#### ![Best AI Agent Development Companies in India (2026)](https://dolphinwebsolution.com/wp-content/uploads/2022/05/product-id-front-1024x479.png)
#### Conclusion
As you can look from these simple examples, it’s easy to customize the page using a custom layout. Apply some CSS for styling and you’ll have your new page layout with new customized content a couple of times.
**You may also like to read**

1. [Create a custom layout](https://dolphinwebsolution.com/how-to-create-a-custom-layout-for-cms-pages-in-magento)
2. [Add Custom Tab on Product Page](https://dolphinwebsolution.com/how-to-add-custom-tab-in-product-page-magento-2)

**That’s it!**

I hope this technical blog will help you to find what you were looking for.
That’s all, If you have any further questions about Magento 2 theme development or if need any help from our [Magento 2 expert](https://dolphinwebsolution.com/hire-magento-2-developers/), contact us now for a free consultation.
**Bookmark** it for your future reference. Do comment below if you have any other questions.
**P.S.** Do share this note with your team.
</body>


---

_View the original post at: [https://dolphinwebsolution.com/how-to-customize-product-page-layout-in-magento-2](https://dolphinwebsolution.com/how-to-customize-product-page-layout-in-magento-2)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-08-26 06:14:30 UTC_