Skip to main content

Quick-Widgets: Technical Overview

This document provides a technical overview of the Quick-Widgets Shopify app, covering its architecture, core components, and integration patterns.

Architecture​

Quick-Widgets is built using the Shopify Remix framework (Vite-based) and utilizes a modular design pattern.

1. Modular Core (app/commons)​

The application offloads shared logic, reusable UI components, and core services to a git submodule located in app/commons. This ensures consistency across different widgets and simplifies maintenance.

2. MiniApp Registry​

The app architecture is designed around a "MiniApp" model. Each widget (e.g., COD Form, Progress Bar) is treated as a MiniApp with its own configuration, extensions, and metadata stored in the database.

3. Database Schema​

  • Session: Manages Shopify store sessions and OAuth tokens.
  • MiniApp: Stores the master definition of each available widget.
  • Extention: Defines the specific implementations (Theme App Extension vs. Checkout UI Extension) for each MiniApp.
  • MiniAppSession: Tracks which widgets are active and configured for specific merchant stores.

Integration Patterns​

Storefront Extensions​

Widgets are integrated into the merchant's storefront using Theme App Extensions (Liquid blocks). These blocks:

  • Inject necessary JavaScript assets.
  • Provide a schema for merchant customization via the Shopify Theme Editor.
  • Communicate with the app backend via the App Proxy.

Checkout Customization​

For Shopify Plus merchants, the app provides Checkout UI Extensions. These are built with React and allow for deep integration into the checkout flow, such as adding priority processing fees or custom data collection fields.

Backend Operations​

  • App Proxy: Handles secure storefront requests (e.g., COD form submission) without requiring standard checkout bypass.
  • Draft Orders: Automates order creation for certain workflows (like COD) using the Shopify Admin GraphQL API.
  • Webhooks: Responds to mandatory Shopify events like app/uninstalled to ensure local data is synchronized with Shopify.

Tech Stack​

  • Framework: Remix (Node & React)
  • Styling: Shopify Polaris
  • Database: Prisma ORM (MySQL/SQLite)
  • API: GraphQL (Admin & Storefront)