DocsDevelopers
Developer overview
Agencies, freelancers and in-house developers can go far beyond the default blocks. Everything the app stores is accessible in Liquid, and the storefront components expose styling hooks, a JavaScript API and analytics events.
Who is this for?
This section assumes you are comfortable with Liquid, HTML, CSS and JavaScript. Merchants without coding knowledge can share these pages with a Shopify Partner. Our support team doesn’t provide development services.
Architecture in a nutshell
- Data lives in Shopify. Tables are app-owned metaobjects; assignments, compared products and values are metafields. There is no external API to call and nothing to sync.
- Rendering happens in Liquid. App blocks render semantic HTML server-side, inside a Shadow DOM for style isolation. JavaScript is only used for progressive enhancements (variant updates, dialogs, tooltips, dynamic comparison) and is lazy-loaded.
- Everything is extensible. Build your own Liquid templates from the data, style blocks with CSS parts, drive dynamic comparison from your code, and listen to analytics events.
Guides
Data modelMetaobjects, metafields, JSON structures and namespaces.Custom tables in LiquidRender fully custom specification and comparison layouts.Styling with CSS partsStyle elements inside the Shadow DOM of the app blocks.Dynamic comparison APICustom buttons, links and programmatic control (Pro).Analytics eventsSubscribe to comparison events with Shopify custom pixels.Tabs & collapsiblesMove app blocks into any element with a CSS selector.
Performance budget
When a table is visible on a page, the app loads:
- a CSS file of about 5.5 KB, lazy-loaded and non-blocking,
- a JavaScript file of about 6 KB, lazy-loaded and non-blocking,
- an extra script of about 2.2 KB only when dynamic comparison is used on collection pages.
Pages without app blocks load nothing (except the dynamic comparison app embed when enabled). If you render tables with your own Liquid instead of the app blocks, no asset is loaded at all.