Custom Layout and Templates

AMP provides an easy way to modify layout updates or override existing templates.

In order to apply custom changes, you need to create new files inside your active theme folder (eg. “app/design/frontend/Magento/luma/Swissup_Amp/layout/swissupamp_default.xml).

Use layout handles with swissupamp_ prefix to modify only amp pages without affecting main theme.

Layout Modification Example

Let’s remove search icon and form from the header.

Create app/design/frontend/Magento/luma/Swissup_Amp/layout/swissupamp_default.xml file with following content:

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd">
    <body>
        <referenceBlock name="top.search" remove="true" />
    </body>
</layout>

Create app/design/frontend/Magento/luma/Swissup_Amp/web/css/scss/_custom.scss file with following content:
```
.header .search-icon {
    @extend .hidden;
}
```
Clear cache and check result at frontend.

Template Modification Example

Copy template you need to modify from AMP extension to your theme folder and apply your customizations in it, for example app/design/frontend/Magento/luma/Swissup_Amp/templates/header/nav-right.phtml
Clear cache and check result at frontend.

Custom Layout and Templates

Layout Modification Example

Template Modification Example

Next Up