Creating Lottery Products

This guide covers the complete workflow for adding a new lottery game to UberLotto — from Supabase database setup to Shopify product creation and verification.

Overview

How the System Works

UberLotto uses two systems that work together:

System	Purpose	Data Stored
Shopify	Product management, checkout, storefront	Product details, pricing, images, variants, metafields
Supabase	Real-time lottery data	Jackpot amounts, past drawing results

Data Flow

┌──────────────────┐         ┌──────────────────┐
│     SHOPIFY      │         │    SUPABASE      │
│──────────────────│         │──────────────────│
│ - Product Title  │         │ - Jackpot Amount │
│ - Description    │         │ - Past Drawings  │
│ - Images         │         │ - Drawing Dates  │
│ - Pricing/Variants│        │ - Winning Numbers│
│ - game_slug      │◄───────►│ - slug           │
│   (metafield)    │  MATCH  │   (column)       │
└──────────────────┘         └──────────────────┘
         │                           │
         ▼                           ▼
┌────────────────────────────────────────────────┐
│              UBERLOTTO WEBSITE                  │
│────────────────────────────────────────────────│
│ Combines Shopify product data with Supabase    │
│ jackpot/drawing data using matching slugs      │
└────────────────────────────────────────────────┘

CRITICAL

The custom.game_slug metafield in Shopify must exactly match the slug column in the Supabase jackpots and past_drawings tables. This is the only identifier that connects the two systems. There is no game_type numeric ID — the system uses text slugs exclusively.

Key Codebase Files

File	Purpose
app/utils/jackpot.server.ts	Fetches jackpot data from Supabase by slug
app/utils/pastDrawings.server.ts	Fetches past drawing data by slug
app/services/lottery-product-enrichment.service.ts	Matches products to jackpot data via gameSlug
app/lib/settings.ts	Default collection ID and display settings
app/shared-types/supabase.ts	TypeScript types for Supabase tables

Prerequisites

Before adding your first product, ensure the custom.game_slug metafield definition exists in Shopify:

1. Go to Shopify Admin > Settings > Custom data
2. Click Products
3. Click Add definition
4. Configure:

Field	Value
Name	Game Slug
Namespace and key	custom.game_slug
Type	Single line text
Description	Unique identifier matching the Supabase slug (e.g., "powerball")

5. Click Save

TIP

This only needs to be done once per Shopify store. If the metafield definition already exists, skip to the next section.

Step 1: Supabase Setup

Before creating the Shopify product, ensure game data exists in Supabase.

Add Entry to jackpots Table

Navigate to Supabase Dashboard > Table Editor > jackpots and insert a new row:

Column	Description	Example
slug	Unique identifier (lowercase, hyphens)	powerball
game_name	Display name	Powerball
jackpot_numeric	Current jackpot in USD	209000000
jackpot_alpha_numeric	Human-readable amount (optional)	$209 Million
time_stamp_iso	Last updated timestamp	2024-01-15T12:00:00Z

Add Entries to past_drawings Table (Optional)

If historical drawing data is available:

Column	Description	Example
slug	Must match jackpots.slug	powerball
game_name	Display name	Powerball
draw_date	Drawing date (YYYY-MM-DD)	2024-01-13
drawing_time_et	Time in Eastern (optional)	10:59 PM
draw_datetime_iso	Full ISO timestamp (optional)	2024-01-14T03:59:00Z
winning_numbers	Comma-separated	12,24,36,48,67
bonus_ball	Bonus number (nullable)	10
multiplier	Multiplier value (nullable)	2x
jackpot_status	Winner status (optional)	Rollover
jackpot_usd	Jackpot for this drawing	200000000
drawing_official_link	Official results link (optional)	https://...

Step 2: Shopify Product Creation

Create the Product

1. Go to Shopify Admin > Products > Add product
2. Fill in basic information:

Field	Guidance
Title	Game name (e.g., "Powerball Pool")
Description	Marketing copy explaining the game, odds, prizes
Product type	Lottery (for collection filtering)
Media	Upload game logo and promotional images
Status	Set to "Draft" while configuring

Configure Variants

Create variants for different pricing tiers:

1. Under Variants, click Add options
2. Add option name (e.g., Power Play or Lines)
3. Add values and set prices

Example:

Variant	Price	SKU
1x (No Multiplier)	$2.00	PB-STANDARD
Up to 2x	$3.00	PB-PP-2X
Up to 5x	$3.00	PB-PP-5X
Up to 10x	$3.00	PB-PP-10X

Step 3: Configure Metafields

This is the most critical step. Navigate to the product's Metafields section.

Required Metafields

custom.game_slug (Required)

Type: Single line text Purpose: Links the product to Supabase jackpot and drawing data

Game	Slug Value
Powerball	powerball
Mega Millions	mega-millions
Megabucks NH	megabucks-nh
Lucky for Life	lucky-for-life
Lotto America	lotto-america
Gimme 5	gimme-5

WARNING

Enter the slug exactly as shown — all lowercase, hyphens for spaces, no trailing spaces. Mismatches cause jackpots to show as "NaN" or "$0".

custom.draw_games_schedule (Required)

Type: Single line text Purpose: Defines which days drawings occur

Format: Comma-separated day abbreviations: Mon, Tue, Wed, Thu, Fri, Sat, Sun

Game	Schedule
Powerball	Mon, Wed, Sat
Mega Millions	Tue, Fri
Lucky for Life	Mon, Thu

custom.lottery_pool_cutoff_time (Required)

Type: Single line text Purpose: Entry cutoff time before the drawing

Format: 24-hour time (HH:MM) in EST/EDT

Game	Cutoff
Powerball	22:00
Mega Millions	23:00

Optional Metafields

custom.logo_image

Type: File reference (Media Image) Purpose: Custom logo displayed on game cards Recommendation: PNG with transparent background, 200x200px minimum

custom.lottery_ticket_multiplier

Type: Single line text Purpose: Enables the multiplier feature display Value: true or false

custom.enable_play_options

Type: Single line text Purpose: Enables play options UI (multi-draw, subscription) Value: true or false

custom.disabled_days

Type: JSON Purpose: Days when the game is unavailable for purchase Value: ["Sun"]

custom.game_db_name

Type: Single line text Purpose: Legacy/optional. Currently unused — game_slug is the primary identifier. Stores the exact game name as it appears in Supabase (e.g., "Powerball") but is not consumed by any application logic.

Step 4: Add to Collection

1. In the product editor, find the Collections section
2. Add the product to the Lottery Games collection

The default collection ID is gid://shopify/Collection/429088702676. This can be overridden via page metafields (see app/lib/settings.ts).

Step 5: Publish

1. Set Status to "Active"
2. Ensure proper sales channels are selected
3. Click Save

Existing Game Slugs

Game Name	Slug	Notes
Powerball	powerball	National multi-state game
Mega Millions	mega-millions	National multi-state game
Megabucks NH	megabucks-nh	New Hampshire state game
Lucky for Life	lucky-for-life	Regional multi-state game
Lotto America	lotto-america	Multi-state game
Gimme 5	gimme-5	Regional game

Slug naming convention:

• All lowercase
• Hyphens (-) for spaces
• No special characters
• Short but descriptive

Verification Checklist

After creating a product, verify everything works:

Home Page

• [ ] Product appears in the game grid
• [ ] Jackpot amount displays correctly (not "NaN" or "$0")
• [ ] Product image/logo shows properly
• [ ] "Play Now" button links to the correct product page

Product Detail Page

• [ ] Page loads without errors
• [ ] Jackpot amount displays correctly
• [ ] All variants and pricing options are visible
• [ ] "Add to Cart" functionality works
• [ ] Next drawing date shows correctly

Past Drawings Page

• [ ] Game appears in the dropdown selector
• [ ] Selecting the game shows drawing results
• [ ] Date filtering works correctly

Collections Page

• [ ] Product appears in the Lottery Games collection
• [ ] Filters include the new game

Troubleshooting

Jackpot shows NaN or $0

Cause: Slug mismatch between Shopify and Supabase

Fix:

1. Check the custom.game_slug value on the Shopify product
2. Verify it exactly matches the slug in the Supabase jackpots table
3. Common issues:
   • Extra spaces: "powerball " vs "powerball"
   • Case mismatch: "Powerball" vs "powerball"
   • Typos: "powrball" vs "powerball"

Product not appearing on home page

Cause: Product not in the correct collection

Fix:

1. Edit the product in Shopify
2. Add it to the "Lottery Games" collection
3. Save and wait a few minutes for cache to clear

Past drawings empty or game missing from dropdown

Cause: Missing or mismatched data in Supabase

Fix:

1. Check the past_drawings table in Supabase
2. Verify entries exist with the correct slug
3. Ensure the slug matches the product's game_slug metafield

Next drawing date is wrong

Cause: Incorrect schedule or cutoff time

Fix:

1. Check custom.draw_games_schedule format (comma-separated day abbreviations)
2. Verify custom.lottery_pool_cutoff_time is in 24-hour format (HH:MM)
3. Ensure days match the actual drawing schedule

Jackpot amount is outdated

Cause: Supabase data not updated

Fix:

1. Navigate to the jackpots table in Supabase
2. Update jackpot_numeric and jackpot_alpha_numeric
3. Update time_stamp_iso to the current time
4. The website will reflect changes within minutes

Quick Reference

NEW GAME CHECKLIST:
1. [ ] Choose slug (lowercase, hyphens)
2. [ ] Add to Supabase jackpots table
3. [ ] Add to Supabase past_drawings (optional)
4. [ ] Create Shopify product
5. [ ] Set custom.game_slug metafield (MUST match Supabase slug)
6. [ ] Set custom.draw_games_schedule
7. [ ] Set custom.lottery_pool_cutoff_time
8. [ ] Add to Lottery Games collection
9. [ ] Publish product
10.[ ] Verify on website