Connecting Shopify Headless Commerce
Jewellic is engineered as a decoupled, headless storefront. Catalog browsing, option selection, engraving customization, and cart state are managed in custom React code, while product management, inventory, and PCI-DSS compliant checkout are powered by Shopify.
Log into your Shopify Admin panel at admin.shopify.com. Navigate to Sales Channels → Search “Headless” (by Shopify) and add it to your store.
Under your new Headless channel, click Create Storefront. Give it a name (e.g. “Jewellic Production Web”). Enable the following Storefront API permissions:
- Read products, variants, and collections
- Read and modify checkout / carts
- Read and modify customer accounts
Copy the public Storefront Access Token generated by Shopify.
Create or edit .env.local in your project root or your hosting provider's environment dashboard (e.g. Vercel):
Once credentials are saved and the application restarts:
- The “Development Storefront Mode” banner at the top will automatically dismiss.
- Products in your Shopify catalog will populate the shop, search, and category grids.
- Clicking “Proceed to Checkout” will create a real Shopify cart with selected metal/gemstone variants and custom laser engravings passed as line item attributes, cleanly redirecting the customer to Shopify's checkout page.
Ready to Return to Storefront?
Browse the live shop experience and test customization features.