Learn How To Update Shopify page sections with Liquid 
Shopify Development news and articles
 
Liquid Weekly

News & Articles

Updating SHOPIFY page sections with LIQUID
Using cart update requests to smuggle in liquid template re-renders.
Shopify’s paginate object and collection filtering
If you are using Shopify out-of-the-box pagination there are a couple of things you need to know in advance especially if you want to hide items, like out-of-stock items or items with a certain tag.
Customize Shopify’s default email templates using Klaviyo
Upgrade your Shopify notification emails templates using Klaviyo. Achieve brand consistency across all of your notifications with Klaviyo's classic email template editor. No code editing required!
Should you stop using stylesheet_tag?
Shopify liquid and core web vitals don't play nicely at times. There are some quirks with specific liquid filters that can result in less performant sites... Even though they are in Dawn and recommended in liquid documentation. I dug a bit deeper into using the stylesheet_tag filter with some (very unscientific) experiments.
Sync inventory levels to variant metafields, with Mechanic.
Use this task to easily make your inventory levels available in your online storefront theme. This task monitors for changes to inventory, and copies inventory availability figures to metafields on the related variant.
Allow customers to edit their own metadata
Shopify recently added support in the merchant admin UI to view and edit customer metafield data, but there’s still no way for customers to add/update these values directly from the storefront. Enter Customer Fields.

The Helium Customer Fields app is the all-in-one customer data toolkit for Shopify, allowing you to extend the customer registration flow and collect unique data from customers. Customer Fields is free to use on development stores and will help you save time and money when doing builds related to customer data. Build with Customer Fields: See developer docs

Code & Tools

Modern CSS selectors
CSS selectors have become increasingly sophisticated since the introduction of CSS3 more than a decade ago. This tutorial discusses three recent pseudo-class selectors which target elements based on their state.
Dispatching custom events
We can not only assign handlers, but also generate events from JavaScript. Custom events can be used to create “graphical components”. For instance, a root element of our own JS-based menu may trigger events telling what happens with the menu: open (menu open), select (an item is selected) and so on. Another code may listen for the events and observe what’s happening with the menu. We can generate not only completely new events, that we invent for our own purposes, but also built-in ones, such as click, mousedown etc. That may be helpful for automated testing.
How to use Fetch API with async – await in React Application
Before the Fetch API most of the React JS developers used to depend on the Axios to get the data from the server. Now, with the Fetch API being supported by the most of the browsers, many developers wants to use this instead of Axios as the Fetch API is native to the browsers and there will be no need to depend on third party library.

Changelog

There is nothing new under the sun. At least, not this week.

Events

Google Analytics 4 and What It Means For Your Shopify Store
If you have a Shopify store, you most likely have a Google Analytics account to uncover insights for growth. In October 2020, Google released the new GA4 but most of us continued to use Universal Analytics. However recently Google announced they will be sunsetting Universal Analytics and forcing us over to GA4. We'll cover what's new in Google's latest version of Analytics and show you the current options to set up GA4 on your Shopify store so you can take advantage of this new data platform.

Tip of the Week

stylesheet_tag now supports preload: true

The liquid stylesheet_tag now supports preload: true. It's primarily recommended for only two things on all themes: the main stylesheet and the LCP image.
The real benefit is that preload now happens in parallel with liquid rendering - a significant performance improvement!