2021-07 Storefront API version release

Retired Boards Appdev Custom Storefronts
1

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

Unstable API version release

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

Hydrogen & Oxygen - Coming soon!

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

Storefront API Feedback

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!

2

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)

3

I have a similar app that needs a list of selling plans associated with products…were you able to have your question answered?

4

No :disappointed_face:

5

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:

SherpasDesign_0-1628511500919.png
SherpasDesign_0-1628511500919.png699×648 161 KB

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

6

What is merchandiseId in this API and how can I get it?
What is merchandiseId in this API and how can I get it?1019×645 53.6 KB

7

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?

8

What is the new Cart API? Can you please provide me the link?

9

@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!