On this weblog, we’ll learn to add {custom} layouts to an present PrestaShop theme. PrestaShop already has some predefined layouts, akin to full width, two columns, three columns, and so forth. Nevertheless, if you’ll want to add a brand new format, you possibly can create {custom} layouts.
So as to add a {custom} format, we have to create a file below the templates/layouts folder of the theme and modify the config/theme.yml file. Modifying information in present themes is just not a really helpful strategy as a result of once you replace the theme, modifications can be misplaced. Due to this fact, we’ll create a baby theme. PrestaShop helps little one theme performance, which suggests you possibly can lengthen the dad or mum theme’s conduct.
To create a baby theme in PrestaShop, we create a folder below the themes folder and title it in accordance with your want in small letters (for instance, “mytheme”). Create one other folder below “mytheme” and title it “config.” Below the “config” folder, create a brand new file referred to as “theme.yml” and put the next content material on this file:
dad or mum: traditional
title: mytheme
display_name: My theme for format
model: 1.0.0
property:
use_parent_assets: true
meta:
compatibility:
from: 8.1.0
to: ~
available_layouts:
custom-layout:
title: Customized format
description: That is {custom} format
layout-full-width:
title: Full Width
description: No aspect columns, best for distraction-free pages akin to product pages.
layout-both-columns:
title: Three Columns
description: One giant central column and a couple of aspect columns.
layout-left-column:
title: Two Columns, small left column
description: Two columns with a small left column
layout-right-column:
title: Two Columns, small proper column
description: Two columns with a small proper columnRight here, we’ve prolonged the default PrestaShop “traditional” theme. You too can go to the under hyperlink to know the theme.yml file parameters intimately:
https://devdocs.prestashop-project.org/8/themes/getting-started/theme-yml
Within the available_layouts params, we’ve outlined our {custom} format title and outline:
custom-layout:
title: Customized format
description: That is {custom} formatNow, we’ve to create this format file below the templates/layouts folder so create this folder and create a file referred to as custom-layout.tpl contained in the templates/layouts folder and put the under content material:
{extends file='layouts/layout-both-columns.tpl'}
{block title='content_wrapper'}
<div id="content-wrapper" class="js-content-wrapper col-xs-12 col-md-8 col-lg-9">
{hook h="displayContentWrapperTop"}
{block title='content material'}
<p>Hiya world! That is HTML5 Boilerplate.</p>
{/block}
{hook h="displayContentWrapperBottom"}
</div>
{/block}Observe: The format file title should be the identical as outlined within the theme.yml file. Within the custom-layout.tpl file, we’ve prolonged the dad or mum theme (traditional) layout-both-columns.tpl format.
You’ll be able to see the newly added little one theme within the theme listing (Design > Theme & Emblem > Theme), activate the kid theme and click on on “Select layouts”:
After clicking on “Select layouts”, a brand new window opens and you will note the {custom} format possibility within the dropdown:
That’s all about this weblog.
If any situation or doubt please be happy to say it within the remark part.
I might be completely happy to assist.
Additionally, you possibly can discover our PrestaShop Improvement Providers & a wide range of high quality PrestaShop Modules.
For any doubt contact us at [email protected].
On this weblog, we’ll learn to add {custom} layouts to an present PrestaShop theme. PrestaShop already has some predefined layouts, akin to full width, two columns, three columns, and so forth. Nevertheless, if you’ll want to add a brand new format, you possibly can create {custom} layouts.
So as to add a {custom} format, we have to create a file below the templates/layouts folder of the theme and modify the config/theme.yml file. Modifying information in present themes is just not a really helpful strategy as a result of once you replace the theme, modifications can be misplaced. Due to this fact, we’ll create a baby theme. PrestaShop helps little one theme performance, which suggests you possibly can lengthen the dad or mum theme’s conduct.
To create a baby theme in PrestaShop, we create a folder below the themes folder and title it in accordance with your want in small letters (for instance, “mytheme”). Create one other folder below “mytheme” and title it “config.” Below the “config” folder, create a brand new file referred to as “theme.yml” and put the next content material on this file:
dad or mum: traditional
title: mytheme
display_name: My theme for format
model: 1.0.0
property:
use_parent_assets: true
meta:
compatibility:
from: 8.1.0
to: ~
available_layouts:
custom-layout:
title: Customized format
description: That is {custom} format
layout-full-width:
title: Full Width
description: No aspect columns, best for distraction-free pages akin to product pages.
layout-both-columns:
title: Three Columns
description: One giant central column and a couple of aspect columns.
layout-left-column:
title: Two Columns, small left column
description: Two columns with a small left column
layout-right-column:
title: Two Columns, small proper column
description: Two columns with a small proper columnRight here, we’ve prolonged the default PrestaShop “traditional” theme. You too can go to the under hyperlink to know the theme.yml file parameters intimately:
https://devdocs.prestashop-project.org/8/themes/getting-started/theme-yml
Within the available_layouts params, we’ve outlined our {custom} format title and outline:
custom-layout:
title: Customized format
description: That is {custom} formatNow, we’ve to create this format file below the templates/layouts folder so create this folder and create a file referred to as custom-layout.tpl contained in the templates/layouts folder and put the under content material:
{extends file='layouts/layout-both-columns.tpl'}
{block title='content_wrapper'}
<div id="content-wrapper" class="js-content-wrapper col-xs-12 col-md-8 col-lg-9">
{hook h="displayContentWrapperTop"}
{block title='content material'}
<p>Hiya world! That is HTML5 Boilerplate.</p>
{/block}
{hook h="displayContentWrapperBottom"}
</div>
{/block}Observe: The format file title should be the identical as outlined within the theme.yml file. Within the custom-layout.tpl file, we’ve prolonged the dad or mum theme (traditional) layout-both-columns.tpl format.
You’ll be able to see the newly added little one theme within the theme listing (Design > Theme & Emblem > Theme), activate the kid theme and click on on “Select layouts”:
After clicking on “Select layouts”, a brand new window opens and you will note the {custom} format possibility within the dropdown:
That’s all about this weblog.
If any situation or doubt please be happy to say it within the remark part.
I might be completely happy to assist.
Additionally, you possibly can discover our PrestaShop Improvement Providers & a wide range of high quality PrestaShop Modules.
For any doubt contact us at [email protected].
