Upsells - Scope Document

Project: Coneflower Creamery Shopify Integration Component: Product Page Cross-Selling Status: Ready to Build (pending design)

Objective

Encourage customers ordering ice cream cakes to also purchase seasonal ice cream pints through a "Pair with seasonal pints" upsell section on product pages.

MVP Approach

Product Page Upsells

Add a designed section below the main product content on cake product pages:

┌──────────────────────────────────────────────────────────┐
│                    ICE CREAM CAKE                         │
│  [Product Image]        Chocolate Cake                    │
│                         $XX.00                            │
│                         [Select Flavor ▼]                 │
│                         [Add to Cart]                     │
├──────────────────────────────────────────────────────────┤
│                                                           │
│     🍦 COMPLETE YOUR ORDER WITH SEASONAL PINTS            │
│                                                           │
│  ┌─────────┐  ┌─────────┐  ┌─────────┐  ┌─────────┐      │
│  │ [image] │  │ [image] │  │ [image] │  │ [image] │      │
│  │ Vanilla │  │ Choc.   │  │ Mint    │  │ Caramel │      │
│  │ $12     │  │ $12     │  │ $12     │  │ $12     │      │
│  │ [Add]   │  │ [Add]   │  │ [Add]   │  │ [Add]   │      │
│  └─────────┘  └─────────┘  └─────────┘  └─────────┘      │
│                                                           │
└──────────────────────────────────────────────────────────┘

Functionality

Display Logic

Upsell Component Features

• Show 3-4 pint products
• Display: image, flavor name, price
• "Quick Add" button (adds to cart without leaving page)
• Cart opens/updates when item added
• Responsive: 4 across on desktop, 2 on tablet, 1-2 on mobile

Implementation Options

Option A: Hardcoded Products (Simplest)

Manually specify which pint variants to show as upsells.

// In single product template
$upsell_variant_ids = [
  'gid://shopify/ProductVariant/123', // Vanilla
  'gid://shopify/ProductVariant/456', // Chocolate
  'gid://shopify/ProductVariant/789', // Mint Chip
  'gid://shopify/ProductVariant/012', // Salted Caramel
];

Pros: Simple, fast to build Cons: Requires code change to update featured pints

Option B: Product Tags (More Flexible)

Tag pint variants as "featured-upsell" in Shopify, query by tag.

query {
  products(first: 4, query: "tag:featured-upsell") {
    edges {
      node {
        id
        title
        variants(first: 10) { ... }
      }
    }
  }
}

Pros: Client can change featured pints in Shopify admin Cons: Slightly more complex query

Option C: Show All Pints

Simply display all available pint variants.

Pros: No configuration needed Cons: May show too many options, less curated

Recommended Approach

Option A for MVP - Hardcode 4 featured pint variants.

• Fastest to implement
• Client provides which 4 flavors to feature
• Update in Phase 2 to tag-based if they want flexibility

Tasks

Design

Development

Content/Config Needed

Deliverables

1. Upsell section design - Approved by client
2. Upsell component - Built into single product template
3. Quick add functionality - Adds pint to cart from upsell section

Hour Estimate

Out of Scope (MVP)

• Cart drawer upsells (Phase 2)
• Checkout upsells (requires Shopify Plus)
• Post-purchase upsells (Phase 2 with app)
• Dynamic "you might also like" recommendations
• A/B testing upsell effectiveness

Phase 2 Enhancements

If client wants more sophisticated upselling:

References

• Single product template: single-shopify_product.php
• Cart add functionality: shopify.js → addToCart()