Custom amp page technical question

Solved
Highlighted
Tourist
4 0 1

Firstly, I understand there are amp apps - I tried a few different ones and they work but are pretty limited. 

 

In an effort to get more customization I built an index page from scratch for a client's home page. If it's uploaded via the Shopify files uploader it's automatically assigned a noindex by Shopify. It works when I navigate to it but Google can't index it due to the robots.txt and editing it and uploading it manually each time is a pain. 

 

As far as I can tell, liquid doesn't allow if=mobile, then=amp theme, if=desktop then=theme so I don't think that's the solution. 

 

Can anyone think of a way to allow Google to index a custom amp page for mobile users coming from Google without having to host the amp page on another domain? Hoping to not have to build a whole new template that's AMP compatible for the whole site. 

 

Thanks

0 Likes

Hi,

 

While the defaults are a bit limited, we do offer a tier where we actually code up the custom theme from scratch so your customers AMP pages can look exactly as the normal site. I'm more then happy to explain in more details, just send me a message.

 

Regarding the question, maybe with alternative layouts https://help.shopify.com/en/themes/customization/store/create-alternate-templates and having the ?view=amp or something like that in the url can maybe solve this problem for you?

Helping Shopify merchants prepare for the mobile-first world.
0 Likes
Tourist
4 0 1

Hey alex, thanks for the reply. I should have mentioned that I tried the ?view=amp string but since Shopify requires {{ content_for_header }} and  {{ content_for_layout }} to allow the custom layout to be saved that makes the page fail AMP validation due to it loading lots of non async scripts. 

 

If it's uploaded as a file in Shopify Files Section then it has a noindex tag attached to that directory. 

 

Any idea how to get around {{ content_for_header }} in the theme file?

 

Thanks

0 Likes
Shopify Partner
1838 173 558

Something along the lines of

{% if handle or template == "index.amp"%}
  {% capture header_content %}{{ content_for_header  }}{% endcapture %}
  {% comment %}
  You might need to check for presence of certain admin telltale strings in order to display captured header_content so admin does not go boom!
  {% endcomment %}
{% else %}
  {{ content_for_header }}
{% endif %}

 

Above can be simplified depending on your needs and your particular AMP theme setup. But yeah, the tag needs to be in there, but you can even hide it in a comment or behind if else (just don't do that for regular view otherwise you'd probably end up breaking lots of Shopify behaviour around tracking, cart, and who knows what else).

 

Hope this inspires you while seeking workarounds to get AMP-ified. Good luck!

I turn coffee in to code - since 1998
0 Likes

Success.

Shopify Partner
14 4 6

Hi @canadianclub 

 

The way around this is with an alternative index.liquid template file and not with a layout theme file.

 

First create an alternative index template file named amp.

 

Then replace  {{ content_for_index }} with {%- layout none -%} at the top of the file. This will remove {{ content_for_header }} and {{ content_for_layout }} that is generated by the theme file.

 

Under the {%- layout none -%} is where you place all your amp code. Unlike a file you are uploading to the Shopify Files Section, you will still have access to shopify liquid code.

 

Within you main theme file you can then add the following to direct Google to the amp version:

 

{% if template == 'index' %}<link rel="amphtml" href="{{ canonical_url }}?view=amp">{% endif -%}

You don't include the above code in your amp file version.

0 Likes
Tourist
4 0 1
Thanks Karl, it worked and my custom coded index worked nearly perfect as soon as it dropped.

Now off to custom code the product pages template.
1 Like