DEV Community

Shopify + Next.js + Tailwind CSS: Modern eCommerce

iskurbanov on September 02, 2021

Article brought to you by buildnextshop.com In the last couple years, we have all gotten extremely comfortable with online shopping. This has push...

Read full post

Ben Balderas • Oct 25 '21

@iskurbanov is there a way to pass a custom option/variant to a certain product, and display it in the cart and checkout? Something like a textfield for an engraving, gift message, etc?

Any pointing in the right direction would be greatly appreciated!

iskurbanov • Oct 25 '21

Hey Ben, you can achieve that using the "Custom Attributes" when you are creating the checkout URL. Here is the reference: shopify.dev/api/storefront/referen...

Let me know if that helps!

Ben Balderas • Oct 25 '21

@iskurbanov Thanks! I think it does help.

Are these "customAttributes" per product? or per cart?

If I purchase your course, does it come with this type of support? 🙂 I'm a bit new to these parts

iskurbanov • Oct 25 '21

You would add the customAttributes per line item into your cart/checkout.

Definitely! I think after the course you would have a good idea on how to create custom option/variants for your products. We go in-depth with using GraphQL to interact with the Storefront API.

Ben Balderas • Oct 27 '21

I was hoping it would be as easy as adding customAttributes here:

```mutation {
  checkoutCreate(input: {
    lineItems: [{ variantId: "${id}", quantity: ${quantity}, customAttributes: ${customAttributes}}],
  }) {
    checkout {
      id
      webUrl
    }
  }
}```

And passing this as an object with a value from a textfield in the UI:

customAttributes: [{ name: 'Name', value: 'David' }]

But this doesn't seem to work

iskurbanov • Oct 27 '21 • Edited

Hey Ben,

Almost! It has to be a key-value pair, so something like this:

mutation {
  checkoutCreate(input: {
    lineItems: [
      { 
        variantId: "VARIANT_ID",
        quantity: 1
      }
    ],
    customAttributes: [
      {
        key: "Name",
        value: "David"
      }
    ]
  }) {
    checkout {
       id
       webUrl
    }
  }
}

If you click on the [AttributeInput!] it tells you the format: shopify.dev/api/storefront/referen...

Let me know if that helps!

PrebenWulff • Apr 24 '22

Great! But, now where do I see the custom attributes? I cant see them on the order page.

Great course btw!

iskurbanov • Apr 24 '22

You should see them on your Shopify admin dashboard under orders.

Comment deleted

Preben Wulff • Apr 25 '22

nvm, I figured it out.

Mahdi • Dec 30 '21

thank you very much for this please update your field schema some are deprecated

Chris B • Jun 4 '22

Thanks for the tutorial. Very much appreciated. After following this step-by-step, I somehow continue to get this error:

FetchError: request to https://https//spnsors.myshopify.com/api/2022-04/graphql.json failed, reason: getaddrinfo ENOTFOUND https
    at ClientRequest.<anonymous>
    at ClientRequest.emit (node:events:365:28)
    at ClientRequest.emit (node:domain:470:12)
    at TLSSocket.socketErrorListener (node:_http_client:447:9)
    at TLSSocket.emit (node:events:365:28)
    at TLSSocket.emit (node:domain:470:12)
    at emitErrorNT (node:internal/streams/destroy:193:8)
    at emitErrorCloseNT (node:internal/streams/destroy:158:3)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  type: 'system',
  errno: 'ENOTFOUND',
  code: 'ENOTFOUND'
}
wait  - compiling /_error (client and server)...
wait  - compiling...
event - compiled client and server successfully in 124 ms (570 modules)
error - utils/fetchShop.js (26:10) @ productData
Error: Products not fetched
  24 |   } catch (error) {
  25 |     console.log(error);
> 26 |     throw new Error('Products not fetched');
     |          ^
  27 |   }
  28 | }

Super new to shopify, how can I debug this?

iskurbanov • Jun 5 '22

Hi Chris, seems like there might be an issue with your env file. Double check to see if your values are set up properly. You can also try to input your env values directly into your code to see if that resolves the issue.

Fran Agulto • Dec 30 '21

Thanks so much @iskurbanov , I am a Junior level React dev and this was super helpful to get me started. I will take the entire tutorial. Your content is super clear and you explain things very well. I appreciate it!

fernandodomain • Oct 9 '21 • Edited

I am getting this error :(
dev-to-uploads.s3.amazonaws.com/up...

iskurbanov • Oct 9 '21

Could you push your code to github so I can take a look?

fernandodomain • Oct 9 '21

github.com/fernandodomain/Headless...

iskurbanov • Oct 9 '21

Shows a 404, maybe it a private repo?

fernandodomain • Oct 9 '21

Sorry. Made it public

iskurbanov • Oct 9 '21

Try to add a next.config.js file to the root directory like this: github.com/iskurbanov/shopify-next...

Your next.js might have issues accessing your env file (also I would suggest not pushing that on your public repo in case you have some sensitive information there, luckily the Storefront API is readonly).

Deiby Dayans R • Oct 27 '21

Do you have some idea how to update the Shopify APP boilerplate with Next 12 version?

iskurbanov • Oct 27 '21

You can try changing the next.js version in package.json and then run the npm install command. I would personally wait a bit before implementing Next.js 12 on any major projects.