Shopify (Liquid)
Add Product Genius to a Liquid Shopify theme with the theme app extension's app blocks.
Product Genius ships a theme app extension for Shopify. Once the Product Genius app is installed on your store, the extension adds Product Genius blocks to your theme editor, so you place the AI widget and the search bar the same way you place any other section block — by dragging them into position and clicking Save.
No theme code is edited, and nothing is copied into your theme's files. If you later switch or update your theme, the blocks you added stay with the theme they were added to.
The two blocks
| Block in the theme editor | What it is | Settings |
|---|---|---|
| Product Genius AI Widget | The Product Genius shopping experience — the conversational product feed. See AI widget. | None; configured on the Product Genius side |
| PG Search Bar | A Product Genius search bar for your storefront. See Search bar. | Layout, size, and loading-state appearance |
Both are app blocks, which means they live inside a section of a page. They are not app embeds, so you will not find them under Theme settings → App embeds — look in a section's Add block menu instead, under Apps.
Before the blocks do anything
Two prerequisites
The blocks render, but they stay inert until both of these are true:
- The Product Genius app is installed on your store. Until it is, the blocks are not offered in the theme editor at all.
- Your store is configured on the Product Genius side. Your catalog has to be ingested and your widget and search bar have to be set up for your store. Your Product Genius contact does this for you — there is no self-serve setup screen.
If you have added a block and see nothing on your storefront, this is almost always why. Contact your Product Genius representative before changing anything in your theme.
Is this the right section for your store?
Liquid theme — you are in the right place
Dawn, a Dawn derivative, or any theme you edit in Shopify's theme editor. Use the app blocks described in this section.
Headless storefront — use the React package
Hydrogen, Next.js, Remix, or any custom React storefront. Install the Product Genius React components instead.
The two paths are the same product, delivered the way each storefront type expects:
- PG Search Bar (this section) and the
<ProductGeniusSearchBar>React component are the same search bar. One is placed in a Liquid theme; the other is rendered by your React app. - The AI widget mounts into an element with the id
pg-app-wrapperin both worlds. This extension emits that element for you; in React it is the default value of the feed component'smountIdprop.
Because the storefront behavior is shared, the React documentation is the reference for the component props — this section covers only what is specific to Liquid themes.
Theme requirements
App blocks require a theme that supports them (an Online Store 2.0 theme, where templates are JSON rather than Liquid). Two practical consequences:
- Not every section accepts app blocks. A theme opts a section in. Header sections in particular often do not, which matters most for the search bar.
- Older themes may not support app blocks at all. If the Product Genius blocks never appear in any Add block menu, see Manual placement.
For theme developers
The extension is declared as type = "theme" with the name product-genius. It
contains two blocks, product-genius-liquid (schema name "Product Genius AI
Widget") and pg-search (schema name "PG Search Bar"), both target: "section".
The extension carries one stylesheet asset, pg-search.css, attached to the
pg-search block through its schema.
How is this guide?