In some cases, you may want to show content on AMP only, or add mobile-specific CSS to the AMP pages.  Here we will discuss exactly how to perform these tasks.

How to show content on AMP only

Yes, you can show content for AMP only.

1. Enter your Main Shopify Theme's theme.scss.css file and add the following CSS:

   .amp-only { display: none; }

2. Now edit your product description HTML in your Shopify Admin Panel, by clicking the "<>" icon in the product description editor
   and add a div with class "amp-only", for any content that you only want to show for AMP:

   <div class="amp-only">This content will be shown only for AMP</div>

Once complete, this content will be shown only for AMP pages.

Applying mobile-specific CSS to AMP pages

You can apply mobile-specific CSS on AMP.  Please note: AMP does not inherit your original theme's CSS files.  This is done to make sure that your AMP CSS remains Valid.  So if you have some mobile-specific CSS on your Shopify Theme, you will want to simply copy that CSS onto the AMP pages using the Custom CSS tool provided by the AMP app.

For example, let's say your product description uses the following HTML

<div class="hidden-mobile">This content is hidden on mobile</div>

And your theme's CSS file uses the following CSS:

@media screen and (max-width: 700px) { .hidden-mobile { display: none; } }

Your AMP product will still contain the <div class="hidden-mobile"> content, but the Theme's CSS will not transfer over to AMP automatically, so this content will not have any mobile-specific CSS added to it by default.  To accomplish that, you should identify exactly what CSS you would like to transfer over to the AMP app, and then open the Custom CSS tool, and enter the CSS.

Your theme's specific CSS may be different, so it is important to first identify what the CSS is in your theme that is controlling the mobile-specific media queries.  Once you identify that, transferring it over to AMP is a breeze.