How one can generate Shopify AMP without plugin?

Abhijeet2
Shopify Partner
6 0 2

Thanks Nick

Stephen24
Shopify Partner
12 0 8

Hey Abhijeet, happy to help you out here.  Thank you Nick for the support on what is naturally not incredibly easy.  Thanks also for mentioning Shop Sheriff's AMP app for Shopify.

Creating your own custom AMP pages on Shopify is certainly possible. Here I'll break it down at a high level.

Overview of creating a custom AMP page

  • Creating a secondary AMP template for any one of: products, collections, blogs, etc (all individually, here we can start with a product)
  • Creating a few custom "helper" snippets, especially for the header
  • Adhering to the Google specifications for AMP pages 
  • Adding a small piece of code that will add a `<link rel="amphtml"...>` in your pages `<head>` tag, and this `<link>` tag will point to the AMP version of your page

If this sounds confusing, it is because this is a technical challenge for sure.  Creating an AMP page is not difficult to get started.  But creating an AMP page that looks good, displays product data properly, and has advanced interactivity like "Add to cart" functionality is actually rather complex.  Here are the steps

 

1) Create the template

Creating a product AMP template is easy.  You can follow this guide and create a template for "products" called "my_amp_template".

2) Create the initial HTML and custom helper snippets

In your template file, you're going to have to follow this Google specification, and craft an AMP HTML file.  Here's a good start:
`

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <title>AMP page for {{produict.title}}</title>
    <link rel="canonical" href="/products/{{product.handle}}">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-custom>
      h1 {color: red}
    </style>
</head>
<body>
    <h1>{{product.title}}</h1>
</body>
`

Since the same (or similar) `<head>` tag will be used across all AMP templates, you can move the head code into a helper snippet if you'd like.  Within that helper snippet, you can check for the type of template that you are on, using liquid, `{% if template.name == 'product' %}`, and conditionally render the proper `<title>` tag based on that.
In any event, moving some code into it's own reusable snippet is not necessary, but it will help encapsulate the logic so that the page may be easier for you to digest or debug when the time comes.

3) Adhere to the AMP spec

This is where you're probably going to drop off.  You will quite literally have to re-code your product template, from scratch, using all new HTML and CSS.  You can't just import your original shop's CSS styles, because AMP has a size-limit on the style tag, and Shopify's generated stylesheets exceeds that limit.  You also can't just import stylesheets using the standard `<link rel="stylesheet">` tag, because AMP doesn't allow that. 

Following the AMP HTML spec, you will need to display product images using an `<amp-img>` tag instead of an `<img>` tag. 

If you're going to output your product description, you'll naturally do so doing something like this: {{product.description_html}}, but you better be careful, because there's a good chance that your product description html is not valid AMP HTML by default, so you will have to find another way to "AMP" this HTML before spitting it out onto the page.  For example, if your product description HTML contains any images, you'll have to again use an `<amp-img>` tag instead of the standard `<img>` tag to render them.  How you're going to "pre-AMP" this product's description HTML is certainly one of the many challenges, here.

To APP or not to APP

#3 is really the reason why the only sane solution is using Shop Sheriff's AMP app for Shopify.  The AMP app will AMP every product in your store, for free.  There is tiered pricing to add more features, including AMPing your blog posts and collections pages.

The reason an app is really the right way to go, here, is because the AMP app will automatically solve the AMP HTML transformation process, as well as give you advanced customizability that likely would never be possible if you were to try this yourself.  You can easily add product reviews, a buy now button, a currency converter, and many other features, all at the click of a button.  The AMP app is well reviewed, used by thousands of shops already, and incredibly well supported, with a roadmap of features still to come.

Final thoughts...

Coming from someone who can be a bit of a control freak with his own code, I can understand the desire to want to do it yourself.  While it is again, certainly possible to create your own AMP pages, attempting to do things like rendering product reviews, putting your product images into a nice image carousel, or having advanced interactivity on the page is simply going to take a lot of time, headache, and frustration.  As mentioned before, In order to "pre-AMP" your product HTML, you'll also need some kind of server-side process to do this, validate it, and save it in your product metadata.  I'm not sure how you'll do this without an app.  These are just some of the huge advantages of using the AMP app for Shopify.

I hope this helps - I'm happy to answer any other questions you might have about AMP and Shopify, as it happens to be a strong area of expertise for me ;)

 

 

 

 

Abhijeet2
Shopify Partner
6 0 2

Hi Guys,

Got one new problem with my website.Can anyone help me to reduce website load time?

0 Likes
Abhijeet2
Shopify Partner
6 0 2

Thanks alot Stephen

0 Likes
KarlOffenberger
Shopify Partner
1867 182 777

Hi Abhijeet

Use Google PageSpeed Insights and follow the recommendations in their report. Alternatively, use Lighthouse which is anyway what PageSpeed Insights use. Another, and arguable the single most powerful, tool for optimizing your site performane is learning how to use broser developer tools (Chrome and Firefox are both good options, Safari and IE less so in my opinion but that's just taste).

Reducing website load is a topic far too general for a form discussion and stp by step guides - is it network load times, or perceived load times? Those two alone divide in to a whole science of their own ;-)

Hope that helped and good luck!

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
0 Likes
Nick
Community Moderator
Community Moderator
3508 281 672

Hi Abhijeet,

There are many different techniques to help reduce website load time. The content team for Shopify Plus actually put together a great guide on a blog post with 12 different ways to help improve your website performance and speed which you can see here

Hopefully, something on there can help you. Do you know if it is something specific which could be causing it? 

All the best, Nick

Nick | Community Moderator @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
canadianclub
Tourist
4 0 1

thanks for your post, very informative. 

 

how did you save the alternative theme file without adding  {{content_for_header}} (which imports scripts and invalidates AMP) and  {{content_for_layout}}

 

The way I see it, either I code a site and upload it as a file (which means it's noindex-ed by Shopify's non-editable sitemap) or I create a custom theme but it's said to be invalid by Google and the AMP validator. 

0 Likes
redgatedesigns
Shopify Partner
1 0 1

Hi Stephen,

 

Thank you so much for going into such detail in describing how someone might create an AMP theme.  I've recently been experimenting with PWAs and AMP and put together a valid PWA AMP draft website here https://second.school (it's entirely static content but has some fancy navigation menus).  I was hoping to create an attractive website using the same principles for Shopify with just a single AMP template for desktop as well.

 

I started by stripping out the Venture theme's JS and external CSS (which obviously ruined the appearance in the absence of any AMP development) but when I inspected the previewed page I found that Shopify has inserted a whole heap of additional Javascripts (presumably for their analytics and such).  Just in case there was a snippet left in the Venture theme that has adding these Javascripts, I downloaded the completely empty "skeleton" theme from github.  I then inserted the minimum AMP snippet (that you had shared) and inspected the preview... and I still found shopify hosted Javascripts...

 

So, if Shopify adds JS on top of the theme's JS, then that would make it impossible to have an AMP theme on Shopify.  I've been searching the internet for any other ideas or evidence of success with AMP Themes on Shopify and I haven't seen any.

 

So I tried the Shop Sheriff AMP App to get some insight into how they succeeded.  Well, it looks like they host the AMP pages on their own servers so they don't have to worry about Shopify's Javascripts.  I'm not really sure HOW they do it but their UI is also very much separate to Shopify. Btw, it does look like a very good App but I like to tinker... 

 

CONCLUSION:  I don't think an AMP theme is possible (even for secondary templates) due to the Shopify platform's javascripts that can't be avoided. 

 

I would like to be proved wrong so please share if you have experienced anything contrary to me.

 

Kind regards,

 

Ian

trademinister
Shopify Partner
2 0 1
Hello,
I'm ready to create Amp theme. Do You need it now?
Regards
OscarBradley
Tourist
8 1 0

I attempted to do the same without using an app but I was not successful. Boy, was I glad! I then went forward with using an AMP app. FireAMP really worked out well for me.
P.S.- Let me know what worked for you!

0 Likes