What This Article Covers
This guide explains what Shopify Headless is and how it works with Digioh. It covers implementation considerations and common questions when running Digioh on headless Shopify storefronts. Digioh is able to successfully support Shopify Headless stores with a few considerations.
What is Shopify Headless?
Shopify Headless refers to an architecture where Shopify is used only as the backend commerce engine, while the frontend website is built using a separate technology stack.
In a traditional Shopify setup, the frontend and backend are tightly coupled through Shopify themes (typically built with Liquid). In a headless setup, these layers are separated.
Shopify handles:
- Product catalog
- Checkout
- Orders
- Inventory
- Customer data
A separate frontend handles:
- Website design
- Page rendering
- Customer experience
- Interactive functionality
Developers retrieve data from Shopify using APIs such as the Shopify Storefront API or Shopify GraphQL API. The frontend then renders this data using frameworks such as Next.js, React, Vue, or Nuxt.
Brands typically adopt headless Shopify when they need more flexibility than Shopify themes provide. Common benefits include greater design freedom, improved performance, and advanced customization.
Implementing Digioh with Shopify Headless
Unlike traditional Shopify stores, headless implementations do not use Shopify themes to load frontend scripts. Because of this, the Digioh Shopify App typically cannot install the Digioh script automatically. Instead, Digioh must be added directly to the frontend codebase.
Digioh runs as a JavaScript tag installed on the site that dynamically renders campaigns such as pop-ups, banners, and inline widgets after page load.
Typical implementation steps:
- Retrieve the Digioh JavaScript snippet from Setup Instructions in your Digioh account.
- Insert the snippet into the global header or layout file of the frontend application.
The script should load on all pages to ensure campaigns trigger correctly. Where the script is placed depends on how the frontend application is structured. Common placement locations include the global site header, layout wrapper, or root application component.
To learn more about our javascript, check out this article.
Frequently Asked Questions
Can I install Digioh using the Shopify App?
Not for JavaScript injection. The Digioh Shopify App works by embedding JavaScript into Shopify themes. Since headless storefronts do not use Shopify themes, the app cannot inject JavaScript into the frontend. The script must be installed directly in the frontend codebase. That said, the app can still be installed if you need an API connection for Discount Codes or Custom Product Feeds.
What is the difference between Next.js Shopify and Shopify Headless?
Shopify Headless is an architecture pattern. Next.js is one possible frontend framework used within that architecture. Many Shopify headless stores are built using Next.js, Hydrogen, or React.
Can Digioh auto-import Shopify product feeds?
Yes. Digioh can import product feeds from Shopify even when the storefront is headless. The product catalog still lives inside Shopify, so integrations that pull product data continue to function.
Can Digioh build product recommendation results pages for Shopify Headless stores?
Digioh Results Pages must be used for results pages.