Coding

Shopify: Liquid Snippet for Loading CSS Asynchronously

Shopify recently added section.index to the Liquid API. This is a great addition that allows you to do things like selectively load CSS based on the section index. This is useful for things like loading CSS asynchronously, which can help improve your page speed scores. If you want to load CSS asynchronously on Shopify, you can use this Liquid snippet: css.liquid {%- liquid assign css = css | default: false assign section_index = section_index | default: 3 -%} {%- if section_index > 2 -%} <link rel="stylesheet" href="{{- css | asset_url-}}" media="print" onload="this.

Hugo: Dynamic Image Rendering with URL Replacement

If you want to use Hugo to dynamically render images with URL replacement and lazy loading, here is the code. {{ $card__show_image := .Params.show_image }} {{ $cardImageURL := "" }} {{ if and (eq $card__show_image "true") (.Params.images) }} {{ with .Params.images }} {{ range $image := . | first 1 }} {{ $cardImageURL = replaceRE "(=w|s)(2400|1600)" "$1360" $image }} {{ end }} {{ end }} <img src="{{ $cardImageURL | absURL }}" alt="{{ .

Shopify: How to Hide a Product, Page or Post from Search?

If you want to hide a product, page or post (item) from search or seo, here are steps. Go to Custom Data page on store Add a new definition with name SEO Visibility Change Namespace and key as ‘seo.hidden’ Add Integer type with one value and validations (min: 0, max: 1). Activate Storefront access. Then go to item and set SEO Visibility metafield value as 1. Done ✅ After these steps, Shopify will add this code to setted product / page / post etc.