Skip to main content

Frontend Price Display

Overview​

The pricing system uses Shopify's variant price and compareAtPrice fields with intelligent swap logic to streamline sale management for webops.

Simplified Sale Workflow​

Webops only needs to update one field in Shopify to put products on sale:

1. Normal State (no sale)​

  • price: $100 (regular price)
  • compareAtPrice: Not set
  • Displays: $100

2. Sale State (only update compareAtPrice)​

  • price: $100 (remains unchanged)
  • compareAtPrice: $80 (set to sale price)
  • Displays: $100 $80

3. Remove Sale (only clear compareAtPrice)​

  • price: $100 (remains unchanged)
  • compareAtPrice: Cleared
  • Displays: $100

Automatic Price Swapping​

The calculateStrikeOutPrice function in app/components/ProductPrice.tsx automatically detects when compareAtPrice is lower than price and swaps them for display:

// If compareAtPrice < price, swap them
if (compareAtPrice && Number(price.amount) > Number(compareAtPrice.amount)) {
  displayPrice = compareAtPrice;    // Show sale price
  strikeOutPrice = price;           // Strike out original price
}

Backwards Compatibility​

The system also supports the typical Shopify flow where:

  • price = sale price (e.g., $80)
  • compareAtPrice = original price (e.g., $100)

In this case, no swap occurs and prices display as configured.

Benefits​

  • Single Field Update: Only need to set compareAtPrice to enable/disable sales
  • No Price History Loss: The price field stays at the original price
  • Error Prevention: Reduces manual work and potential mistakes
  • Flexible: Supports both simplified and traditional Shopify workflows

Implementation​

File: app/components/ProductPrice.tsx

The calculateStrikeOutPrice function handles the swap logic and returns:

  • displayPrice - The active selling price shown to customers
  • strikeOutPrice - The original price (shown crossed out when on sale)