Shopify
Installation
This guide is intended for anyone (you don't need to be a developer).
1. Open theme code
Find your theme and open the code editor via: Online Store
-> Themes
-> Actions
-> Edit code
.
2. Locate and remove old meta-tags
By default they're at Snippets/social-meta-tags.liquid
but in some cases they may be in 2 different files: Snippets/fb-open-graph-tags.liquid
and Snippets/twitter-card.liquid
.
We are going to modify few lines of code. You can always go back to a previous version using the Older versions
button next to the opened file name.
- Delete the lines containing
<meta property="og:image
- Delete the lines containing
<meta property="twitter:image
- Delete the lines containing
<meta property="twitter:card
- Save the file(s), use the top-right corner "Save" button
3. Add Flyyer meta-tags
At the start of the file, press Enter ⏎
to create a new line and paste the code below replacing your-project-identifier
with your project identifier (it's on the first line).
Find your project identifier here. If you don't have a project yet, create one here.
{% assign f_project = 'your-project-identifier' %}
{%- capture f_url -%}https://cdn.flyyer.io/v2/{{ f_project }}/_/__v={{ "now" | date: "%N" }}{{ request.path }}{% endcapture %}
<meta property="og:image" content="{{ f_url }}">
<meta property="og:image:secure_url" content="{{ f_url }}">
<meta name="twitter:image" content="{{ f_url }}">
<meta name="twitter:card" content="summary_large_image">
{% if product %}
<meta name="flyyer:default" content="{{ product.featured_image | img_url: 'medium' }}">
{% elsif article and article.image %}
<meta name="flyyer:default" content="{{ article.image | img_url: 'medium' }}">
{% elsif collection and collection.featured_image %}
<meta name="flyyer:default" content="{{ collection.featured_image | img_url: 'medium' }}">
{% elsif collection and collection.products %}
{% for item in collection.products limit:4 %}
<meta name="flyyer:default" content="{{ item.featured_image | img_url: 'medium' }}">
{% endfor %}
{% endif %}
Remember to press the top-right corner "Save" button.
note
In case your meta-tags were in 2 different files, just put this code in one of them.
4. Voilà 🎉
Now you're able to manage your link previews from your dashboard, create content from templates while preserving your brand style and export it as social media formats.