How to change layout of product detail page?
I've set up a child theme of Luma and want to change the layout of my individual product detail page. What file controls this? I don't see the .phtml file and don't see how changing block order in my xml will accomplish what I need to do.
magento2 layout format
edited Jul 16 '18 at 12:38
Teja Bhagavan Kollepara
2,93841847
asked Apr 9 '17 at 8:29
guest
56115
bumped to the homepage by Community♦ yesterday
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
I've set up a child theme of Luma and want to change the layout of my individual product detail page. What file controls this? I don't see the .phtml file and don't see how changing block order in my xml will accomplish what I need to do.
magento2 layout format
edited Jul 16 '18 at 12:38
Teja Bhagavan Kollepara
2,93841847
asked Apr 9 '17 at 8:29
guest
56115
bumped to the homepage by Community♦ yesterday
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
I've set up a child theme of Luma and want to change the layout of my individual product detail page. What file controls this? I don't see the .phtml file and don't see how changing block order in my xml will accomplish what I need to do.
magento2 layout format
edited Jul 16 '18 at 12:38
Teja Bhagavan Kollepara
2,93841847
asked Apr 9 '17 at 8:29
guest
56115
I've set up a child theme of Luma and want to change the layout of my individual product detail page. What file controls this? I don't see the .phtml file and don't see how changing block order in my xml will accomplish what I need to do.
magento2 layout format
magento2 layout format
edited Jul 16 '18 at 12:38
Teja Bhagavan Kollepara
2,93841847
asked Apr 9 '17 at 8:29
guest
56115
edited Jul 16 '18 at 12:38
Teja Bhagavan Kollepara
2,93841847
asked Apr 9 '17 at 8:29
guest
56115
edited Jul 16 '18 at 12:38
Teja Bhagavan Kollepara
2,93841847
edited Jul 16 '18 at 12:38
Teja Bhagavan Kollepara
2,93841847
edited Jul 16 '18 at 12:38
Teja Bhagavan Kollepara
2,93841847
2,93841847
asked Apr 9 '17 at 8:29
guest
56115
asked Apr 9 '17 at 8:29
guest
56115
asked Apr 9 '17 at 8:29
guest
56115
56115
bumped to the homepage by Community♦ yesterday
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
bumped to the homepage by Community♦ yesterday
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
There isn't a single template file for the product page, you can manipulate it by layout.
See here the doc.
The main layout file is magento/module-catalog/view/frontend/layout/catalog_product_view.xml
In order to see the templates that forms the parts of your page, you can activate the template hints in:
Store -> Configuration -> Advanced -> Developer -> Debug > Enabled
Template Path Hints for Storefront > Yes
answered Apr 9 '17 at 9:04
nuovecode
455414
add a comment |
To change the layout of individual product detail page, as you have created the child theme assuming your child theme path is something like this
magento_root/app/design/frontend/company_name/theme_name/
Now navigate to your child theme and follow these steps.
- Create a folder Magento_Catalog and inside it create another folder layout, so the path now looks like this
(magento_root/app/design/frontend/company_name/theme_name/Magento_Catalog/layout).
- Copy your xml file from magento_root/vendor/magento/module-catalog/view/frontend/layout/catalog_product_view.xml
- Do not edit this as this is core file.
- Paste the xml file under magento_root/app/design/frontend/company_name/theme_name/Magento_Catalog/layout/
now edit this as required.
- Create the following path magento_root/app/design/frontend/company_name/theme_name/Magento_Catalog/templates/product/view
- Go to magento_root/vendor/magento/module-catalog/view/frontend/templates/product/view/
where all .phtml files are located which gets required data into
product details page.
- Copy the required .phtml files from core folder(magento_root/vendor/magento/module-catalog/view/frontend/templates/product/view/)
to your child theme
folder(magento_root/app/design/frontend/company_name/theme_name/Magento_Catalog/templates/product/view)
and edit them as required.
Hope this helps your question.
edited Jul 16 '18 at 12:57
Manoj Deswal
4,27581742
answered Feb 16 '18 at 9:18
Deepika Koyalkar
1
add a comment |
You have to change inside layout xml file,
if you want to display product details page 2column left then change file is catalog_product_view.xml
set layout value layout="2columns-right" inside node.
< page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-right" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
answered Nov 1 '18 at 7:26
Vishal Sanwar
113
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f169307%2fhow-to-change-layout-of-product-detail-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
There isn't a single template file for the product page, you can manipulate it by layout.
See here the doc.
The main layout file is magento/module-catalog/view/frontend/layout/catalog_product_view.xml
In order to see the templates that forms the parts of your page, you can activate the template hints in:
Store -> Configuration -> Advanced -> Developer -> Debug > Enabled
Template Path Hints for Storefront > Yes
answered Apr 9 '17 at 9:04
nuovecode
455414
add a comment |
There isn't a single template file for the product page, you can manipulate it by layout.
See here the doc.
The main layout file is magento/module-catalog/view/frontend/layout/catalog_product_view.xml
In order to see the templates that forms the parts of your page, you can activate the template hints in:
Store -> Configuration -> Advanced -> Developer -> Debug > Enabled
Template Path Hints for Storefront > Yes
answered Apr 9 '17 at 9:04
nuovecode
455414
add a comment |
There isn't a single template file for the product page, you can manipulate it by layout.
See here the doc.
The main layout file is magento/module-catalog/view/frontend/layout/catalog_product_view.xml
In order to see the templates that forms the parts of your page, you can activate the template hints in:
Store -> Configuration -> Advanced -> Developer -> Debug > Enabled
Template Path Hints for Storefront > Yes
answered Apr 9 '17 at 9:04
nuovecode
455414
There isn't a single template file for the product page, you can manipulate it by layout.
See here the doc.
The main layout file is magento/module-catalog/view/frontend/layout/catalog_product_view.xml
In order to see the templates that forms the parts of your page, you can activate the template hints in:
Store -> Configuration -> Advanced -> Developer -> Debug > Enabled
Template Path Hints for Storefront > Yes
answered Apr 9 '17 at 9:04
nuovecode
455414
answered Apr 9 '17 at 9:04
nuovecode
455414
answered Apr 9 '17 at 9:04
nuovecode
455414
answered Apr 9 '17 at 9:04
nuovecode
455414
455414
add a comment |
add a comment |
To change the layout of individual product detail page, as you have created the child theme assuming your child theme path is something like this
magento_root/app/design/frontend/company_name/theme_name/
Now navigate to your child theme and follow these steps.
- Create a folder Magento_Catalog and inside it create another folder layout, so the path now looks like this
(magento_root/app/design/frontend/company_name/theme_name/Magento_Catalog/layout).
- Copy your xml file from magento_root/vendor/magento/module-catalog/view/frontend/layout/catalog_product_view.xml
- Do not edit this as this is core file.
- Paste the xml file under magento_root/app/design/frontend/company_name/theme_name/Magento_Catalog/layout/
now edit this as required.
- Create the following path magento_root/app/design/frontend/company_name/theme_name/Magento_Catalog/templates/product/view
- Go to magento_root/vendor/magento/module-catalog/view/frontend/templates/product/view/
where all .phtml files are located which gets required data into
product details page.
- Copy the required .phtml files from core folder(magento_root/vendor/magento/module-catalog/view/frontend/templates/product/view/)
to your child theme
folder(magento_root/app/design/frontend/company_name/theme_name/Magento_Catalog/templates/product/view)
and edit them as required.
Hope this helps your question.
edited Jul 16 '18 at 12:57
Manoj Deswal
4,27581742
answered Feb 16 '18 at 9:18
Deepika Koyalkar
1
add a comment |
To change the layout of individual product detail page, as you have created the child theme assuming your child theme path is something like this
magento_root/app/design/frontend/company_name/theme_name/
Now navigate to your child theme and follow these steps.
- Create a folder Magento_Catalog and inside it create another folder layout, so the path now looks like this
(magento_root/app/design/frontend/company_name/theme_name/Magento_Catalog/layout).
- Copy your xml file from magento_root/vendor/magento/module-catalog/view/frontend/layout/catalog_product_view.xml
- Do not edit this as this is core file.
- Paste the xml file under magento_root/app/design/frontend/company_name/theme_name/Magento_Catalog/layout/
now edit this as required.
- Create the following path magento_root/app/design/frontend/company_name/theme_name/Magento_Catalog/templates/product/view
- Go to magento_root/vendor/magento/module-catalog/view/frontend/templates/product/view/
where all .phtml files are located which gets required data into
product details page.
- Copy the required .phtml files from core folder(magento_root/vendor/magento/module-catalog/view/frontend/templates/product/view/)
to your child theme
folder(magento_root/app/design/frontend/company_name/theme_name/Magento_Catalog/templates/product/view)
and edit them as required.
Hope this helps your question.
edited Jul 16 '18 at 12:57
Manoj Deswal
4,27581742
answered Feb 16 '18 at 9:18
Deepika Koyalkar
1
add a comment |
To change the layout of individual product detail page, as you have created the child theme assuming your child theme path is something like this
magento_root/app/design/frontend/company_name/theme_name/
Now navigate to your child theme and follow these steps.
- Create a folder Magento_Catalog and inside it create another folder layout, so the path now looks like this
(magento_root/app/design/frontend/company_name/theme_name/Magento_Catalog/layout).
- Copy your xml file from magento_root/vendor/magento/module-catalog/view/frontend/layout/catalog_product_view.xml
- Do not edit this as this is core file.
- Paste the xml file under magento_root/app/design/frontend/company_name/theme_name/Magento_Catalog/layout/
now edit this as required.
- Create the following path magento_root/app/design/frontend/company_name/theme_name/Magento_Catalog/templates/product/view
- Go to magento_root/vendor/magento/module-catalog/view/frontend/templates/product/view/
where all .phtml files are located which gets required data into
product details page.
- Copy the required .phtml files from core folder(magento_root/vendor/magento/module-catalog/view/frontend/templates/product/view/)
to your child theme
folder(magento_root/app/design/frontend/company_name/theme_name/Magento_Catalog/templates/product/view)
and edit them as required.
Hope this helps your question.
edited Jul 16 '18 at 12:57
Manoj Deswal
4,27581742
answered Feb 16 '18 at 9:18
Deepika Koyalkar
1
To change the layout of individual product detail page, as you have created the child theme assuming your child theme path is something like this
magento_root/app/design/frontend/company_name/theme_name/
Now navigate to your child theme and follow these steps.
- Create a folder Magento_Catalog and inside it create another folder layout, so the path now looks like this
(magento_root/app/design/frontend/company_name/theme_name/Magento_Catalog/layout).
- Copy your xml file from magento_root/vendor/magento/module-catalog/view/frontend/layout/catalog_product_view.xml
- Do not edit this as this is core file.
- Paste the xml file under magento_root/app/design/frontend/company_name/theme_name/Magento_Catalog/layout/
now edit this as required.
- Create the following path magento_root/app/design/frontend/company_name/theme_name/Magento_Catalog/templates/product/view
- Go to magento_root/vendor/magento/module-catalog/view/frontend/templates/product/view/
where all .phtml files are located which gets required data into
product details page.
- Copy the required .phtml files from core folder(magento_root/vendor/magento/module-catalog/view/frontend/templates/product/view/)
to your child theme
folder(magento_root/app/design/frontend/company_name/theme_name/Magento_Catalog/templates/product/view)
and edit them as required.
Hope this helps your question.
edited Jul 16 '18 at 12:57
Manoj Deswal
4,27581742
answered Feb 16 '18 at 9:18
Deepika Koyalkar
1
edited Jul 16 '18 at 12:57
Manoj Deswal
4,27581742
edited Jul 16 '18 at 12:57
Manoj Deswal
4,27581742
edited Jul 16 '18 at 12:57
Manoj Deswal
4,27581742
4,27581742
answered Feb 16 '18 at 9:18
Deepika Koyalkar
1
answered Feb 16 '18 at 9:18
Deepika Koyalkar
1
answered Feb 16 '18 at 9:18
Deepika Koyalkar
1
1
add a comment |
add a comment |
You have to change inside layout xml file,
if you want to display product details page 2column left then change file is catalog_product_view.xml
set layout value layout="2columns-right" inside node.
< page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-right" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
answered Nov 1 '18 at 7:26
Vishal Sanwar
113
add a comment |
You have to change inside layout xml file,
if you want to display product details page 2column left then change file is catalog_product_view.xml
set layout value layout="2columns-right" inside node.
< page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-right" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
answered Nov 1 '18 at 7:26
Vishal Sanwar
113
add a comment |
You have to change inside layout xml file,
if you want to display product details page 2column left then change file is catalog_product_view.xml
set layout value layout="2columns-right" inside node.
< page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-right" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
answered Nov 1 '18 at 7:26
Vishal Sanwar
113
You have to change inside layout xml file,
if you want to display product details page 2column left then change file is catalog_product_view.xml
set layout value layout="2columns-right" inside node.
< page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-right" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
answered Nov 1 '18 at 7:26
Vishal Sanwar
113
answered Nov 1 '18 at 7:26
Vishal Sanwar
113
answered Nov 1 '18 at 7:26
Vishal Sanwar
113
answered Nov 1 '18 at 7:26
Vishal Sanwar
113
113
add a comment |
add a comment |
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f169307%2fhow-to-change-layout-of-product-detail-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
