shopify / storefront-api-examples

Example custom storefront applications built on Shopify's Storefront API

Warning

This repo is unmaintained, and the examples are now out of date.

For up-to-date resources and tools, check out https://shopify.dev/docs/custom-storefronts

Storefront API Examples

Shopify's Storefront API allows you to build custom ecommerce experiences.

Each directory is a self-contained example application that demonstrates usage of the Storefront API. The examples are built on both Shopify specific libraries and popular open source frameworks (React, Ember, etc). These examples are built and maintained by community members. As such, it's up to you as a developer to use the Storefront API reference or check the API version release notes to ensure that you are using the most up-to-date fields.

See the README.md in each example directory for more details and how to get started.

Contributing

For help on setting up the repo locally, building, testing, and contributing please see CONTRIBUTING.md.

Code of Conduct

All developers who wish to contribute through code or issues, take a look at the CODE_OF_CONDUCT.md.

License

MIT, see LICENSE for details.

storefront-api-examples's Issues

Question: Is it possible to use the js-buy-sdk within a Shopify online store itself?

Hello

Is it possible to use this within a Shopify online store itself?

I am creating a third party widget to show highlighted/recommended products. This widget is to be embedded within a Shopify online store. When I click on a product (which has only 1 product variant), i want to add it to checkout / cart.

I ran the https://github.com/Shopify/storefront-api-examples/tree/master/react-js-buy and it works beautifully for my usecase. However, as I am creating a checkout, it does not impact the current cart. So I get a webUrl for client.checkout.addLineItems and when I goto that link, I can checkout

The webUrl is of the form https://somesite.myshopify.com/5128290393/checkouts/eb2ae53ff4e94bf6b73141ff73b5a96d?key=2ecfedf5e7ce91ba3326200e66138794

However, I am not able to add it to the current cart
https://somesite.myshopify.com/cart is empty.

Please advise.

Thanks
Rao

ember-apollo places real money orders

I was just trying the ember-apollo out.

I set it up locally on my machine and went through the checkout process to see how it works.
By the end of it I was very surprised to see that I had actually ordered a pair of boots for 190CAD.
The money was transferred out of my bank account.

Can we put the API or payment integration into some kind of sandbox/test mode by default?

Cheers

Storefront API Mutation Limitations

Hi - I'm working on a Shopify PWA and have been working through adding a number of customer mutations and have a couple questions:

• How to allow a customer/user to “decline invitation” when following a customer activation email? OOB Shopify has a decline invitation when following the activate link in an email. I don't see any mutation or inputs for active mutation to allow for this functionality:

• Why do a number of customer mutations still use userErrors while customerCreate deprecated userErrors and uses customerUserErrors? https://help.shopify.com/en/api/custom-storefronts/storefront-api/reference/mutation/customercreate#deprecated-return-fields vs https://help.shopify.com/en/api/custom-storefronts/storefront-api/reference/mutation/customerreset

• Is there any documentation on the expected data for form input? Such as length of password, password characters, etc. Those sorts of requirements that we could add to our client-side validation.

• Is it possible to use a checkout mutation to checkout with Apple Pay or go directly to a specific payment gateway? such as https://help.shopify.com/en/themes/customization/cart/add-more-checkout-buttons-to-cart-page but through the api?

Suggestion: use Redux for cart state in react-apollo example

Since Apollo already uses Redux to store products, I think it'd be a natural fit to also use it to manage the shopping cart's state.

Or would it be better to create a new react-apollo-redux example?

npm start > Module not found..

index.js is referencing ../../shared/app.css, which does not exist.

Hence npm start or yarn start throughs an error.

Documentation on pagination

While I'm aware that pagination can be achieved via next and previous page. Right know it doesn't seem possible to go to a specific page number, as described in here.

I'll also cross-reference this Issue from here,

For larger shops this is a must-have IMHO.

Shopify API POST request not working with POSTMAN on Private Apps

I'm trying to make a very basic POST request for a private shopify app. I am working with Postman REST client EXACTLY as described here:
https://help.shopify.com/api/tutorials/using-postman
Unfortunately, It is not working. It returns status 200 and return an html page that says : "Log in to manage your store".
It does not apply any changes to the shop.
For some reason, GET requests work fine while all POST requests fail.

I am currently using the trial account of 14 days. So is it the issue with trial account?

Trying to access the storefront endpoints with tokens generated by the shopify admin api

We're running the storefront without problem with manually created storefront access tokens

Now in the scope of a public app, for a given install, we're creating a storefront token on the behalf of the user/store (via the shopify_api gem, ShopifyAPI::StorefrontAccessToken.create(...etc))

The very same storefront developments does not work with the tokens created like so. Is that normal ? or is something missing ? I'm kind of wondering what's the use of having access to the StorefrontAccessToken via the admin api

Thx if any enlightments

'uncaught type error' in react-js-buy product component

Each product has a select dropdown for color and one for size.
When there's only one color option, and I change the option for size,
When I change the size selection without having changed the color selection previously I get a console error, and the selectedSize is ignored in favor of the default when if I add the product to the cart immediately:

Product.js:44 Uncaught TypeError: Cannot read property 'attrs' of undefined
    at Product.handleOptionChange (Product.js:44)

Create please vue.js examples

It would be great to make Vue.js for SPA projects to.

How would you deal with multi language?

I know that there are a couple of apps that allow your store to have multi languages the question would be how to use storefront API to get that data.
Is it even possible?
What would be the best option for this?

updating react-js-buy's shopify-buy breaks things

Updating package.json,
shopify-buy ^1.0.0-alpha.9 → ^1.2.0,
leads to error:
index.js:7 Uncaught TypeError: _shopifyBuy.Config is not a constructor

LineItem added everytime you go to the cart

Hi, there seems to be an issue with the cart in the angular app.
Every time you navigate to another route and go back to the cart all the lineitems are added again and duplicate the existing ones.
This line of code is triggered twice with the lineItem in NgOnInit cart.component, then three times if you navigate out and in again

    this.globalService.newlineItemObs.subscribe(lineItem => {
      if (lineItem) {
        this.addItem(lineItem);
      }
    })

I tried to unsubnscribe onDestroy() it does not duplicate items any more but than i can not add new items to the cart.

any ideas? Thank you

Please provide relay example

GraphQL error: metafields doesn't exist on type 'Product'

How can I retrieve metafields for a product using the Storefront API?

Question: Query for linklists

I have checked the documentation just looking for confirmation of this.

Is it possible to query linklists using the storefront api?
Will it ever be possible?

customerRecover, customerReset and invalid type ID!

I'm currently implementing a password reset flow, and ran into an issue with the customerReset mutation. Firing customerRecover sends an email notification, as expected. I modified the email notification template to point to my server instead, for example http://localhost:3000/reset-password/6655363669/7c4a5966d0901b57ee96af96eddb0eb5-1503254727.

The problem is that customerReset takes a customer ID, which should be 6655363669 here. But from what I can tell, that's a Shopify Customer ID, but not necessarily a Shopify Storefront API Customer ID? The exact error I get is "GraphQL error: Variable id of type ID! was provided invalid value". The docs show an ID that looks like Z2lkOi8vU2hvcGlmeS9FeGFtcGxlLzE=, and not 6655363669. Do I need to modify the email notification template? If so, what Liquid template variable(s) do I use to create a correct password reset URL?

An example that includes password recovery would be great, but it also just looks like that mutation is expecting the wrong arguments.

How can I redirect the response from Shopify to my app?

I want to show an answer view so that the user knows that his transaction was completed, but I do not want to see it in the shopify tab, but in my app.

Thank you.

Field "nodes" missing in types bundle

The reference API @ https://help.shopify.com/api/storefront-api/reference/queryroot clearly shows that nodes ([Node]!) is a field that can be queried and is part of the QueryRoot. This can be confirmed by running the following query on GraphiQL:

query {
  
  nodes(ids:["Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC83MzYzNDIwNzgyNjM1", "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC83NzQwNTQyNTE3Mjkx"]) {
    id
  }
  
}

which does return data as such:

{
  "data": {
    "nodes": [
      {
        "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC83MzYzNDIwNzgyNjM1"
      },
      {
        "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC83NzQwNTQyNTE3Mjkx"
      }
    ]
  }
}

I'm wondering if the types bundle was built specifically for this example and the choice of not including nodes was deliberate. I'm also unsure if this question belongs in stack overflow or is a legitimate issue.

Please excuse the lack of my knowledge on GraphQL phraseology and terms, my foray in this technology is a nascent one.

Query param on Collection products

It seems its not possible to use the query param on products array when fetching a collection. Is there a reason for this?

{
  shop{
    collections(first:10){
      edges{
        node{
          products(first: 10, query:"tag:'something'"){
            edges{
              node{
                title
              }
            }
          }
        }
      }
    }
  }
}

results in

{
  "errors": [
    {
      "message": "Field 'products' doesn't accept argument 'query'",
      "locations": [
        {
          "line": 22,
          "column": 31
        }
      ],
      "fields": [
        "query",
        "shop",
        "collections",
        "edges",
        "node",
        "products",
        "query"
      ]
    }
  ]
}

Our store, as most Shopify stores, are made up of small to very large collections. I'm not sure how else I can filter a collection's products by tags?

Any help is appreciated

Thank you,
Thomas

Preserving cart contents

In the React-Apollo example, is there any mechanism for preserving cart contents across sessions? If not, what would be the best way to achieve this? Something like https://github.com/elgerlambert/redux-localstorage ?

Support for Relay Modern

I've tried to use the Relay Modern pagination container, but it is not possible since in the API PageInfo scheme is missing the endCursor and startCursor fields.. Any plan to add these to the Storefront API any time soon?

Sort collections by CREATED_AT

Hi, I am developing an app that is using Storefront API.
I need to retrieve all collections using GraphQL query sorted desc by date of their creation (or simply put - newest created collections should be at the top of the list). Also my app requires paging so I call for 10 items per API call.
My query is

query {
  shop {
    name
    collections(first: 10, sortKey:UPDATED_AT, reverse: true) {
      edges {
        cursor
        node {
          id
          title
        }
      }
    }
  }
}

Is there any way I can sort collections not by UPDATED_AT time but by CREATED (as I can see in ProductCollectionSortKeys)? Can sorting by ID help me achieve that behavior?

Thanks.

Typescript types

The existing arc/types.js file is sooooo close to being a typescript *.d.ts file.

I spent about an hour trying to hand edit types.js into a list of type definitions but didn't quite understand some of the types and structures well enough to do so (for example what methods should a type the implements node receive?). I'm also guessing the existing types.js file was procedurally generated, in which case it would be much faster and more maintainable for someone inside Shopify to update the generator once, but even if it was hand edited types.d.ts would still be an incredibly achievable super high value asset to the community.

What's the best way to go forward - should I take a stab at a hand-edited PR or would that be rejected because types.js is procedurally generated and types.d.ts needs to be as well?

Styled Components example

I've modified the react-js-buy project to use styled components and thought I'd share here hoping others might find it useful and/or point out problems.
https://github.com/Strangehill/storefront-api-examples/tree/styled-components/react-js-buy

`variantBySelectedOptions` Not working as intended?

We are running this Query:

{
  node(id: "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzIyMzg2NjA2MTA1") {
    ... on Product{
      title
      handle
      variantBySelectedOptions(selectedOptions: [{ name:"Region", value:"NA"}]) {
        id
      }
    }
  }
}

And getting null back on the variant, even though we know that a product exists, what are we doing wrong?

git clone instructions fail

The instructions say to use the following command to clone the repo:

git clone [email protected]:Shopify/storefront-api-examples.git

At least on Windows, this call fails

D:\Repos>git clone [email protected]:Shopify/storefront-api-examples.git
Cloning into 'storefront-api-examples'...
Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

I think this is the universal way of doing it (and certainly the one recommended by GitHub): git clone https://github.com/Shopify/storefront-api-examples.git

Can't get product title at checkout, Angular app

Hi, I'm working in the angular storefront, I'm having an issue with the cart, I can't get the product title. {{lineItem.variant.title}} displays: Default title and {{lineItem.variant.product.title}} does not display anything at all.

Anything help will be very appreciated and thank you for the code!

mutation customerAccessTokenCreate : Doesn't work on ionic 3

hello
i am trying to do login in my Ionic 3 app using my shopify store (hectic by natalia) customer, but I haven't seen a good answer. and i also attempt :

mutation customerAccessTokenCreate($input: CustomerAccessTokenCreateInput!) {
  customerAccessTokenCreate(input: $input) {
    userErrors {
      field
      message
    }
    customerAccessToken {
      accessToken
      expiresAt
    }
  }
}

but these syntax doesn't work on Ionic or may be i am doing something wrong , so if you have any suggestions regarding this , which is allow to do in ionic3 please guide me !

Thanks

Angular example

I have developed Angular 4 Storefront API example https://github.com/JsssCode/SmallAwesomeShop.
Maybe it would be helpful to someone.
Looking forward to adding it to this repo!

Can't able to do login through the Shopify api from my ionic app

I have been searching for customer login Api for Ionic , but I haven't seen a good answer.
I need to let the customer to login from my ionic app using Shopify api. so can you please guide me
How can i do the login part..?

checkoutCompleteWithCreditCard Payment Gateway is Invalid

Hi

I am creating the reactjs app. I set the shipping address and email, vault the card (receive what looks like a valid vaultD), but always get "Payment gateway is invalid" response after calling checkoutCompleteWithCreditCard mutation.
But. If I use Postman to vault the same credit card (perform POST request to the vault URL), I receive the token that looks the same. And I am able to complete the payment.
My gateway is (for testing) Bogus Gateway and I'm setting the card number to "1".

Could you please advise on what am I doing wrong?

Sort products by price

I'm using the Storefront API with Vue to pull in all products and then sort by price. From what I've read this cannot by done straight from products, you need to query the collectionsByHandle for the collection, then access products.

Unfortunately I'm not having much luck with this below. I have that collection available and accessible via the Storefront API but it's not retrieving it. The documentation for this is quite scarce so any help would be muchly appreciated!

      {
        shop {
          collectionByHandle(handle: "all-products") {
            products(sortKey: PRICE) {
              edges {
                node {
                  id
                  title
                  onlineStoreUrl
                  productType
                  images (first: 1, maxWidth: 300, maxHeight: 300, crop: CENTER) {
                    edges {
                      node {
                        src
                        altText
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

For clarification, this query below pulls in products when just querying products(first: 20) but it seems there is no sortKey for price when looking at only products. So after using the GraphQL Explorer I've seen you need to do via collectionsByHandle first, then drill down to products. Please correct me if I'm wrong...

      {
        shop {
          name
          products(first: 20) {
            edges {
              node {
                id
                title
                onlineStoreUrl
                productType
                images (first: 1, maxWidth: 300, maxHeight: 300, crop: CENTER) {
                  edges {
                    node {
                      src
                      altText
                    }
                  }
                }
              }
            }
          }
        }
      }

StoreFront API status

Hello Everyone! I know this is probably the wrong place to discuss a couple of questions I have, but couldn't find another place. Sorry if I disturb.

I find this new StoreFront API really interesting. For a long I wanted more UX on Shopify based sites. So having this will definitly, as you said

give you creative control to build customized purchasing experiences for your customers

But also I have some questions.

• Will this be integrated in someway with the StoreFront Editor? as a headless CMS like Prismic
• Sections like the Checkout are available for Plus accounts only, How is this gonna change?
• There are a couple of analytics really useful, pages where people come from, abandoned carts, etc. All of this things are gonna have it's own APIs?

Displaying variant titles

I have my product displayed, and the ability to change variants, however I can't seem to figure out how to display what the title of the variant is. Any help would be appreciated.

edit: Figured it out, added this expression in the variantSelectors map in the Product.js file:
{variant.attrs.selectedOptions[i++].attrs.name.toString()}

And of course I added let i = 0; on the first line of the render on line 49

react-graphql-client production builds don't work

getting

This function should not be invoked. It should be used to tag template literals that will be
    transcompiled into graphql-js-client's query builder syntax.

node Query on ShopifyCheckout returns incorrect number of lineItems

Steps to Produce:
An item is added successfully to an existing checkout on my 'product' page (the mutation checkoutLineItemsAdd is used for this.)

When I directly navigate to the 'Basket' page, the graphql query below is called, which returns the ShopifyCheckout. The data returned contains the incorrect number of lineItems aka the added item is not present.
Strangely though the totalPrice field has updated correctly (it does include the added item's price).

On a page refresh the correct number of items are fetched.

Any one encounter a similar issue / have any thoughts on what the issue might be?

const fetchBasketGraphqlQuery = graphql(gql`
  query FetchBasket($id: ID!) {
    basket: node(id: $id) {
      ... on ShopifyCheckout {
        id
        totalPrice
        webUrl
        lineItems(first: 10) {
          edges {
            node {
              id
              quantity
              title
              variant {
                id
                image {
                  altText
                  originalSrc
                }
                price
                title
              }
            }
          }
        }
      }
    }
  }
`, {
  skip: props => !props.checkoutId,
  options: props => {
    return ({
      variables: {
        id: props.checkoutId,
      },
    })
  },
})

Definitive Answer on Checkout Login

I've spent the last couple hours researching if there's any way to utilize the storefront api and avoid having the customer log in on Shopify checkout (when coming from an authenticated session from our headless Shopify app). And it seems No but I can't find a definitive answer in the docs or online...

• Just saw the storefront announcements and saw "Allow customer to login automatically via X-Shopify-Customer-Access-Token header in web checkout" on https://ecommerce.shopify.com/c/api-announcements/t/stay-up-to-date-with-the-storefront-api-changes-548257 but (afaik) you can't send headers when redirecting a user to a url, this is not possible outside of mobilesdk. According to Scott @ Shopify/js-buy-sdk#561 (comment) it's not currently possible except with MultiPass.

• I came across Shopify/js-buy-sdk#430 (comment) which seemed to suggest we can simply pass customer_access_token in the webUrl but that does not seem to work a year later (if it ever worked at all) after associating the checkout with the same customerToken.

Nowhere on https://help.shopify.com/en/api/custom-storefronts/storefront-api/reference/mutation/checkoutcustomerassociatev2 or the storefront api docs does it go over authentication for checkout and that it's not possible. If it's indeed not possible to avoid making the user relogin on Shopify checkout, can we please add a note to the official docs? Would save me and others countless hrs sifting through Github issues and the community forum to find out the answer regarding avoiding logging in when coming to checkout screen.

edit:

Perhaps we can load checkout into an iframe with the X-Shopify-Customer-Access-Token header via ajax XHR.

I understand the security implications (re: Shopify/js-buy-sdk#561 (comment)) but it's still unfortunate nonetheless. Definitely not an ideal UX and would probably lead to conversion loss but I'm not really sure how to avoid from a security/technical standpoint.

[Question]: Selling products you don't own

Hello,

Thanks for your examples (especially the React one!)—they are helpful!

I have a general question on how to use the shopify api to sell products that other people own.
Do you know how this would be possible?
Would I need each merchant to send me their X-Shopify-Storefront-Access-Token?
Is there a better way that makes it easier for merchants to sell their products through my service?

Thank you for your time!

Choosing between react-apollo, react-js-buy and react-graphql-client?

Would be excellent with a note / documentation on the pros & cons of each approach.

I am starting out a new universal React Frontend (using NextJS) based on my Shopify backend. Which of the above would be a good fit and why?

ps. Looking for consultant to help me build this out. Please dm: [email protected]

product review data in graphql

Hi, I would like to access product review data through GraphQL, but working with Shopify apps does not seem like it is supported. Here is the specific app for your reference: https://apps.shopify.com/product-reviews

Thanks

node-js-buy unhandled promise rejection

When attempting to add an item to the cart, I get:
0|app | You have triggered an unhandledRejection, you may have forgotten to catch a Promise rejection:
0|app | TypeError: Cannot read property 'id' of undefined
0|app | at productsPromise.then.products (/home/user/store.example.com/lib/app.js:77:85)
0|app | at process._tickDomainCallback (internal/process/next_tick.js:135:7)
0|app | (node:15392) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): TypeError: Cannot read property 'id' of undefined

Item does not get added to cart and eventually, I get a 504.

Unknown field `productTypes` on type `Shop`

Hello.
I got the schema from the examples here.
I want to get product types in my application, I tried the query on graphql-explorer in the website
and it worked fine.
so is my schema old ? or I can't get product types.
btw, where to download the schema from ?
I couldn't find any link to it in the api reference so I got it from here.

how to use add to cart and order

Hii,
How to use for add to cart and order functionality using graphsql-js-client

Can't create Checkout

I know these examples rely on an alpha version of the shopify-buy package (^1.0.0-alpha.7) but the provided examples currently fail to create a checkout. Last week everything worked as intended.

To reproduce the issue choose react-js-buy for example, install dependencies and start the app.

Error in console:
Uncaught (in promise) TypeError: Cannot read property 'checkoutCreate' of undefined at index.js:3129 at <anonymous>

an update to ^1.0.0-alpha.9 fixes the issue of cart creation but since the api slightly differs examples still don't work properly

Unhandled Promise - why is this happening?

I have what is essentially boilerplate code from the node-js-buy example that works on one site (store.bubbies.com) but not another (store.cookspantry.com) The only differences are the views and the storefrontAccessToken / domain in js-buy-sdk.js On the cook's store, when I try to add an item to the cart, PM2 throws UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 3): TypeError: Cannot read property 'id' of undefined.

Open the Checkout flow in current browser window

In both the React examples, the Shopify Checkout flow opens in a new browser tab.

I don't think this is a very good experience.

Is it possible to retain the Checkout flow in the current browser window?

GraphQL error: CustomerAccessTokenRenew access denied

We're starting to experience a critical bug with our customerAccessToken renewal logic. It looks like the customerAccessTokenRenew mutation is running into permission issues. There's nothing in the documentation that implies special permissions required for this mutation.

Any help would be greatly appreciated @swalkinshaw. It's only a matter of time before this starts to affect our customers, since their access tokens are bound to expire soon.

PWA example using Polymer

Could you write PWA example using Polymer elements and tools?

• https://www.polymer-project.org
• https://www.webcomponents.org
• https://github.com/Polymer/shop
• https://www.youtube.com/results?search_query=google+io+17+polymer
• https://github.com/aruntk/polymer-apollo

Permission denied (publickey)

OS: Windows 10 Pro
GIT: 2.8.1.windows.1

So, issuing:

git clone [email protected]:Shopify/storefront-api-examples.git

generated the following error:

Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

I resolved the issue by issuing the following instead:

git clone https://github.com/Shopify/storefront-api-examples.git