📋 Table of Contents

1. Overview
2. Fetching Membership Configuration
3. Architecture
4. Cart Widget Implementation
5. Core Features
6. Implementation Guide
7. Advanced Features
8. Best Practices
9. Membership Management Page

🎯 Overview

This documentation provides a complete implementation guide for building a membership program system within a Shopify cart using Remix and Hydrogen framework. The membership configuration is stored in Shopify metafields and can be dynamically fetched to configure pricing, benefits, and checkout behavior.

Tech Stack Requirements

🔍 Fetching Membership Configuration

Getting Plan Settings from Shopify Metafields

All membership configuration is stored in Shopify metafields. Fetch these settings at the beginning of your app to configure the membership program dynamically.

# GraphQL query to fetch plan settings and widget configurationquery getPlanSettings {
  shop {
    planSettings: metafield(namespace: "exison", key: "exison_plan_settings") {
      value
    }
    widgetConfig: metafield(namespace: "exison", key: "exison_widget_cart_page") {
      value
    }
    widgetMemberConfig: metafield(namespace: "exison", key: "exison_widget_cart_page_member") {
      value
    }
  }
}