{"id":23647,"date":"2021-08-11T05:48:37","date_gmt":"2021-08-11T09:48:37","guid":{"rendered":"https:\/\/plumrocket.com\/docs\/?p=23647"},"modified":"2021-11-18T05:42:03","modified_gmt":"2021-11-18T10:42:03","slug":"how-to-create-magento-amp-theme","status":"publish","type":"post","link":"https:\/\/plumrocket.com\/docs\/magento-amp\/v3\/devguide\/creating-amp-theme","title":{"rendered":"How to Create Magento AMP Theme"},"content":{"rendered":"\n

After installing and enabling the Magento 2 AMP extension<\/a>, you can use the default AMP Theme One for your AMP pages. However, you may want to create your custom AMP theme with different templates and styles. This article provides a step-by-step guide on how to create your custom AMP theme by inheriting the default AMP Theme One, and apply it to the storefront. <\/p>\n\n\n\n

Prerequisites<\/h2>\n\n\n\n

For the sake of compatibility, upgradability, and easy maintenance, do not modify AMP Theme One. To customize the design of your Magento store, create a new custom AMP theme inheriting the default AMP theme.<\/p>\n\n\n\n

The Magento mode influences the way static files are cached by Magento. In this article, we provide recommendations about theme development for developer\/default mode.<\/p>\n\n\n\n

We recommend enabling maintenance mode during the AMP theme creation. You can do this by running the following command:<\/p>\n\n\n\n

<\/div>
php bin\/magento maintenance:enable [--ip=<ip address> ... --ip=<ip address>] | [ip=none]<\/code><\/pre><\/div>\n\n\n\n
Alternatively, you can set your Magento to the Developer mode as it speeds up development. Run the following command:<\/p>\n\n\n\n
<\/div>
php bin\/magento deploy:mode:set developer<\/code><\/pre><\/div>\n\n\n\n
Create AMP Storefront Theme: Walkthrough<\/h2>\n\n\n\n
The high-level steps required to add a new AMP theme in the Magento system are the following:<\/p>\n\n\n\n
  1. Create a directory for the theme under app\/design\/frontend\/Plumrocket\/<amp_custom_theme><\/code>.<\/li>
  2. Add a declaration file theme.xml<\/code><\/li>
  3. Add registration.php<\/code>.<\/li>
  4. Create directories for images and fonts.<\/li>
  5. Configure your theme in the Admin panel.<\/li>
  6. Apply the theme for your store.<\/li><\/ol>\n\n\n\n
    Create a Theme Directory<\/h2>\n\n\n\n
    Take the following steps to create a directory for your theme:<\/p>\n\n\n\n
    \n
    Step-by-step guide:<\/p>\n\n\n\n
    1. Go to <magento_root>\/app\/design\/frontend\/Plumrocket<\/code>.<\/li>
    2. Create an <amp_custom_theme><\/code> directory named according to your theme. Note that the name of your theme must begin with amp_<\/code>.<\/li><\/ol>\n<\/div><\/div>\n\n\n\n
      <\/div>
       app\/design\/frontend\/\n \u251c\u2500\u2500 Plumrocket\/\n \u2502   \u2502   \u251c\u2500\u2500...<amp_custom_theme>\/\n \u2502   \u2502   \u2502   \u251c\u2500\u2500 ...\n \u2502   \u2502   \u2502   \u251c\u2500\u2500 ...<\/code><\/pre><\/div>\n\n\n\n
       <\/p>\n\n\n\n
      Declare your theme<\/h2>\n\n\n\n
      After creating a theme directory, you have to create theme.xml<\/code> file in app\/design\/frontend\/Plumrocket\/<amp_custom_theme><\/code> folder. You need to specify your custom AMP theme name (<title> tag) and the parent theme name(<parent> tag) in the file. Use the following example of the theme.xml<\/code> file:<\/p>\n\n\n\n
      <\/div>
      <theme xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Config\/etc\/theme.xsd\">\n    \t<title>[amp_custom_theme]<\/title>\n    \t<parent>Plumrocket\/amp_one<\/parent>\n<\/theme><\/code><\/pre><\/div>\n\n\n\n
      \n
      Important Information:<\/strong><\/p>\n\n\n\n
      Your custom theme has to be inherited from the parent Amp Theme One theme. If you want to create your AMP theme with your custom styles and templates only, remove the <parent> tag.<\/p>\n<\/div><\/div>\n\n\n\n
      Add registration.php<\/h2>\n\n\n\n
      Create a registration.php<\/code> file under the app\/design\/frontend\/Plumrocket\/<amp_custom_theme><\/code> directory to register your theme in the system. Add the following content to the file:<\/p>\n\n\n\n
      <\/div>
      <?php\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\n\t\\Magento\\Framework\\Component\\ComponentRegistrar::THEME,\n\t'frontend\/Plumrocket\/[amp_custom_theme]',\n \t__DIR__\n);<\/code><\/pre><\/div>\n\n\n\n
      Run the following command to flush the Magento cache.<\/p>\n\n\n\n
      <\/div>
      php bin\/magento cache:flush<\/code><\/pre><\/div>\n\n\n\n
      Configure images<\/h2>\n\n\n\n
      You need to use a custom module to set image configurations for AMP themes. Please see the Plumrocket\/AmpCatalog\/etc\/view.xml<\/code> file for AMP image examples and standard dimensions.<\/p>\n\n\n\n
      Create Directories For Static Files<\/h2>\n\n\n\n
      Your theme will contain several types of static files: <\/p>\n\n\n\n