Building an App Clip with React Native 
Shopify Development news and articles
Liquid Weekly

News & Articles

Building an App Clip with React Native
When the App Clip was introduced in iOS 14, we immediately realized that it was something that could be a big opportunity for the Shop app. Due to the App Clip design, being a lightweight version of an app that you can download on the fly, we wanted to investigate what it could mean for us. Being able to instantly show users the power of the Shop app, without having to download it from the App Store and go through the onboarding was something we thought could have a huge growth potential.
Shopify Liquid Theme Programming for beginners
Learn Liquid Programming and 10x your career as a Shopify developer. Understand how Liquid works and what it can do.
Advanced grid layouts with the cycle tag
Using iteration tags in theme development is pretty much a necessity when creating a Shopify theme that will showcase multiple products (which is definitely most cases). We'll generally use the for loop to display each product from a shop or collection on the page. This is great for just placing the products on the page, but doesn't give a lot of options if you want to set up more complicated html markup and/or varying css classes.
Hacking together an AJAX Collection API in Shopify
In this video, I'll share with you a hack I learned in order to asynchronously load collection data by appending ?view= to collection urls and using the layout none tag. By the end, you'll understand how to essentially create your own AJAX Collection API within Shopify!
Build a CUSTOM Shopify Storefront using Hydrogen
Follow along with Ania as she builds a custom Shopify Storefront using Hydrogen ( a React-based framework).
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

Shopify App Node
This is a sample app to help developers bootstrap their Shopify app development. It leverages the Shopify API Library on the backend to create an embedded app, and Polaris and App Bridge React on the frontend. This is the repository used when you create a new Node app with the Shopify CLI.
Handling Events
Each browser event handler is registered in a context. In the previous example we called addEventListener on the window object to register a handler for the whole window. Such a method can also be found on DOM elements and some other types of objects. Event listeners are called only when the event happens in the context of the object they are registered on.
Getting Started with Vite
Vite (French word for "quick", pronounced /vit/, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects. Vite is opinionated and comes with sensible defaults out of the box, but is also highly extensible via its Plugin API and JavaScript API with full typing support.
Shopify drawer cart DAWN 5.0 update
Here's an update to a recent video about building a drawer cart for the Dawn 5.0 update. Get the cart on github: And watch the video where I build this cart
Difference Between ==, eql?, equal? in ruby
Read an overview of some of the subtle differences between equality operators in ruby. All things being equal, it's a helpful article!



Storefront API `ContentEntry` queries
With GraphQL Storefront API version 2022-10, you can use ContentEntry queries to display custom content that's associated with resources like products, customers, and orders. Metaobjects created with the CONTENT category with an Active status are available through ContentEntry queries.
Added revision_id field as part of webhook payload for SubscriptionContractCreate and SubscriptionContractUpdate
The revision_id field was added as part of webhook payload for SubscriptionContractCreate and SubscriptionContractUpdate.
Changes to GraphQL API MoneyV2-related fields
As of 2022-10, the Money scalar is being removed from the Storefront API. It was previously used for monetary fields that do not have a V2 suffix (<name>: Money). As a result, the following changes are being made: * Non-V2 fields will now use MoneyV2 objects for their type (<name>: MoneyV2). * Monetary fields that do have the V2 suffix (<name>V2: MoneyV2) are being deprecated in favor of the <name>: MoneyV2 equivalent. These fields will be removed in subsequent releases.


Automatic image delivery in AVIF
Shopify now supports automatically optimizing storefront images using the AV1 Image File Format (AVIF) format, which improves performance by reducing delivered bytes. Optimization occurs on a per image basis, where Shopify will examine the request and determine the best compatible file format (e.g. AVIF, WebP or JPEG) based on image quality and compressed bytes.
Changes to the required app icon size in the Partner Dashboard
Icons added to your app using the Partner Dashboard App setup page now must be 1200 px by 1200 px in size. This change makes icon sizes consistent across the Partner Dashboard, the Shopify App Store, and other development surfaces.


Nothing on the radar