Blog
Practical notes on JavaScript tooling, module systems and the platform decisions behind the work we do
-
Shopify Predictive Search API: Build a Search Box
The predictiveSearch query returns up to ten products, collections, pages and query suggestions per request; here is how to wire one up.
-
Declarative Shadow DOM: SSR Without the Flash
Declarative Shadow DOM ships shadow roots in the HTML itself, so server-rendered web components paint their styles before any JavaScript runs.
-
Hydrogen Cart Handler: One Route, Every Mutation
How Hydrogen's cart handler wires a cart ID cookie, one /cart action route and optimistic line updates into a headless Shopify storefront.
-
Import Discount Codes Into Shopify in Bulk
Shopify has no CSV import for discount codes, so moving a WooCommerce or Magento coupon list across takes two Admin GraphQL mutations and batches of 250.
-
Partitioned Cookies: CHIPS for Third-Party Embeds
Set Partitioned on a cross-site cookie and CHIPS gives it a separate jar per top-level site, which is how an embedded widget keeps its session.
-
Shopify API Version Upgrade: The Quarterly Job
Shopify ships an API version every quarter and supports each for 12 months, so pin the version, read the health report and upgrade on a schedule.
-
Shopify Optional Scopes: Ask When You Need Them
Shopify optional scopes let your app request read_orders in context instead of at install, and revoke it when the merchant turns the feature off.
-
Animate height: auto in CSS: interpolate-size or Grid
interpolate-size: allow-keywords animates height: auto in Chromium only, so here is the grid fallback to ship for Firefox and Safari.
-
Shopify Checkout Branding API: What Replaced It
The Shopify checkout branding API moved to checkoutAndAccountsConfigurationUpdate, one configuration covering checkout, customer accounts and sign-in.
-
Shopify Collection Filters in Liquid: Links or Form
Shopify collection filters in Liquid come from the filter object: a GET form to pick values, url_to_remove links to clear them, and one URL contract.
-
JavaScript String Length Lies About Emoji
JavaScript string length counts UTF-16 code units, so one family emoji reads as 11; Intl.Segmenter counts the characters a user actually sees.
-
Shopify Payment Customization Function: Hide COD
How to hide, rename or reorder checkout payment methods with a Shopify payment customization function, and where it silently will not run.