Here is how you build a front page using storefront-api-client

example-shopify-frui-frontend.tsx

import React, { useEffect, useState } from 'react';
import 'frui/frui.css'; // Essential for Frui styling

const HomePage = () => {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchProducts = async () => {
      const query = `
        query getProducts {
          products(first: 6) {
            edges {
              node {
                id
                title
                handle
                variants(first: 1) { edges { node { price { amount currencyCode } } } }
                images(first: 1) { edges { node { url altText } } }
              }
            }
          }
        }`;
      
      const { data } = await client.request(query);
      setProducts(data.products.edges);
      setLoading(false);
    };
    fetchProducts();
  }, []);

  return (
    <div className="f-p-6 f-bg-slate-50 f-min-h-screen">
      {/* Hero Section using Frui classes */}
      <header className="f-text-center f-py-12 f-bg-white f-rounded-xl f-shadow-sm f-mb-10">
        <h1 className="f-text-5xl f-font-black f-tracking-tight">2026 Summer Collection</h1>
        <p className="f-text-slate-500 f-mt-4">Powered by Shopify Storefront API & Frui UI</p>
      </header>

      {/* Modern Product Grid */}
      <div className="f-grid f-grid-cols-1 md:f-grid-cols-3 f-gap-8 f-container f-mx-auto">
        {loading ? (
          <p className="f-text-center f-col-span-full">Syncing with Storefront...</p>
        ) : (
          products.map(({ node }) => (
            <div key={node.id} className="f-card f-bg-white f-border-none f-shadow-lg f-transition-transform hover:f-scale-105">
              <div className="f-aspect-square f-overflow-hidden f-rounded-t-lg">
                <img 
                  src={node.images.edges[0]?.node.url} 
                  alt={node.title} 
                  className="f-w-full f-h-full f-object-cover"
                />
              </div>
              <div className="f-p-5">
                <h3 className="f-text-lg f-font-bold">{node.title}</h3>
                <p className="f-text-indigo-600 f-font-medium f-mt-1">
                  {node.variants.edges[0].node.price.amount} {node.variants.edges[0].node.price.currencyCode}
                </p>
                <button className="f-btn f-btn-primary f-w-full f-mt-4">
                  Add to Cart
                </button>
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );
};

use-create-store-front-example.js

// make sure to use only your public access token:

// Public access tokens are used for client-side requests and allow third-party apps to interact with Shopify's APIs. 
// They are generated through the Shopify Admin API and are not intended for server-side use. 

import { createStorefrontApiClient } from '@shopify/storefront-api-client';

const client = createStorefrontApiClient({
  storeDomain: 'your-shop.myshopify.com',
  apiVersion: '2026-04', // Using the current stable version
  publicAccessToken: 'your_token_here',
});