Rivo is built to be lightweight, fast, and fully aligned with Shopify's latest performance and architectural standards.
High level overview
Rivo's Shopify integration is built to minimize impact on storefront speed while maintaining robust functionality and design flexibility.
Asset footprint and load strategy
JavaScript and CSS Size
Rivo JS: 33KB
Rivo CSS: 4KB
Load behavior
Both assets are loaded using the
deferattribute, ensuring they do not block page rendering or delay the initial paint. This allows the browser to prioritize critical content and improve perceived load times.
Shopify native architecture
Theme app extensions
All Rivo on-site components are delivered through Shopify Theme App Extensions, Shopify’s latest framework for modular, high-performance app integrations.
Assets are scoped to specific areas of the storefront, preventing unnecessary global resource loading.
Checkout Extensions
Rivo’s checkout components are built using Checkout UI Extensions, Shopify’s native method for injecting app functionality into the checkout without compromising performance or security.
Client-Side Architecture
Checkout UI Extensions run inside Shopify's secure iframe context, meaning they do not add to the global JS or CSS payload of the checkout page.
Components are rendered only within the checkout editor-defined areas (e.g. order summary, shipping method, thank you page), ensuring isolated and scoped execution.
Built with Shopify’s React-Based API
Extensions use Shopify’s
@shopify/checkout-ui-extensionsAPI, allowing for tight integration with Shopify state, such as line items, customer info, and discounts.Rivo leverages this to dynamically display loyalty information, referral prompts, and reward redemptions with no extra client-side network requests.
Performance Impact
Because UI Extensions are sandboxed and declaratively rendered through Shopify’s APIs, they do not increase main-thread JavaScript execution time or block critical checkout interactions.
They follow a strict performance budget enforced by Shopify, ensuring smooth rendering and consistent UX.
Shopify Functions
Rivo also integrates using Shopify Functions, which enable server-side logic to be executed directly in the checkout flow without external API calls.
Use Cases
Automatic Discounting based on VIP Tier
Points Redemption Logic at checkout
Reward Incentives personalized to customer segments
Server-Side Execution
Functions run inside Shopify’s infrastructure, not in the browser, meaning there's zero client-side performance impact.
Logic is evaluated in real-time as part of the Shopify checkout engine, ensuring reliable and instantaneous application of rules.
This allows Rivo’s logic to execute fast and at scale, without third-party latency or availability risks.
Dynamic content and data handling
Liquid and metafields
Dynamic data such as customer point balances is loaded server-side using Liquid or Shopify metafields.
This minimizes the need for client-side JavaScript execution and leverages Shopify’s CDN infrastructure for optimized data delivery and rendering.
Core web vitals compliance (2025 Benchmarks)
Rivo is optimized to exceed current Core Web Vitals benchmarks. This will vary from website to website due to factors unrelated to Rivo, but in general our core web vitals for the app and infrastructure meet 2025 benchmarks:
Largest Contentful Paint (LCP): < 2.5 seconds
Cumulative Layout Shift (CLS): < 0.1
Interaction to Next Paint (INP): < 200 milliseconds
Common Questions
Please reach out to [email protected] with any questions, or visit rivo.io/developers to learn more.