Accelerated Mobile Pages
Accelerated Mobile Pages (AMP) is a web component framework, which aims to improve the user experience with a faster loading speed of mobile pages. AMP pages always come high on the list of priorities of Google because the page takes less time to crawl. In other words, with AMP, your Shopify shop is going to be a user-oriented and mobile-friendly website, which is a straightforward way to a high page experience score.
Concerning the importance of this component in SEO and user experiences, Search Pie offers an out-of-the-box tool for Shopify merchants by automatically creating AMP pages for your store.
![](https://docs.searchpie.io/~gitbook/image?url=https%3A%2F%2F848413574-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Mb9oMrqO590_abBSvwF%252Fuploads%252Fz2fK7xrFAkiTK7q1j2UG%252Fimage.png%3Falt%3Dmedia%26token%3D1faf7968-5eff-4e7d-813d-5054dccd7019&width=768&dpr=4&quality=100&sign=f894e31&sv=1)
In the Enterprise Plan, Search Pie allows you to set up AMP for Home, Products, Collections, Blogs, and Blog Posts pages (included in Customizable page tab). All you have to do is navigate to the tab you want to add AMP, then hit the Activate button.
![](https://docs.searchpie.io/~gitbook/image?url=https%3A%2F%2F848413574-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Mb9oMrqO590_abBSvwF%252Fuploads%252FfLfB0khD2EX1q06Qnp1J%252Fimage.png%3Falt%3Dmedia%26token%3D88fb349d-8e18-4522-b4ae-c95cefd4d9d4&width=768&dpr=4&quality=100&sign=65331c28&sv=1)
Pro Tips: If you change anything on the your page (like changing your theme), please re-enable the Activate button, and then the AMP page will update these changes.
Before publishing, you can see how it looks on the right and click View full size for your demo store.
![](https://docs.searchpie.io/~gitbook/image?url=https%3A%2F%2F848413574-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Mb9oMrqO590_abBSvwF%252Fuploads%252FmsP1Qyh8oST0IHQP7uKW%252Fimage.png%3Falt%3Dmedia%26token%3Dd8277c67-c208-4d56-b5d7-d83fe1e9c521&width=768&dpr=4&quality=100&sign=87d1c81e&sv=1)
The direct AMP link from Search Pie by default will be the same as the original link, but with "a/amp-sb/" after the ".com" portion of the URL. Example:
Because the 1st time setting up, AMP pages are set in a default theme from Search Pie. If you want to change the theme of the pages as your wish, you can choose "Customize" here.
![](https://docs.searchpie.io/~gitbook/image?url=https%3A%2F%2F848413574-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Mb9oMrqO590_abBSvwF%252Fuploads%252FuDvHe8be9UWpPjLNknPu%252Fimage.png%3Falt%3Dmedia%26token%3D5b77637d-f00c-4f35-a3db-0b526762895d&width=768&dpr=4&quality=100&sign=158f3ffd&sv=1)
It will show you some options to adjust each part of your page, including the Header, Body, and Footer, as well as Colors (applied for all AMP pages on your site).
![](https://docs.searchpie.io/~gitbook/image?url=https%3A%2F%2F848413574-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Mb9oMrqO590_abBSvwF%252Fuploads%252FHqxhm4pCD2kgQyo6VH61%252Fimage.png%3Falt%3Dmedia%26token%3Dac171e9b-9700-4ca7-bf4c-3c6fe4801663&width=768&dpr=4&quality=100&sign=62a95692&sv=1)
Let's start customizing your AMP!
You could go first with the Header. All you need to do is add your logo, navigation and Top banner for your AMP pages. With the Top Banner, you could attach the link to one of your favorite collections that you want to navigate your customers to, fill out the description and change the colors for the text.
![](https://docs.searchpie.io/~gitbook/image?url=https%3A%2F%2F848413574-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Mb9oMrqO590_abBSvwF%252Fuploads%252F1yjouVPZysiC0EZTwfiD%252Fimage.png%3Falt%3Dmedia%26token%3D7584f501-a9ba-4a35-bf82-7ffea26cf9e6&width=768&dpr=4&quality=100&sign=b37fc7ec&sv=1)
Next, you could choose to create a list of sections that you want to appear in the Body.
![](https://docs.searchpie.io/~gitbook/image?url=https%3A%2F%2F848413574-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Mb9oMrqO590_abBSvwF%252Fuploads%252FCog4aNUcg7nWsfiYhyNd%252Fimage.png%3Falt%3Dmedia%26token%3D7a16a1f1-e34b-4b1b-b49f-9e97570ac676&width=768&dpr=4&quality=100&sign=42bae6e7&sv=1)
Just take your time to customize your AMP pages to be perfect. Besides adding images, titles, and descriptions, don't forget to enable the button if you want to add CTA to your page.
After Body part is completed, please move to Footer. Please add your social channels, coryrights and your store address.
![](https://docs.searchpie.io/~gitbook/image?url=https%3A%2F%2F848413574-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Mb9oMrqO590_abBSvwF%252Fuploads%252F6A4OfJQZOcrn2CGHLf1p%252Fimage.png%3Falt%3Dmedia%26token%3D840b68e8-b0c2-48b1-af65-2f6cb3095dd1&width=768&dpr=4&quality=100&sign=3c11fc2d&sv=1)
Next step, please move on to Setting. In this part, you could change the background colors, text font and text colors. Besides, we recommend you enable the Breadcrumb to help users keep track of and explore a site effectively.
In Intergration part, just enable Google Analytic and the chat app you want to add (Whatsapp, Messenger). If you want to add other apps, contact us via Livechat and our technical team will help you with it.
![](https://docs.searchpie.io/~gitbook/image?url=https%3A%2F%2F848413574-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Mb9oMrqO590_abBSvwF%252Fuploads%252FSxF6OQ9xtHNAFRrvOUJQ%252Fimage.png%3Falt%3Dmedia%26token%3D8aaeafcc-c4c5-4fb6-bde4-72f5d499ea57&width=768&dpr=4&quality=100&sign=fb07b749&sv=1)
After completing all the steps, please check the Preview to see if it works to you, then click Save & Publish and your AMP Pages are ready!
![](https://docs.searchpie.io/~gitbook/image?url=https%3A%2F%2F848413574-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Mb9oMrqO590_abBSvwF%252Fuploads%252FFlabdLN4BLRRcMXlOHSt%252Fimage.png%3Falt%3Dmedia%26token%3Db1b41d01-345b-47bd-8d05-aff0eef83362&width=768&dpr=4&quality=100&sign=36a39a1c&sv=1)
How to set up Integration Apps - Analytics?
Google Analytics
Google Analytics is an essential tool for tracking the SEO performance of AMP pages. Search Pie app will help you add AMP Pages to Google Analytics in just via one step. All you need to do is filling the tracking ID (a string like UA-000000-2) of Google Analytics, and the app will finish other setups for you.
To find the tracking ID of Google Analytics, please follow this step-by-step guide from Google:
1. Sign in to your Analytics account.
2. Click Admin.
3. Select an account from the menu in the ACCOUNT column.
4. Select a property from the menu in the PROPERTY column.
5. Under PROPERTY, click Tracking Info > Tracking Code. Your tracking ID and property number are displayed at the top of the page.
After getting the tracking ID, please enter it in the box of Google Analytics, then click Save & Publish button.
According to Analytics Help, “Once you have successfully installed the Analytics tag, it can take up to 24 hours for data such as traffic-referral information, user characteristics, and browsing information to appear in your reports”. However, to verify that your tag is working right now, you can check your Real-time report, which shows your current activity on your site.
1. Sign in to your Analytics account.
2. Navigate to a view in the property to which you added the snippet. If you only recently added the snippet to this property (website), it is likely that there will only be one view.
3. Open Reporting.
4. Select Real-Time > Overview
5. You will see one view of AMP pages here, it points out that the tracking ID is successfully added to your AMP pages.
Facebook Pixel
The Facebook Pixel is an analytics tool that helps you measure how effective your Facebook ad campaigns are by monitoring the actions people take on your website.
Firstly, please create a Facebook pixel.
1. Go to Events Manager.
2. Click Connect Data Sources and select Web.
3. Select Facebook Pixel and click Connect.
4. Add your Pixel Name.
5. Enter your website URL to check for easy setup options.
6. Click Continue.
After you have your pixel, please get it and enter it in the box of Facebook Pixel on the Search Pie app.
1. Go to Events Manager.
2. Select the pixel you want to set up.
3. Click Continue Pixel Setup.
3. Select Facebook Pixel and click Connect.
4. Select Install code manually.
5. Copy the pixel base code.
You can see more about how to get Facebook Pixel here: https://www.facebook.com/business/help/952192354843755?id=1205376682832142
Google Tag Manager AMP Container ID
Tag Manager features an AMP container type. Create a new AMP container for your project:
On the Accounts screen, click More Actions for the account you'd like to use. Select Create Container.
Name the container. Use a descriptive name, e.g. "example.com - news - AMP".
Under Where to Use Container, select AMP.
Click Create.
Your container is now ready. The next step is to copy and paste it into the box on Search Pie.
How to set up Integration Apps - Chat?
Tidio
If you had the Tidio app on your store already, you can integrate it with AMP pages from Search Pie by adding its JS code here.
To get this piece of code, please go to the Tidio app, choose Settings > Installation > Javascript > Copy link.
Facebook Messenger URL
Please go to Facebook > Page > Settings > Messaging > Copy Messenger Link
Then paste that link to the box on the Search Pie app and click Save & Publish.
Note: When your customers click on the button chat on AMP pages, they will directly go to the messenger of your Facebook page.
❓ FAQ About AMP
Why do the AMP pages not have an absolutely similar look to the original pages? Can I edit AMP pages?
The AMP pages are set in a default theme from Search Pie, which is believed to be the most optimized interface for your store on mobile phones. Besides, to optimize the loading speed of mobile pages, AMP will prioritize delivering the most essential content of the web page, therefore, it might look different from your original pages.
And yes, you can edit AMP pages as your wish with the "Customize" feature.
How long does it take for Google to index AMP pages?
Usually, Google takes 7 - 10 days to index AMP pages, and it also depends on how often Google crawls your website.
How does AMP benefit SEO?
Google's ranking systems apply a set of standards to all websites on the search result page. It means that thanks to the advantage of loading speed, AMP pages will be evaluated and ranked higher by Google on mobile devices because mobile-friendly is one of the most essential ranking factors for Google.
How to check if AMP is successfully integrated or not?
To make sure that AMP pages are successfully integrated, you can go to your original pages, right-click and click on “View Page Source,” or press Ctrl + U, to see the page's source. In the new tab, press Ctrl + F, and fill “amp” in the box, if you find the AMP link on the HTML code, it points out that AMP was enabled successfully.
The AMP links will look like this example:
When Google crawls your site, it will find out this "href" of the meta tag, which points to your AMP pages, and then Google might index them in some days.
Last updated