Experience customization use cases for Loomi AI for Shopify

Experience customization lets you replace the default HTML of Loomi AI for Shopify widgets with your own EJS templates. Match your storefront's brand, customize pricing display, and hand off implementation to agencies — all without a developer release cycle.

Benefits

  • Match your storefront's brand and design system without a developer release cycle.
  • Publish customizations directly from the Shopify app — no code deploys.
  • Iterate on layouts and components in the same session you opened the editor.
  • Revert to the Loomi AI default in one click if you need a clean slate.
  • Hand off implementation to agencies without giving them access to connector code.

Use cases

Customize pricing display with metafields

A fashion retailer wants to show retail price, member price pulled from a Shopify metafield, and a calculated discount percentage on every product card — so shoppers can see how much they save as members. The merchant's agency opens the product card template, references the available EJS variables for metafields, adds the pricing logic, and publishes in one session.

Display color swatches and image galleries

A home goods merchant wants product cards to show color swatches linking to sibling products using metafields, and reveal a second image on hover. EJS supports conditionals and loops, so the developer iterates over variant metafields to render swatches and adds hover-state image logic directly in the template.

Add quick view and variant availability

An electronics retailer wants a quick view button on product cards and a visual indicator of which variants are in stock. The developer adds a quick-view trigger element to the product card template and uses EJS conditionals to display variant stock status — no connector code changes needed.

Match search results to your brand aesthetic

A merchant migrating from a legacy search provider needs the search results page to match the existing brand aesthetic. The agency uses experience customization to replicate the current design in HTML and EJS, validates it in the editor, and publishes. The merchant sees a seamless transition with no visual disruption.

Related articles



© Bloomreach, Inc. All rights reserved.