Help with a Stadium feature

Store Design
, , , ,
1

We need a custom stadium passport feature for målminutter.dk, a Danish football stadium review platform built on Shopify. Each stadium is a product, and we use the Vendor field to indicate leagues (Superliga, 1. Division, etc.).

Requirements

Core Functionality:

  1. Login-only access
    • Feature only available to logged-in customers
  2. Track visited stadiums
    • Customers can mark stadiums as “visited”
  3. Progress tracking
    • Show “X af Y besøgt” for each league
  4. Visual indicators
    • Clear visited/not visited status on each stadium
  5. Scalable
    • Automatically supports new leagues added via Vendor field

Technical Specifications:

  • Data Storage: Customer metafield passport.visited_stadiums (List of product references)
  • Frontend: Existing Liquid section displays data correctly
  • Backend: Need API endpoint to update customer metafields from frontend
  • Security: Ensure only logged-in customers can update their own data

Current Status:

  • Display logic works perfectly (Liquid template complete)
  • Customer metafield created and configured
  • Interactive buttons fail (Shopify security restrictions)

What We Need: Either a custom app or backend service that provides:

  1. API endpoint to safely update customer metafields
  2. JavaScript integration for the existing frontend
  3. Proper authentication and security

Existing Code: We have a complete Liquid section with styling and frontend logic - just need the backend functionality to make the “Marker som besøgt” buttons work.

2

Hi,

Hope this will work

  • Create a custom Shopify app with customer/metafield access
  • Build a secure API endpoint to update visited stadiums
  • Add frontend JavaScript to call that endpoint
    JavaScript example
document.querySelectorAll('.mark-visited').forEach(button => {
  button.addEventListener('click', async () => {
    const stadiumId = button.dataset.stadiumId;
    const customerId = window.customerId; // Pass this from Liquid if needed

    const res = await fetch('https://your-backend.com/mark-visited', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({ customerId, stadiumId })
    });

    const data = await res.json();
    if (data.status === 'success') {
      button.textContent = 'Besøgt';
    }
  });
});
  • Use metafields to store and show visited stadiums
  • Protect everything with login checks and access control