# Query shopify cart contents

**URL:** <https://forum.builder.io/t/query-shopify-cart-contents/2283>\
**Category:** Shopify\
**Tags:** shopify\
**Created:** [June 17, 2022, 5:01pm UTC](https://forum.builder.io/t/query-shopify-cart-contents/2283 "2022-06-17T17:01:10Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![yael-montufar](https://avatars.discourse-cdn.com/v4/letter/y/a5b964/32.png) [@yael-montufar](https://forum.builder.io/u/yael-montufar)\
**Post date:** [June 17, 2022, 5:01pm UTC](https://forum.builder.io/t/query-shopify-cart-contents/2283/1 "2022-06-17T17:01:10Z")

</div>

Hi there 👋

Is there a way to query the cart contents and extract data to use elsewhere on my page.

This is the flow I’m trying to achieve:  
A user selects a product card → cart is cleared & selected product is added to cart → fixed bottom bar displays cart total + generates a dynamic checkout link based on cart contents.

 ![Screen Shot 2022-06-17 at 12.59.35 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/a/a827064cc0e9d9b242b16c9d52e485ab0eb0c2a6.png)

Any help is greatly appreciated!

---

<div class="post-metadata">

**Author:** ![sarah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/sarah/32/1198_2.png) [@sarah](https://forum.builder.io/u/sarah)\
**Post date:** [June 17, 2022, 7:18pm UTC](https://forum.builder.io/t/query-shopify-cart-contents/2283/2 "2022-06-17T19:18:40Z")

</div>

Hi @yael-montufar, you can access the Shopify cart object with some custom code.

1. First, open up the options tab in the editor and click the “Show Advanced” button. Then select the “Edit Bootstrap Code” button. This will open up a code editor, which will look different depending on the type of content you are editing.

2. If the code editor is blank you can copy and paste all of the code below. If you can already see the first line of code in the editor, you can skip that and just add the second line.

```auto
window.BuilderJsonData = window.BuilderJsonData || {};
window.BuilderJsonData.cart = {{ cart | json }};

```

1. Close that code editor and switch to the data tab. Click the “Edit Content CSS + JS” button. Inside the `if (Builder.isBrowser)` statement, add the code below:

```auto
const shopifyWindow = window as any;
if (shopifyWindow.BuilderJsonData) {
  state.cart = shopifyWindow.BuilderJsonData.cart;
}

```

Now you should be able to access the cart object from `state.cart`

---

<div class="post-metadata">

**Author:** ![yael-montufar](https://avatars.discourse-cdn.com/v4/letter/y/a5b964/32.png) [@yael-montufar](https://forum.builder.io/u/yael-montufar)\
**Post date:** [June 17, 2022, 7:36pm UTC](https://forum.builder.io/t/query-shopify-cart-contents/2283/3 "2022-06-17T19:36:36Z")

</div>

Hi, thank you for replying to my question. I have placed a block on my page, selected it, opened the [Options] tab and expanded [Show Advanced] but I am not seeing an “Edit Bootstrap Code” button/option anywhere.  
I am only seeing “Replace nodes” toggle & “Scripts client only” options.

---

<div class="post-metadata">

**Author:** ![yael-montufar](https://avatars.discourse-cdn.com/v4/letter/y/a5b964/32.png) [@yael-montufar](https://forum.builder.io/u/yael-montufar)\
**Post date:** [June 17, 2022, 7:43pm UTC](https://forum.builder.io/t/query-shopify-cart-contents/2283/4 "2022-06-17T19:43:25Z")

</div>

Ok, I found the option. I was looking at the “Show Advanced” under the **Element** options but it was in the **Page field** options.  
Thanks again

---

<div class="post-metadata">

**Author:** ![yael-montufar](https://avatars.discourse-cdn.com/v4/letter/y/a5b964/32.png) [@yael-montufar](https://forum.builder.io/u/yael-montufar)\
**Post date:** [June 17, 2022, 10:08pm UTC](https://forum.builder.io/t/query-shopify-cart-contents/2283/5 "2022-06-17T22:08:38Z")

</div>

Hey, I followed the steps provided and am still having trouble accessing the cart.  
Also I am getting this error on the editor: ![Screen Shot 2022-06-17 at 4.59.58 PM.png](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/f/ffbd457b13d5da342864844adb045a86aa528d73.png)

---

<div class="post-metadata">

**Author:** ![sarah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/sarah/32/1198_2.png) [@sarah](https://forum.builder.io/u/sarah)\
**Post date:** [June 21, 2022, 6:18pm UTC](https://forum.builder.io/t/query-shopify-cart-contents/2283/6 "2022-06-21T18:18:25Z")

</div>

Hi @yael-montufar, you will have to test this on a live page to be able to access Shopify data this way, so this won’t work in your live preview or in the editor.

---

<div class="post-metadata">

**Author:** ![sarah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/sarah/32/1198_2.png) [@sarah](https://forum.builder.io/u/sarah)\
**Post date:** [June 23, 2022, 6:47pm UTC](https://forum.builder.io/t/query-shopify-cart-contents/2283/7 "2022-06-23T18:47:27Z")

</div>

HI @yael-montufar, were you able to get this working? To clarify, you can access the cart object from `state.cart`, so if you wanted to show the total cart item count for example you could add an element binding to a text block to bind it to `state.cart.item_count`. Or to access the array of items in the cart, you can access `state.cart.items`.