How do I add custom CSS to AMP pages?

Take control of the CSS and styling of your AMP pages on Shopify

Written By Stephen Gardner (Super Administrator)

Updated at February 29th, 2020

Shop Sheriff allows users to add custom CSS to their AMP pages.  This allows users much more freedom to intricately customize the way things appear on any page.  

Shop Sheriff has an instant live-update CSS feature which automatically validates all your CSS, minifys it, tree-shakes it to remove unused values, and makes sure your AMP pages run as fast as possible.

  1. Open your AMP theme customizer

  2. Select the "{+}" icon on the right

  3. Add your CSS for any individual template, or add CSS to every page using the "Theme" CSS tab.  Your CSS will be automatically validated prior to saving.  If you have any AMP validation issues related to your CSS, you'll be notified within the editor.

  4. You may use up to 5,000 characters of CSS per template.  This is due to the 75k CSS restriction placed on AMP pages by Google.



Was this article helpful?