Dedicated to the Hydrogen framework, headless commerce, and building custom storefronts using the Storefront API.
There are lots of great additions to the upcoming 2021-07 release of the Storefront API. You’ll find detailed release notes for this version release here. Below are the highlights:
Subscriptions
You can now retrieve subscription products from the sellingPlans object, and enable a buyer to purchase a subscription with Shopify’s native checkout.
Tutorial: Manage subscription products
International pricing
The prices that display in a storefront can vary based on a buyer's location. Presentment currencies have been deprecated in favor of international pricing powered by the new GraphQL directive called @inContext. For example, you can use the @inContext(country: CA) directive to query the price of a product within the context of Canada. You can also explicitly set the context of a checkout and cart for a better buying experience.
Tutorial: Support international pricing on storefronts
Local pickup
With the Storefront API you can now query whether a product is in stock and available for local pickup at a specific location. You’re also able to return a list of in-store pickup locations, sorted based on the closest location to a customer's latitude and longitude.
Tutorial: Support local pickup
Additional metafields
The Storefront API now supports metafields on the following additional resources: Article, Blog, Collection, Customer, Order, Page, and Shop. You can retrieve metafields to access information from different types of resources to enhance your commerce experience. Previously metafields were only supported on the Product and ProductVariant resources.
Tutorial: Retrieve metafields with the Storefront API
We have also added the following features to the unstable Storefront API version:
Cart
You can now use the Storefront API to build a cart during a customer's session. The cart enables buyers to collect the merchandise they intend to purchase, get the estimated cost of those items, and continue to a checkout once ready. It is optimized for performance and designed to scale without any store-wide rate limits. When a customer is ready to purchase their items, a checkout URL can be requested using the cartCheckoutURL mutation.
Tutorial: Manage a cart
Filtering
Narrowing down your collections query by specifying which products to fetch can support a number of buyer experiences. For example, you can filter search results based on a subset of data, such as product size, color, and vendor.
Tutorial: Filter products in a collection
Build custom buyer experiences backed by Shopify's speed, scalability, and power. Hydrogen is a new toolkit for developers to build non-liquid custom web storefronts. You can also leverage Oxygen to host Hydrogen storefronts directly on Shopify that is fast, global and optimized for commerce.
We’re heads down building this right now, sign up for updates here
A new public repo has been created for all discussions and support regarding the Storefront API. This is the place to find proposed schema changes, report bugs, request features and more. We encourage you to direct your discussion there moving forward - check it out! https://github.com/Shopify/storefront-api-feedback
We look forward to engaging with you on GitHub!
Liam | Developer Advocate @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog
Is it true that an app has to be a selling channel to be able to use Storefront API?
Is there a way to make an existing app a selling channel? Seems to be not possible for an existing app that already has installations...
Is there a way to use Storefront API in an existing application?
I need my app to be able to list product subscriptions (selling plans). The app has been using only Admin API so far, but Storefront API seems to be better fit for this.
(Btw, I can not list selling plans with Admin API either, but that is off-topic here)
I have a similar app that needs a list of selling plans associated with products...were you able to have your question answered?
No 😞
Hi Liam,
As a Shopify partner providing one of the top translation apps in the app store we got an email from Shopify that the API now supports
Menu Titles as translatable resources:
But we are not able to find this in the GraphQL API.
Can you please shed some light on whether the Menu Titles are now available in the API and if not when they will be available?
Thank you!
Milen
Would you be able to explain the intention of the cart versus the existing checkout? The new cart API has significantly less fields available than the checkout, what would be a scenario in which I would want to use the former?
What is the new Cart API? Can you please provide me the link?
@inContext seems like a very useful directive.
I was wondering if there could be some clarity as to how to use the directive with variables?
The @inContext must be at the root of the query but so to for the variables. For example how would one make the inputs in the following example use variables?
variables: input: {
buyerIdentity: {
countryCode: 'FR'
}
}
Where does the ($input: CheckoutCreateInput!) get placed in the below query?
query: mutation @inContext(country: FR) {
checkoutCreate(input: $input) {
checkout {
buyerIdentity {
countryCode
}
totalPriceV2 {
amount
currencyCode # EUR
}
lineItems(first: 1) {
edges {
node {
title
variant {
priceV2 {
amount
currencyCode # EUR
}
}
}
}
}
}
}
}
Thanks!