Webstudio

Log inLog into community

Join the Webstudio community

Updated 2 months ago

Using Shopify Storefront API with CDN and GraphQL Queries

Using Shopify Storefront API with CDN and GraphQL Queries

At a glance

The community member is working on integrating the Shopify Storefront API into their website. They are a beginner and want to know if their approach is correct, efficient, and secure. Their approach involves using a CDN for the Storefront API client and connecting to Shopify using their store domain, the latest API version, and a public storefront access token.

The community members discuss different methods for querying data with GraphQL, such as using Webstudio's native GraphQL input field or calling client.request() programmatically. They also discuss integrating the API into the page builder and potential security risks.

The community members suggest using Webstudio's resources and GraphQL as much as possible, as they are done on the backend, which is better for SEO, performance, UX, and security. However, they note that Webstudio currently lacks the ability to create a shopping cart and handle the checkout session, which would require custom JavaScript.

The community members explore different approaches to managing the cart, such as using local storage and passing data from the backend to the frontend. They also discuss the challenges of accessing the cart ID and checkout URL across pages and the potential need to handle these things in the frontend.

Overall, the community members are working together to find the

Useful resources

·

Hi everyone,
I’m working on integrating the Shopify Storefront API into my website. I’m a beginner in this area, and I’d like to know if my approach is correct and whether it’s efficient and secure.

My Approach:

Using CDN for Storefront API:

I’ll include the Shopify Storefront API client via a CDN:
<script src="https://unpkg.com/browse/@shopify/[email protected]/dist/umd/storefront-api-client.min.js">
</script>

Connecting to Shopify:

• I’ll use my store domain (e.g., my-shop.myshopify.com),
• The latest API version (e.g., 2024-04), and
• My public storefront access token.
Here’s the client setup:
<script>
const client = ShopifyStorefrontAPIClient.createStorefrontApiClient({
storeDomain: 'my-shop.myshopify.com',
apiVersion: '2024-10',
publicAccessToken: '<your-public-access-token>',
});
</script>

2

j

J

O

33 comments

Querying Data with GraphQL:

At this step, I’m not sure which of the following two methods would be better for implementing Shopify Storefront API queries in my Webstudio project:

Using Webstudio’s Native GraphQL Input Field
• I would directly interact with Shopify’s GraphQL endpoint: https://{store_name}.myshopify.com/api/2024-10/graphql.json

or I could call client.request() to handle queries programmatically with less manual configuration.

Integrating in Page Builder:
My plan is to add this JavaScript code directly into the page builder’s body element to load the data dynamically, binding it to page elements using variables from the query result.

My Questions:

• Does this approach seem reasonable for a beginner?
• Are there better or easier alternatives for this type of integration?
• Are there security risks in exposing the public access token and making client-side requests with GraphQL?

Thanks for your insights! I’m trying to ensure I don’t run into scalability or security issues later on. The help is much appreciated as this would solve a longe time problem for me! Thank you in advance.

My sources where mainly these two:
https://shopify.dev/docs/api/storefront#resources
https://github.com/Shopify/shopify-app-js/tree/main/packages/api-clients/storefront-api-client

JJohn Siciliano

Hey! Here are my thoughts

Do as much with Resources as you can. You should be able to fetch all your products, categories, etc with Resources. This are done on the backend which makes it best for seo, performance, ux, security...
What's missing right now to do this natively in webstudio is one or two things. 1. ability to create a shopping cart. You'll need custom JS to handle this. Maybe they provide something. 2. Idk what it takes to create a checkout session but you need to "pass" the cart to Shopify

JJohn Siciliano

resources https://docs.webstudio.is/university/foundations/variables#resource

JJohn Siciliano

also of type graphql https://docs.webstudio.is/university/foundations/variables#graphql

Thank you very much for the quick response, I'm just dabbling around a little bit to see whats possible (with my limited knowledge)

But I think you second point is somehow manageable mutations where the user gets redirected to the shopify hosted checkout page. (I don't know about the security in this approach)

Something like this:
mutation checkoutCreate($input: CheckoutCreateInput!) {
checkoutCreate(input: $input) {
checkout {
id
webUrl
}
checkoutUserErrors {
code
field
message
}
}
}

Which then later redirects the user:

{
"data": {
"checkoutCreate": {
"checkout": {
"id": "gid://shopify/Checkout/abc123",
"webUrl": "https://{store_name}.myshopify.com/checkout/abc123"
},
"checkoutUserErrors": []
}
}
}

JJohn Siciliano

I'm curious what you end up finding here and if you get it working. You should report back on your findings so we can all learn from it

I’ll be happy to do that!

So I think I stumbled over a first little problem that seems to be related to Shopify.

When I try to display a product image using a GraphQL query, I get a Shopify Error 403 Forbidden, which typically means the shop is flagged as fraudulent. However, the image URL from the query works perfectly fine and opens directly in the browser.

The problem arises when I bind the image URL with the Webstudio image component. The image doesn’t display. Upon inspecting the browser’s elements, I noticed that Webstudio adds a prefix to the image URL it fetches.

This modified URL doesn’t work—it’s not accessible even outside the builder, and I suspect this is causing the issue.

Does anyone know why this happens or how to work around it? Any insights on the technical details or a solution would be greatly appreciated. Thank you!

JJohn Siciliano

Try turning off optimize on the image and see if that helps. That'll just serve the raw URL

It can be that easy sometimes, thank you very much it works now!!

Is it possible to somehow access the local Storage from the backend (Data variables)?

So far I managed to create and populate product overview page, a collection overview, some category pages and the individual product pages.
Everything worked quite well for now with the backend GraquQL queries.

Now I am facing a problem with creating the cart page including the checkout.
When creating a cart in the shop, a cart ID will be created aswell as a checkout url. Both will then be safed in local storage to preserve the costumers cart.

To create a Query to get and display the current cart inside webstudio, it would be beneficial to access the current card ID from local storage in the variables section of the query. (I don’t know if this makes sense in a technical way)

This later would come in handy when connecting the checkout link to shopifys individual checkout URL saved in local storage as well.

I don’t know if there are better ways to store this data but all in all I think this really would make things easier. I feel like otherwise everything transfers into the front end, from all the queries to populating the card via javascript.

Would be great to hear your thoughts on this!

you can use local storage from client side javascript

and you can also pass data from the resource to the client side javascript by creating an expression

Plain Text

`<script>
const myVar = ${myResource.whatever};
</script>`

thank your for the quick response! And how exactly can I use the local storage in webstudio? In an expression? Or in which variable?
I try to use Resources/GraphQL as much as possible.

Local storage is a javascript API, webstudio has nothing to do with it. You can just use it from a script using html embed

Thank you, this was basicly my question. I just hoped it would somehow work the other way around.

So I want to post my last update on my attempt to integrate with the Shopify API for the time being.

As John already told, fetching all the products an collections went very well, and I quickly could create almost all essential pages like product overview or collection pages. Even the dynamic product pages were no problem.
After a bit of time, I managed to dynamicly add dynamic variant buttons for sizes, which contained the VariantID.

The problems started when creating the add to cart button.
For security reasons I think it would be best practice to manage the cart on the backend. This becomes problematic tho when trying to execute for example the createCart mutation when clicking the add to cart button, or checking for an existing cart and performing another mutation before creating a new one. If you then manage these things in the frontend, you can't access data like the cart ID or checkout Url (which then are saved in local storage or cookies) in the backend anymore.
So from there on, I feel like you have to code everything in java like fetching and populating the cart etc.
(Another problem would be that you can't access global variant from every page but this will be implemented as to my knowledge)

I think this feature would have a lot of potential, as for example the checkout it self is completly handled by shopify. This in general would fill in a huge gap because there are little to no possibilities to custome create a complete custom "no code" frontend connecting with shopify. Especially now before the visual Hydrogen builder is released.

I could be mistaken here with a lot of things, so if anybody of you have any ideas, suggestions or corrections please let me know.
Other than that I want to thank you for this awesome product and all the time you guys keep putting in the community.

why can't you manage the cart on the shopify backend with their api?

the cart is managed on the shopify api but to get or update the same cart on all the pages, the current cart ID (created with the first mutation) of the visitor is needed as a variable for all the queries and mutations.

so send visitor id along

I guess the problem is, that I need to only trigger a backend query with the click of the add to cart button so that there isn't a new cart automatically created for every visitor of the site. I don't know how this is possible.
I already managed to create a cart with cart ID and checkout Url in a script embed but I can't access this data from the backend.

I don't know if this problem is understandable

yeah, you can just have a form with tha cart hidden and submit it with js when necessary

Yes I might have to look into this, I just hoped I could display the cart with a simple collection and keep the js as little as possible and do the most with build in GraphQL

that's what I suggested as well

sohwing/hiding a container and submitting a form with js is each 1 line of code

Okey I don't know if I get this right, but in my understanding, I'm not even able to fetch the cart with the webstudio backend, as I can't dynamically create and then access the cart ID on every page or is this then possible with the form? Sorry for the missunderstanding

yeah, need ot try something out myself

This thread is very interesting!

sounds great! Please let me know

follow

Add a reply

Sign up and join the conversation on Discord

Connecting to Shopify:• I’ll use my store domain (e.g., my-shop.myshopify.com),• The latest API version (e.g., 2024-04), and• My public storefront access token.Here’s the client setup:","url":"https://help.webstudio.is/using-shopify-storefront-api-with-cdn-and-graphql-queries-V03SYcmt7hwQ","identifier":"V03SYcmt7hwQ","publisher":{"@type":"Organization","name":"Webstudio","logo":{"@type":"ImageObject","url":"https://assets.usehall.com/org_01JEYTC8WWMF7N46W9J4J7CFDP/c7f10f06-f934-4e35-b008-431a89254f9f.png"}},"comment":[{"@type":"Comment","text":"Querying Data with GraphQL:At this step, I’m not sure which of the following two methods would be better for implementing Shopify Storefront API queries in my Webstudio project: Using Webstudio’s Native GraphQL Input Field• I would directly interact with Shopify’s GraphQL endpoint: https://{store_name}.myshopify.com/api/2024-10/graphql.jsonor I could call client.request() to handle queries programmatically with less manual configuration.Integrating in Page Builder:My plan is to add this JavaScript code directly into the page builder’s body element to load the data dynamically, binding it to page elements using variables from the query result.My Questions: • Does this approach seem reasonable for a beginner? • Are there better or easier alternatives for this type of integration? • Are there security risks in exposing the public access token and making client-side requests with GraphQL?Thanks for your insights! I’m trying to ensure I don’t run into scalability or security issues later on. The help is much appreciated as this would solve a longe time problem for me! Thank you in advance.","dateCreated":"2024-11-22T21:42:36.427Z","dateModified":"2024-11-22T21:42:36.427Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","name":"jan6is","identifier":"cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","image":"https://cdn.discordapp.com/avatars/377482857926492161/a23f67e956bfcb9123e68e1370bcba4b.webp?size=256"},"commentCount":0,"comment":[],"position":1,"upvoteCount":0},{"@type":"Comment","text":"My sources where mainly these two:https://shopify.dev/docs/api/storefront#resourceshttps://github.com/Shopify/shopify-app-js/tree/main/packages/api-clients/storefront-api-client","dateCreated":"2024-11-22T21:43:32.680Z","dateModified":"2024-11-22T21:43:32.680Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","name":"jan6is","identifier":"cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","image":"https://cdn.discordapp.com/avatars/377482857926492161/a23f67e956bfcb9123e68e1370bcba4b.webp?size=256"},"commentCount":0,"comment":[],"position":2,"upvoteCount":0},{"@type":"Comment","text":"Hey! Here are my thoughtsDo as much with Resources as you can. You should be able to fetch all your products, categories, etc with Resources. This are done on the backend which makes it best for seo, performance, ux, security...What's missing right now to do this natively in webstudio is one or two things. 1. ability to create a shopping cart. You'll need custom JS to handle this. Maybe they provide something. 2. Idk what it takes to create a checkout session but you need to \"pass\" the cart to Shopify","dateCreated":"2024-11-22T21:55:12.388Z","dateModified":"2024-11-22T21:55:12.388Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a3a85f00-1132-4262-8176-1ff92ab9d883","name":"John Siciliano","identifier":"a3a85f00-1132-4262-8176-1ff92ab9d883","image":"https://cdn.discordapp.com/avatars/1141467296532009071/8c83067a661d2916bfb8be5a37677463.webp?size=256"},"commentCount":0,"comment":[],"position":3,"upvoteCount":0},{"@type":"Comment","text":"resources https://docs.webstudio.is/university/foundations/variables#resource","dateCreated":"2024-11-22T21:55:25.151Z","dateModified":"2024-11-22T21:55:25.151Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a3a85f00-1132-4262-8176-1ff92ab9d883","name":"John Siciliano","identifier":"a3a85f00-1132-4262-8176-1ff92ab9d883","image":"https://cdn.discordapp.com/avatars/1141467296532009071/8c83067a661d2916bfb8be5a37677463.webp?size=256"},"commentCount":0,"comment":[],"position":4,"upvoteCount":0},{"@type":"Comment","text":"also of type graphql https://docs.webstudio.is/university/foundations/variables#graphql","dateCreated":"2024-11-22T21:55:38.141Z","dateModified":"2024-11-22T21:55:38.141Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a3a85f00-1132-4262-8176-1ff92ab9d883","name":"John Siciliano","identifier":"a3a85f00-1132-4262-8176-1ff92ab9d883","image":"https://cdn.discordapp.com/avatars/1141467296532009071/8c83067a661d2916bfb8be5a37677463.webp?size=256"},"commentCount":0,"comment":[],"position":5,"upvoteCount":0},{"@type":"Comment","text":"Thank you very much for the quick response, I'm just dabbling around a little bit to see whats possible (with my limited knowledge)But I think you second point is somehow manageable mutations where the user gets redirected to the shopify hosted checkout page. (I don't know about the security in this approach)","dateCreated":"2024-11-22T22:05:47.577Z","dateModified":"2024-11-22T22:05:47.577Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","name":"jan6is","identifier":"cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","image":"https://cdn.discordapp.com/avatars/377482857926492161/a23f67e956bfcb9123e68e1370bcba4b.webp?size=256"},"commentCount":0,"comment":[],"position":6,"upvoteCount":0},{"@type":"Comment","text":"Something like this:mutation checkoutCreate($input: CheckoutCreateInput!) { checkoutCreate(input: $input) { checkout { id webUrl } checkoutUserErrors { code field message } }}Which then later redirects the user:{ \"data\": { \"checkoutCreate\": { \"checkout\": { \"id\": \"gid://shopify/Checkout/abc123\", \"webUrl\": \"https://{store_name}.myshopify.com/checkout/abc123\" }, \"checkoutUserErrors\": [] } }}","dateCreated":"2024-11-22T22:07:18.223Z","dateModified":"2024-11-22T22:07:18.223Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","name":"jan6is","identifier":"cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","image":"https://cdn.discordapp.com/avatars/377482857926492161/a23f67e956bfcb9123e68e1370bcba4b.webp?size=256"},"commentCount":0,"comment":[],"position":7,"upvoteCount":0},{"@type":"Comment","text":"I'm curious what you end up finding here and if you get it working. You should report back on your findings so we can all learn from it","dateCreated":"2024-11-22T22:13:59.086Z","dateModified":"2024-11-22T22:13:59.086Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a3a85f00-1132-4262-8176-1ff92ab9d883","name":"John Siciliano","identifier":"a3a85f00-1132-4262-8176-1ff92ab9d883","image":"https://cdn.discordapp.com/avatars/1141467296532009071/8c83067a661d2916bfb8be5a37677463.webp?size=256"},"commentCount":0,"comment":[],"position":8,"upvoteCount":0},{"@type":"Comment","text":"I’ll be happy to do that!","dateCreated":"2024-11-22T22:17:39.912Z","dateModified":"2024-11-22T22:17:39.912Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","name":"jan6is","identifier":"cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","image":"https://cdn.discordapp.com/avatars/377482857926492161/a23f67e956bfcb9123e68e1370bcba4b.webp?size=256"},"commentCount":0,"comment":[],"position":9,"upvoteCount":0},{"@type":"Comment","text":"So I think I stumbled over a first little problem that seems to be related to Shopify.When I try to display a product image using a GraphQL query, I get a Shopify Error 403 Forbidden, which typically means the shop is flagged as fraudulent. However, the image URL from the query works perfectly fine and opens directly in the browser.The problem arises when I bind the image URL with the Webstudio image component. The image doesn’t display. Upon inspecting the browser’s elements, I noticed that Webstudio adds a prefix to the image URL it fetches.This modified URL doesn’t work—it’s not accessible even outside the builder, and I suspect this is causing the issue.Does anyone know why this happens or how to work around it? Any insights on the technical details or a solution would be greatly appreciated. Thank you!","dateCreated":"2024-11-24T22:28:44.432Z","dateModified":"2024-11-24T22:28:44.432Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","name":"jan6is","identifier":"cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","image":"https://cdn.discordapp.com/avatars/377482857926492161/a23f67e956bfcb9123e68e1370bcba4b.webp?size=256"},"commentCount":0,"comment":[],"position":10,"upvoteCount":0},{"@type":"Comment","text":"Try turning off optimize on the image and see if that helps. That'll just serve the raw URL","dateCreated":"2024-11-25T00:46:11.477Z","dateModified":"2024-11-25T00:46:11.477Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/a3a85f00-1132-4262-8176-1ff92ab9d883","name":"John Siciliano","identifier":"a3a85f00-1132-4262-8176-1ff92ab9d883","image":"https://cdn.discordapp.com/avatars/1141467296532009071/8c83067a661d2916bfb8be5a37677463.webp?size=256"},"commentCount":0,"comment":[],"position":11,"upvoteCount":0},{"@type":"Comment","text":"It can be that easy sometimes, thank you very much it works now!!","dateCreated":"2024-11-25T06:54:41.726Z","dateModified":"2024-11-25T06:54:41.726Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","name":"jan6is","identifier":"cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","image":"https://cdn.discordapp.com/avatars/377482857926492161/a23f67e956bfcb9123e68e1370bcba4b.webp?size=256"},"commentCount":0,"comment":[],"position":12,"upvoteCount":0},{"@type":"Comment","text":"Is it possible to somehow access the local Storage from the backend (Data variables)?So far I managed to create and populate product overview page, a collection overview, some category pages and the individual product pages. Everything worked quite well for now with the backend GraquQL queries. Now I am facing a problem with creating the cart page including the checkout.When creating a cart in the shop, a cart ID will be created aswell as a checkout url. Both will then be safed in local storage to preserve the costumers cart. To create a Query to get and display the current cart inside webstudio, it would be beneficial to access the current card ID from local storage in the variables section of the query. (I don’t know if this makes sense in a technical way)This later would come in handy when connecting the checkout link to shopifys individual checkout URL saved in local storage as well. I don’t know if there are better ways to store this data but all in all I think this really would make things easier. I feel like otherwise everything transfers into the front end, from all the queries to populating the card via javascript. Would be great to hear your thoughts on this!","dateCreated":"2024-12-03T13:17:21.370Z","dateModified":"2024-12-03T13:17:21.370Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","name":"jan6is","identifier":"cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","image":"https://cdn.discordapp.com/avatars/377482857926492161/a23f67e956bfcb9123e68e1370bcba4b.webp?size=256"},"commentCount":0,"comment":[],"position":13,"upvoteCount":0},{"@type":"Comment","text":"you can use local storage from client side javascript","dateCreated":"2024-12-03T13:38:00.194Z","dateModified":"2024-12-03T13:38:00.194Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":14,"upvoteCount":0},{"@type":"Comment","text":"and you can also pass data from the resource to the client side javascript by creating an expression ``","dateCreated":"2024-12-03T13:38:49.936Z","dateModified":"2024-12-03T13:38:49.936Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":15,"upvoteCount":0},{"@type":"Comment","text":"thank your for the quick response! And how exactly can I use the local storage in webstudio? In an expression? Or in which variable? I try to use Resources/GraphQL as much as possible.","dateCreated":"2024-12-03T15:39:27.199Z","dateModified":"2024-12-03T15:39:27.199Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","name":"jan6is","identifier":"cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","image":"https://cdn.discordapp.com/avatars/377482857926492161/a23f67e956bfcb9123e68e1370bcba4b.webp?size=256"},"commentCount":0,"comment":[],"position":16,"upvoteCount":0},{"@type":"Comment","text":"Local storage is a javascript API, webstudio has nothing to do with it. You can just use it from a script using html embed","dateCreated":"2024-12-03T15:57:20.867Z","dateModified":"2024-12-03T15:57:20.867Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":17,"upvoteCount":0},{"@type":"Comment","text":"Thank you, this was basicly my question. I just hoped it would somehow work the other way around.","dateCreated":"2024-12-03T16:40:30.245Z","dateModified":"2024-12-03T16:40:30.245Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","name":"jan6is","identifier":"cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","image":"https://cdn.discordapp.com/avatars/377482857926492161/a23f67e956bfcb9123e68e1370bcba4b.webp?size=256"},"commentCount":0,"comment":[],"position":18,"upvoteCount":0},{"@type":"Comment","text":"So I want to post my last update on my attempt to integrate with the Shopify API for the time being.As John already told, fetching all the products an collections went very well, and I quickly could create almost all essential pages like product overview or collection pages. Even the dynamic product pages were no problem. After a bit of time, I managed to dynamicly add dynamic variant buttons for sizes, which contained the VariantID.The problems started when creating the add to cart button. For security reasons I think it would be best practice to manage the cart on the backend. This becomes problematic tho when trying to execute for example the createCart mutation when clicking the add to cart button, or checking for an existing cart and performing another mutation before creating a new one. If you then manage these things in the frontend, you can't access data like the cart ID or checkout Url (which then are saved in local storage or cookies) in the backend anymore. So from there on, I feel like you have to code everything in java like fetching and populating the cart etc. (Another problem would be that you can't access global variant from every page but this will be implemented as to my knowledge)I think this feature would have a lot of potential, as for example the checkout it self is completly handled by shopify. This in general would fill in a huge gap because there are little to no possibilities to custome create a complete custom \"no code\" frontend connecting with shopify. Especially now before the visual Hydrogen builder is released. I could be mistaken here with a lot of things, so if anybody of you have any ideas, suggestions or corrections please let me know. Other than that I want to thank you for this awesome product and all the time you guys keep putting in the community.","dateCreated":"2024-12-09T20:40:54.227Z","dateModified":"2024-12-09T20:40:54.227Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","name":"jan6is","identifier":"cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","image":"https://cdn.discordapp.com/avatars/377482857926492161/a23f67e956bfcb9123e68e1370bcba4b.webp?size=256"},"commentCount":0,"comment":[],"position":19,"upvoteCount":0},{"@type":"Comment","text":"why can't you manage the cart on the shopify backend with their api?","dateCreated":"2024-12-09T20:42:49.982Z","dateModified":"2024-12-09T20:42:49.982Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":20,"upvoteCount":0},{"@type":"Comment","text":"the cart is managed on the shopify api but to get or update the same cart on all the pages, the current cart ID (created with the first mutation) of the visitor is needed as a variable for all the queries and mutations.","dateCreated":"2024-12-09T22:51:03.596Z","dateModified":"2024-12-09T22:51:03.596Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","name":"jan6is","identifier":"cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","image":"https://cdn.discordapp.com/avatars/377482857926492161/a23f67e956bfcb9123e68e1370bcba4b.webp?size=256"},"commentCount":0,"comment":[],"position":21,"upvoteCount":0},{"@type":"Comment","text":"so send visitor id along","dateCreated":"2024-12-09T22:57:23.921Z","dateModified":"2024-12-09T22:57:23.921Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":22,"upvoteCount":0},{"@type":"Comment","text":"I guess the problem is, that I need to only trigger a backend query with the click of the add to cart button so that there isn't a new cart automatically created for every visitor of the site. I don't know how this is possible.I already managed to create a cart with cart ID and checkout Url in a script embed but I can't access this data from the backend.","dateCreated":"2024-12-09T23:03:45.121Z","dateModified":"2024-12-09T23:03:45.121Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","name":"jan6is","identifier":"cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","image":"https://cdn.discordapp.com/avatars/377482857926492161/a23f67e956bfcb9123e68e1370bcba4b.webp?size=256"},"commentCount":0,"comment":[],"position":23,"upvoteCount":0},{"@type":"Comment","text":"I don't know if this problem is understandable","dateCreated":"2024-12-09T23:04:05.042Z","dateModified":"2024-12-09T23:04:05.042Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","name":"jan6is","identifier":"cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","image":"https://cdn.discordapp.com/avatars/377482857926492161/a23f67e956bfcb9123e68e1370bcba4b.webp?size=256"},"commentCount":0,"comment":[],"position":24,"upvoteCount":0},{"@type":"Comment","text":"yeah, you can just have a form with tha cart hidden and submit it with js when necessary","dateCreated":"2024-12-09T23:04:36.142Z","dateModified":"2024-12-09T23:04:36.142Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":25,"upvoteCount":0},{"@type":"Comment","text":"Yes I might have to look into this, I just hoped I could display the cart with a simple collection and keep the js as little as possible and do the most with build in GraphQL","dateCreated":"2024-12-09T23:07:30.882Z","dateModified":"2024-12-09T23:07:30.882Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","name":"jan6is","identifier":"cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","image":"https://cdn.discordapp.com/avatars/377482857926492161/a23f67e956bfcb9123e68e1370bcba4b.webp?size=256"},"commentCount":0,"comment":[],"position":26,"upvoteCount":0},{"@type":"Comment","text":"that's what I suggested as well","dateCreated":"2024-12-09T23:08:01.744Z","dateModified":"2024-12-09T23:08:01.744Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":27,"upvoteCount":0},{"@type":"Comment","text":"sohwing/hiding a container and submitting a form with js is each 1 line of code","dateCreated":"2024-12-09T23:08:17.425Z","dateModified":"2024-12-09T23:08:17.425Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":28,"upvoteCount":0},{"@type":"Comment","text":"Okey I don't know if I get this right, but in my understanding, I'm not even able to fetch the cart with the webstudio backend, as I can't dynamically create and then access the cart ID on every page or is this then possible with the form? Sorry for the missunderstanding","dateCreated":"2024-12-09T23:15:04.336Z","dateModified":"2024-12-09T23:15:04.336Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","name":"jan6is","identifier":"cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","image":"https://cdn.discordapp.com/avatars/377482857926492161/a23f67e956bfcb9123e68e1370bcba4b.webp?size=256"},"commentCount":0,"comment":[],"position":29,"upvoteCount":0},{"@type":"Comment","text":"yeah, need ot try something out myself","dateCreated":"2024-12-09T23:28:19.869Z","dateModified":"2024-12-09T23:28:19.869Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":30,"upvoteCount":0},{"@type":"Comment","text":"This thread is very interesting!","dateCreated":"2024-12-10T01:35:05.641Z","dateModified":"2024-12-10T01:35:05.641Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/34a8fc01-bd6d-463a-966c-009975ea5998","name":"Fe_Rojas","identifier":"34a8fc01-bd6d-463a-966c-009975ea5998","image":"https://cdn.discordapp.com/embed/avatars/5.png"},"commentCount":0,"comment":[],"position":31,"upvoteCount":0},{"@type":"Comment","text":"sounds great! Please let me know","dateCreated":"2024-12-10T07:47:21.285Z","dateModified":"2024-12-10T07:47:21.285Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","name":"jan6is","identifier":"cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","image":"https://cdn.discordapp.com/avatars/377482857926492161/a23f67e956bfcb9123e68e1370bcba4b.webp?size=256"},"commentCount":0,"comment":[],"position":32,"upvoteCount":0},{"@type":"Comment","text":"follow","dateCreated":"2024-12-12T09:16:21.930Z","dateModified":"2024-12-12T09:16:21.930Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/4d1dce3b-8aec-498a-91e5-a0a42dcdc99f","name":"szilardm8","identifier":"4d1dce3b-8aec-498a-91e5-a0a42dcdc99f","image":"https://cdn.discordapp.com/avatars/823529761796128801/c56606b732f58bd3422c332b7d15d2e4.webp?size=256"},"commentCount":0,"comment":[],"position":33,"upvoteCount":0}],"author":{"@type":"Person","url":"https://help.webstudio.is/members/cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","name":"jan6is","identifier":"cf1a8bec-1d8a-457c-afb9-b149bc7cb3fe","image":"https://cdn.discordapp.com/avatars/377482857926492161/a23f67e956bfcb9123e68e1370bcba4b.webp?size=256"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0}}]