# Add vendor below title in product box

**URL:** <https://forum.builder.io/t/add-vendor-below-title-in-product-box/7097>\
**Category:** Shopify\
**Tags:** visual-editor, shopify\
**Created:** [January 6, 2025, 4:14pm UTC](https://forum.builder.io/t/add-vendor-below-title-in-product-box/7097 "2025-01-06T16:14:42Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ecommfox](https://avatars.discourse-cdn.com/v4/letter/e/e9c0ed/32.png) [@Ecommfox](https://forum.builder.io/u/Ecommfox)\
**Post date:** [January 6, 2025, 4:14pm UTC](https://forum.builder.io/t/add-vendor-below-title-in-product-box/7097/1 "2025-01-06T16:14:42Z")

</div>

Hello, I’ve created a shopify products slider here which pulls items from a specific collection ; but I need to add vendor under the title and this component is unfortuanelty unavailable . Is there a way to add this component to the productInfo state.

I’ve been trying multiple thing including sending a new query for the productInfo query and calling the function in binding data but I only get a Promise Objects.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/8/86e2dd52b0e0eadc197b40043b465dfe3b18d7f3.png)

```auto
async function fetchProductData(handle) {
  const apiKey = "your-shopify-storefront-access-token"; // Replace with your actual token

  const response = await fetch("https://your-shop.myshopify.com/api/2023-10/graphql.json", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-Shopify-Storefront-Access-Token": apiKey,
    },
    body: JSON.stringify({
      query: `
        query getProductByHandle($handle: String!) {
          productByHandle(handle: $handle) {
            vendor
            title
          }
        }
      `,
      variables: { handle },
    }),
  });

  if (!response.ok) {
    console.error("Error fetching data:", response.statusText);
    return null;
  }

  const result = await response.json();
  return result.data.productByHandle;
}

// Attach the function to the `window` object for global access
window.fetchProductData = fetchProductData;

```

```auto
window.fetchProductData(state.product.handle).then((data) => {
  if (data) {
    state.vendor = data.vendor; // Update state
    state.title = data.title; // Update state
  }
});

// Return a placeholder or the current state
return state.vendor || "Loading...";

```

Would really appreciate to know if this possible to do, and how to proceed? Thank you.  
Best regards

Joiakim

> **[Builder.io: Visual Development Platform](https://builder.io/content/aa9a4a4f80cb43ad99528237e17bae42/edit?activeDesignerTab=5&selectedBlock=builder-18d2abbb8fc6469eaec212a719cff16e)**
>
> Builder is the only Visual Development Platform that offers an AI-powered design-to-code tool, a visual editor and an enterprise CMS.

---

<div class="post-metadata">

**Author:** ![Ecommfox](https://avatars.discourse-cdn.com/v4/letter/e/e9c0ed/32.png) [@Ecommfox](https://forum.builder.io/u/Ecommfox)\
**Post date:** [January 7, 2025, 9:06am UTC](https://forum.builder.io/t/add-vendor-below-title-in-product-box/7097/2 "2025-01-07T09:06:13Z")

</div>

Hello , Any help here ?

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [January 8, 2025, 10:59am UTC](https://forum.builder.io/t/add-vendor-below-title-in-product-box/7097/3 "2025-01-08T10:59:10Z")

</div>

Hi @Ecommfox,

At the moment, there isn’t a direct way to add the vendor to the product box. Your approach of using the Shopify Storefront API to retrieve vendor info is correct. However, I suspect the issue may lie in the `X-Shopify-Storefront-Access-Token` you’re using. The `state.apiKey` is returning the [Builder.io](http://Builder.io) API key, not the Shopify Storefront access token, which could be causing the issue.

Make sure you’re using the correct token for the Shopify Storefront API, and that should resolve the issue.

```
fetch('https://your-shopify-store.myshopify.com/api/2023-01/graphql.json', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-Shopify-Storefront-Access-Token': state.apiKey,
    },
    body: JSON.stringify({
        query,
        variables: { id: `gid://shopify/Product/${productId}` },
    }),
})

```

Here is the code for collection grid if it helps

```auto

    if (Builder.isBrowser) {
        const shopifyWindow = window;
        if (shopifyWindow.BuilderJsonData && shopifyWindow.BuilderJsonData.collection) {
            context.overrideCollectionId = shopifyWindow.BuilderJsonData.collection.id;
            context.collectionObject = shopifyWindow.BuilderJsonData.collection;
        }
    }

    const getCollectionId = () => {
        const contextPlaceholder = 'context_placeholder';
        if (state.collection === contextPlaceholder) {
            return context.overrideCollectionId;
        }
        let collection = state.collection;
        if (typeof collection === 'object' &&
            collection &&
            collection['@type'] === '@builder.io/core:Request') {
            collection = collection.options.collection;
        }
        return collection;
    };
    let lastCollectionId = getCollectionId();
    let lastLimit = 10;
    let lastHideIfUnavailable = state.hideIfUnavailable || false;
    if (Builder.isEditing) {
        ref.onStateChange.subscribe(() => {
            const newId = getCollectionId();
            if (lastCollectionId !== newId ||
                lastLimit !== state.limit ||
                lastHideIfUnavailable !== state.hideIfUnavailable) {
                updateCollection();
                lastCollectionId = newId;
                lastHideIfUnavailable = state.hideIfUnavailable;
            }
        });
    }
    function updateCollection() {
        const collectionId = getCollectionId();
        if (state.collectionInfo && !collectionId) {
            return;
        }
        if (collectionId) {
            state.loading = true;
            lastLimit = state.limit ? state.limit : 10;
            fetch(`https://cdn.builder.io/api/v1/shopify/product-box-data?apiKey=${state.apiKey || context.apiKey || builder.apiKey}&collectionId=${collectionId}&limit=${state.limit ? state.limit : 10}`)
                .then(res => res.json())
                .then(data => {
                const collectionResponse = data;
                if (state.hideIfUnavailable) {
                    const availableProducts = collectionResponse.products.filter((product) => product.variants.some(variant => variant.availableForSale));
                    collectionResponse.products = availableProducts;
                }
                state.collectionInfo = collectionResponse;
                state.loading = false;
            })
                .catch(err => {
                console.error('Error fetching Shopify product', err);
                state.loading = false;
            });
        }
        else {
            state.collectionInfo = null;
        }
    }
    updateCollection();

```

---

<div class="post-metadata">

**Author:** ![Ecommfox](https://avatars.discourse-cdn.com/v4/letter/e/e9c0ed/32.png) [@Ecommfox](https://forum.builder.io/u/Ecommfox)\
**Post date:** [January 8, 2025, 8:16pm UTC](https://forum.builder.io/t/add-vendor-below-title-in-product-box/7097/4 "2025-01-08T20:16:04Z")

</div>

Thank you @manish-sharma, since we’re integrating to a store on which we’ve installed the app , I assumed an API key was generated and tried to fecth it using state.apiKey, If we can’t retrieve it I suppose we have to create a new private app is that correct ? … How does it work if I want to create new components based on the same data ?

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [January 16, 2025, 12:13pm UTC](https://forum.builder.io/t/add-vendor-below-title-in-product-box/7097/5 "2025-01-16T12:13:59Z")

</div>

Hello @Ecommfox,

Yes, if you plan to use the GraphQL Storefront API, you will need to create a private app, generate an **X-Shopify-Storefront-Access-Token** , and then use that token to call the Storefront API in order to retrieve product data with vendor details.

> **[Storefront API reference](https://shopify.dev/docs/api/storefront)**
>
> The Storefront API provides commerce primitives to build custom, scalable, and performant shopping experiences. Learn how to get started using efficient GraphQL queries.

To create a new component based on same data you may want to refer to our NextJs + Shopify example

> <https://github.com/BuilderIO/nextjs-shopify/blob/master/components/common/ProductCard.tsx>

Let me know if you need further clarification!

Thanks,