New Self New Life
No Result
View All Result
  • Home
  • Entertainment
  • Celebrity
  • Cinema
  • Music
  • Digital Lifestyle
  • Social Media
  • Softwares
  • Devices
  • Home
  • Entertainment
  • Celebrity
  • Cinema
  • Music
  • Digital Lifestyle
  • Social Media
  • Softwares
  • Devices
New Self New Life
No Result
View All Result
Home Softwares

Customize layout for a specific product in Magento 2

by admin
2 years ago
in Softwares
Customize layout for a specific product in Magento 2
Share on FacebookShare on Twitter


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.

Trying to find an skilled
Magento 2 Firm ?
Learn Extra


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

design page layout

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
author-thumb

Akash Panwar
2 Badges

14 July 2023



Source link

Tags: CustomizeLayoutMagentoproductSpecific
Previous Post

What 21 Celebs Pay In Monthly Child Support

Next Post

Improving urban planning with virtual reality

Related Posts

How to Add Custom Style Variations to WordPress Blocks — Speckyboy
Softwares

How to Add Custom Style Variations to WordPress Blocks — Speckyboy

by admin
June 2, 2025
Smart software replaces expensive sensors for glass wall detection with 96% accuracy
Softwares

Smart software replaces expensive sensors for glass wall detection with 96% accuracy

by admin
June 1, 2025
User Guide For UnoPim PDF Generator
Softwares

User Guide For UnoPim PDF Generator

by admin
May 31, 2025
Infragistics Ultimate 25.1 includes updates across several of its UI toolkit components
Softwares

Infragistics Ultimate 25.1 includes updates across several of its UI toolkit components

by admin
May 29, 2025
Quick exit from Settings – Vivaldi Android Browser snapshot 3708.4
Softwares

Quick exit from Settings – Vivaldi Android Browser snapshot 3708.4

by admin
June 3, 2025
Next Post
Improving urban planning with virtual reality

Improving urban planning with virtual reality

Demi Lovato’s ‘Revamped’ Album Will Consist of Rock Versions of Her Hits

Demi Lovato's 'Revamped' Album Will Consist of Rock Versions of Her Hits

  • Trending
  • Comments
  • Latest
Anant Ambani wedding: Celebs, wealthy elite attend lavish billionaire festivities – National

Anant Ambani wedding: Celebs, wealthy elite attend lavish billionaire festivities – National

March 1, 2024
How to Build a JavaScript Search [Article]

How to Build a JavaScript Search [Article]

August 30, 2022
Product Information Management Trends (PIM)

Product Information Management Trends (PIM)

February 4, 2022
How to Build a DIY Spotify Music Player with Raspberry Pi Pico

How to Build a DIY Spotify Music Player with Raspberry Pi Pico

May 13, 2025
15 Best Movies Like Parasite

15 Best Movies Like Parasite

February 20, 2022
Every Kathryn Hahn Film Performance, Ranked

Every Kathryn Hahn Film Performance, Ranked

December 24, 2022
What is Kubernetes: An Overview

An Introduction to Kubernetes | Developer.com

August 11, 2022
Deployment Diagrams Explained in Detail, With Examples

Deployment Diagrams Explained in Detail, With Examples

August 11, 2021
Major Labels Shift Gears, Explore Licensing Deals With Controversial AI Platforms Suno and Udio

Major Labels Shift Gears, Explore Licensing Deals With Controversial AI Platforms Suno and Udio

June 3, 2025
Samsung Galaxy Z Fold 7 Rumored Features and Design Updates

Samsung Galaxy Z Fold 7 Rumored Features and Design Updates

June 3, 2025
Ellen Pompeo Detained By TSA, Bomb Squad Called In

Ellen Pompeo Detained By TSA, Bomb Squad Called In

June 3, 2025
X Rolls Out Support for 4K Video Uploads

X Continues To Highlight Misleading Claims About Its Popularity

June 3, 2025
May 30-June 1 Box Office Recap – ‘Lilo & Stitch’ crosses $600M worldwide, while ‘Mission: Impossible – The Final Reckoning’ crosses $350M worldwide. ‘Karate Kid: Legends’ and ‘Bring Her Back’ have solid debuts, while ‘The Phoenician Scheme’ opens with the best per-theater average ($93K) of the year.

May 30-June 1 Box Office Recap – ‘Lilo & Stitch’ crosses $600M worldwide, while ‘Mission: Impossible – The Final Reckoning’ crosses $350M worldwide. ‘Karate Kid: Legends’ and ‘Bring Her Back’ have solid debuts, while ‘The Phoenician Scheme’ opens with the best per-theater average ($93K) of the year.

June 3, 2025
Jonathan Joss, ‘King of the Hill’ actor, killed in Texas shooting – National

Jonathan Joss, ‘King of the Hill’ actor, killed in Texas shooting – National

June 3, 2025
What Is the Best Brand of Workout Clothes? (2025 Guide)

What Is the Best Brand of Workout Clothes? (2025 Guide)

June 3, 2025
Samsung may incorporate Perplexity’s AI tech in its phones

Samsung may incorporate Perplexity’s AI tech in its phones

June 2, 2025
New Self New Life

Your source for entertainment news, celebrities, celebrity news, and Music, Cinema, Digital Lifestyle and Social Media and More !

Categories

  • Celebrity
  • Cinema
  • Devices
  • Digital Lifestyle
  • Entertainment
  • Music
  • Social Media
  • Softwares
  • Uncategorized

Recent Posts

  • Major Labels Shift Gears, Explore Licensing Deals With Controversial AI Platforms Suno and Udio
  • Samsung Galaxy Z Fold 7 Rumored Features and Design Updates
  • Ellen Pompeo Detained By TSA, Bomb Squad Called In
  • Home
  • Disclaimer
  • DMCA
  • Privacy Policy
  • Cookie Privacy Policy
  • Terms and Conditions
  • Contact us

Copyright © 2021 New Self New Life.
New Self New Life is not responsible for the content of external sites. slotsfree  creator solana token

No Result
View All Result
  • Home
  • Entertainment
  • Celebrity
  • Cinema
  • Music
  • Digital Lifestyle
  • Social Media
  • Softwares
  • Devices

Copyright © 2021 New Self New Life.
New Self New Life is not responsible for the content of external sites.

wowph club