Can I edit the code of my AMP pages

Written By Stephen Gardner (Super Administrator)

Updated at May 6th, 2021

You cannot edit the underlying code or liquid structure of the AMP templates.  This is in part to make sure that the AMP pages generated are 100% valid AMP HTML and allow you to receive Google's AMP benefits.

However, there are a few sections within the AMP theme editor where you are allowed to add Custom HTML (such as the home page, and footer).  You can also add Custom CSS by clicking on the {+} icon on the right-hand side of the AMP theme editor.

If you're looking to make more finely tuned customizations to the AMP pages, using Custom CSS is a great way to style the AMP theme in order to make it more closely match your original (non-AMP) theme.  This will require some knowledge of CSS, or, if interested, you can hire a professional to do this for you.

Custom CSS examples

Here are some examples of AMP pages built by merchants who have taken the "Debut AMP" homepage, and customized it using custom CSS:

You can see that they were able to make the homepage look much more similar to their non-AMP site by simply using some CSS

Since AMP pages are generally only viewed through a mobile phone, they often don't need all of the bells and whistles of a traditional desktop page, and customizing the theme using CSS can go a long way while also keeping your AMP pages blazing fast.

To add Custom CSS to AMP pages, we have a live CSS editor built into your AMP theme customizer.  You can read how to do this here: How to Add Custom CSS to AMP pages on Shopify

Was this article helpful?