How to Pull Shopify Product Data into an External index.HTML File

Shopify is a popular e-commerce platform that allows businesses to create and manage their online stores. One of the key features of Shopify is the ability to access and manipulate product data. In this article, we will explore how to pull Shopify product data into an external index.HTML file, enabling you to display and utilize this information in a custom way.

Step 1: Set Up a Private App in Shopify

In order to access Shopify's product data, we need to create a private app in your Shopify store. Follow these steps:

Log in to your Shopify admin panel.
Navigate to "Apps" in the sidebar.
Scroll down and click on "Manage private apps."
Click on "Create a new private app."
Provide a name for your private app and enter your email address.
Under "Admin API," enable the "Read access" for "Products."
Click on "Save."
Make note of the "API Key" and "Password" as we will need them later.

Step 2: Create an index.HTML File

Now, let's create an index.HTML file where we will pull and display the Shopify product data. Here's a basic structure for the file:

<!DOCTYPE html>
<html>
<head>
  <title>Shopify Product Data</title>
</head>
<body>
  <div id="product-container"></div>
  
  <script src="script.js"></script>
</body>
</html>

In the above structure, we have an empty <div> element with the ID "product-container" where we will dynamically populate the product data using JavaScript.

Step 3: Create a JavaScript File

We need to create a JavaScript file, named "script.js" in this example, to fetch the product data from Shopify and populate the HTML. Here's an example code snippet:

const container = document.getElementById('product-container');

fetch('https://your-shopify-store.myshopify.com/api/2021-04/graphql.json', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-Shopify-Storefront-Access-Token': 'YOUR_ACCESS_TOKEN',
  },
  body: JSON.stringify({
    query: `
      query {
        products(first: 10) {
          edges {
            node {
              title
              priceRange {
                minVariantPrice {
                  amount
                }
              }
              images(first: 1) {
                edges {
                  node {
                    originalSrc
                  }
                }
              }
            }
          }
        }
      }
    `,
  }),
})
  .then(response => response.json())
  .then(data => {
    const products = data.data.products.edges;
    products.forEach(product => {
      const { title, priceRange, images } = product.node;
      const html = `
        <div>
          <img src="${images.edges[0].node.originalSrc}" alt="${title}">
          <h3>${title}</h3>
          <p>$${priceRange.minVariantPrice.amount}</p>
        </div>
      `;
      container.innerHTML += html;
    });
  });

In the above code, make sure to replace 'YOUR_ACCESS_TOKEN' with the API password obtained from the private app you created in Step 1. This JavaScript code uses the Shopify GraphQL API to fetch the product data and dynamically generates HTML elements for each product, including the title, image, and price.

Step 4: Upload Files and Test

Now that we have our index.HTML file and script.js file ready, let's upload them to your web server or hosting provider. Once uploaded, open the index.HTML file in a web browser, and you should see the product data fetched from your Shopify store displayed on the page.

Conclusion

By following these steps, you can easily pull Shopify product data into an external index.HTML file using JavaScript and the Shopify API. This allows you to have more control over how you display and utilize your product information on your website or any other custom application.

References

Source	Link
Shopify API Documentation	https://shopify.dev/docs/admin-api/rest/reference
Shopify GraphQL API Documentation	https://shopify.dev/docs/admin-api/graphql/reference

How to Pull Shopify Product Data into an External index.HTML File