Need Help Configuring Shopify Data with Machine Learning Application Using Builder.io

General
1

Hello everyone,

I’m currently working on a project where I need to integrate Shopify data with a machine learning-based application. I’m using Builder.io for the frontend development, and I’m running into some challenges with the data configuration part.

Here’s a bit detail about what I’m trying to achieve:

Shopify Data Integration: I need to pull data from my Shopify store, such as product information, customer details, and order history.

Problem I am facing-

I’m unsure about the best way to fetch and sync Shopify data in real-time with my machine learning model.

I’m having difficulty configuring the data in a way that Builder.io can easily access and display the processed results.

When I was searching about this, I came across these resource- Shopify data not. connecting what is machine learning, and as per them, I’ve looked into Shopify’s APIs, but I’m still a bit confused about how to set up the data pipelines. Experimented with some plugins and integrations in Builder.io, but haven’t found a robust solution yet.

I’d really appreciate any suggestions, tips, or resources that you can share.

Thanks in advance for your help!

2

Hi @felicityhughes,

To integrate Shopify data with your Builder.io frontend and a machine learning-based application, you need to establish a robust data pipeline. This pipeline should fetch and sync Shopify data in real-time, transform it as needed for your ML model, and then display the processed results using Builder.io. Here are the steps to set up and achieve this:

Create a middleware service (Node.js, Python, etc.) that periodically fetches data from Shopify and sends it to your machine learning pipeline. This can be done by setting up a cron job or using tools like AWS Lambda or Google Cloud Functions for automating data fetching.

Processing with Machine Learning

Your ML model should be integrated into this middleware service to process the data. Ensure the processed data is saved in a database or storage service from where Builder.io can access it.

Creating Data Models in Builder.io

  1. Create a data model in Builder.io for each type of Shopify data you plan to use:

    • Products
    • Customers
    • Orders

  2. Add necessary custom fields to store the processed data.

Example: Creating a Product Data Model

  1. In the Builder.io UI, go to Models.
  2. Click +Create Model and select Data.
  3. Name it product.
  4. Add fields like title, description, price, etc.

Display Processed Data in Builder.io

Fetching Data in Next.js

Integrate the processed data from your database in the Next.js app where you are using Builder.io.

import { builder } from "@builder.io/sdk";

// Replace with your Public API Key
builder.init('YOUR_BUILDER_IO_API_KEY');

export default async function Page() {
  const products = await fetchProcessedProducts(); // Your function to fetch processed data
  return (
    <div>
      {products.map((product) => (
        <div key={product.id}>
          <h2>{product.title}</h2>
          <p>{product.description}</p>
        </div>
      ))}
    </div>
  );
}

Using Builder Components

If you have integrated Builder.io sections or pages:

import { RenderBuilderContent } from "@/components/builder";
import { builder } from "@builder.io/sdk";

builder.init('YOUR_API_KEY');

export default function ProductPage(props) {
  const products = props.products;

  return (
    <>
      {products.map(product => (
        <RenderBuilderContent
          model="product"
          content={product}
          key={product.id}
        />
      ))}
    </>
  );
}

export async function getStaticProps() {
  const products = await fetchProcessedProducts(); // Your function to fetch processed data
  return {
    props: {
      products
    }
  };
}

In this way, non-developer teammates can easily create and update product pages in Builder.io, while the data stays in sync with Shopify and is processed by your machine-learning model.

Tools for Automation

  • Cloud Functions: Use AWS Lambda, Google Cloud Functions, or Azure Functions to automate data fetching and processing.
  • Cron Jobs: Set up cron jobs to periodically fetch data from Shopify and invoke your ML pipeline.
  • Builder.io Webhooks: Use webhooks to trigger updates when there are changes in your Builder models or data entries.

Best regards,

1 Like
3

Perfect brother, thanks for the solution.

Let me try this.

4

Hi,

I just made few additional changes following your reference and it’s working perfectly. Thanks for the solution.