It is a common problem when you as a developer are working constantly with client projects, and you have no time to learn and to follow new updates about core tech stuff. It’s happening to me all the time, and this is the reason why I started this blog to be aware of Shopify updates every week and to share my finds.
Let’s check what updates we have from the Shopify core Liquid template language.
Product Media
This is an update for an old admin product images section, which is evolving now in the “mixed-media galleries” thing. It is super cool and since now we can get rid of those bizarre hacks with uploading videos trough admin product images alt attributes.
New available file types to upload are:
- .mp4 and .mov for video
- .glb for 3D models
New .mp4 or .mov will be uploaded to Shopify CDN and will be shown with the default HTML5 video player interface. YouTube videos will be shown within iframe, in the usual YouTube embedding way. 3D models will be shown through Google’s model-viewer component.
Under the hood now you have product.media attribute, which is similar to product.images. But in the media case, you have access to the Media Liquid Filters.
Typical code for media block will be the following:
{% for media in product.media %}
{% case media.media_type %}
{% when 'image' %}
<div class="product-image">
<img src="{{ media | img_url: '100x100'}}" alt="{{ media.alt }}">
</div>
{% when 'external_video' %}
<div class="product-single__media">
{{ media | external_video_tag }}
</div>
{% when 'video' %}
<div class="product-single__video">
{{ media | video_tag: controls: true }}
</div>
{% when 'model' %}
<div class="product-single__media" ">
{{ media | model_viewer_tag }}
</div>
{% else %}
<div class="product-single__media">
{{ media | media_tag }}
</div>
{% endcase %}
{% endfor %}You can also use Media Filters, that will allow you to get URLs for a product’s media. You can check them here https://shopify.dev/docs/themes/liquid/reference/filters/media-filters.
The routes object
This is about generating dynamic URLs to the storefront. It has 14 different properties. They are URLs to a particular type of page, and you can use them to provide independent links from any sub-domain or language version of your store.
For example, instead of using hardcoded links to account pages, you can use construction:
<a href="{{ routes.account_url }}">My account</a>which will render:
<a href="/account">My account</a>New page_image object
Possibly you are familiar with the case when you are moving theme from one store to another, and you forget to add og:image file to the Customize Editor. At least I do. In this case, Shopify has added a new property section inside Online store > Preferences page.
Here is the new syntax:
<meta property="og:image" content="http:{{ page_image | img_url: '1200x1200' }}">Now we can forget about schema fields settings for this Open Graph image tag at all.
Deprecated liquid objects
Don’t forget to check https://shopify.dev/docs/themes/liquid/reference/objects/deprecated-objects page, for deprecated properties, not to use things that are obsolete. For example, I’ve found that shop_locale prop is obsolete, and I have been using it till this time.
