Customize layout for a specific product in Magento 2

We’ll learn to customise product web page structure for a selected product in Magento 2. First, we’ll be taught some issues about structure in magento 2.

In Magento, the essential elements of web page design are layouts, containers, and blocks. A structure represents the construction of an online web page (1). Containers symbolize the placeholders inside that internet web page construction (2). And blocks symbolize the UI controls or elements throughout the container placeholders (3).

(1) Layouts present the buildings for internet pages utilizing an XML file that identifies all of the containers and blocks composing the web page. The main points of structure XML information are described later on this part.

(2) Containers assign content material construction to a web page utilizing container tags inside a structure XML file. A container has no further content material besides the content material of included components. Examples of containers embody the header, left column, predominant column, and footer.

(3) Blocks render the UI components on a web page utilizing block tags inside a structure XML file. Blocks use templates to generate the HTML to insert into its mother or father structural block. Examples of blocks embody a class record, a mini cart, product tags, and product itemizing.

For details about product web page layouts, you possibly can click on right here.

Strategies to customise structure for a selected product

There are two methods for customizing your product web page’s structure for a selected product.

Technique 1: Create a customized structure replace

Customized structure replace for product pages is now transformed right into a selector

To use customized structure updates in your product pages, you’ll must create an .XML file in a specified folder (app/design/frontend/<Vendor>/<Theme>/Magento_Catalog/structure/). The structure replace from that .XML file will then obtainable beneath Customized Format Replace as a selectable choice.

Your customized structure replace file names might want to adhere to the next rule:

catalog_product_view_selectable_<Product SKU>_<Identify for Format Replace>.xml

the place: 

• <Product_SKU>: is the SKU of the product that you simply wish to apply customized structure replace
• <Identify for Format Replace>: is the title of this structure which can be proven within the Customized Format Replace selector

For instance, if we wish to apply a brand new customized structure replace for SKU: TEST55. We’ll must create a customized structure file named catalog_product_view_selectable_ TEST55_test.xml in /theme_dir/Magento_Catalog/structure/, with the content material like beneath:

<?xml model="1.0"?>
<web page structure="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Format/and so forth/page_configuration.xsd">
    <physique>
        <referenceContainer title="web page.wrapper">
             <referenceBlock title="breadcrumbs" take away="true"/>
         </referenceContainer>
    </physique>
</web page>

It can take away the breadcrumbs from Product SKU TEST55’s product web page.

Subsequent, in Catalog > Merchandise, select the product with SKU TEST55. It’s best to now have the ability to see a customized structure replace named check.

Select this new customized structure replace and Save the adjustments. 

Now clear your cache utilizing:

php bin/magento cache:flush

And the adjustments ought to now be mirrored in your frontend.

Technique 2: Overriding structure

You can even override the structure utilizing:

• Product ID
• Product SKU
• Product TYPE

For instance, if you wish to customise the product web page structure for a product with ID 25, the structure file’s title might want to adhere to the next format:

catalog_product_view_id_number.xml

e.g., catalog_product_view_id_25

And the file will must be within the following half:

app/design/frontend/<Vendor>/<Theme>/Magento_Catalog/structure/

Clear the cache following the system’s message. If not, you possibly can go to the frontend to take a look at the brand new custom-made web page structure for the precise product. 

For product kind, you possibly can comply with the identical steps and alter the file’s title accordingly. For instance, use catalog_product_view_type_bundle.xml to use the brand new web page structure for bundled merchandise.

Associated blogs:

1. Magento 2 Improvement 05: Format and Templates
2. create customized structure web page in magento2

Akash Panwar
2 Badges

14 July 2023