{%- comment -%} High-Performance Responsive Product Grid Card in Liquid {%- endcomment -%}
<div class="product-card" data-product-id="{{ product.id }}">
  <a href="{{ product.url }}" class="product-card__link">
    <div class="media media--square">
      {{ product.featured_image | image_url: width: 600 | image_tag: 
         loading: 'lazy', 
         sizes: '(min-width: 1024px) 25vw, (min-width: 768px) 33vw, 50vw',
         widths: '300, 450, 600',
         alt: product.title | escape 
      }}
    </div>
    <div class="product-card__info">
      <h3 class="product-card__title">{{ product.title | escape }}</h3>
      <div class="product-card__price">
        {% if product.compare_at_price > product.price %}
          <span class="price--sale">{{ product.price | money }}</span>
          <s class="price--compare">{{ product.compare_at_price | money }}</s>
        {% else %}
          <span class="price--regular">{{ product.price | money }}</span>
        {% endif %}
      </div>
    </div>
  </a>
</div>

{%- comment -%} Querying Relational Metaobjects in Liquid {%- endcomment -%}
{%- assign brand_ambassador = product.metafields.custom.ambassador.value -%}
{%- if brand_ambassador != blank -%}
  <aside class="ambassador-banner">
    <div class="ambassador-avatar">
      <img src="{{ brand_ambassador.portrait | image_url: width: 120 }}" alt="{{ brand_ambassador.full_name }}" />
    </div>
    <div class="ambassador-bio">
      <h4>Recommended by {{ brand_ambassador.full_name }}</h4>
      <p>"{{ brand_ambassador.quote }}"</p>
    </div>
  </aside>
{%- endif -%}

// Rust Shopify Function (Cart Transform / Dynamic Tiered Discount)
use shopify_function::prelude::*;
use shopify_function::Result;

#[shopify_function]
fn function(input: input::ResponseData) -> Result<output::FunctionResult> {
    let mut discounts = vec![];

    for line in input.cart.lines {
        if line.quantity >= 3 {
            discounts.push(output::Discount {
                targets: vec![output::Target::ProductVariant {
                    id: line.merchandise.id,
                    quantity: None,
                }],
                value: output::Value::Percentage(output::Percentage { value: 15.0 }),
                message: Some("15% Volume Tier Discount Applied".to_string()),
            });
        }
    }

    Ok(output::FunctionResult {
        discounts,
        discount_application_strategy: output::DiscountApplicationStrategy::First,
    })
}

// Hydrogen Remix Route Loader: Fetching Products via Storefront GraphQL API
import { json, LoaderFunctionArgs } from '@shopify/remix-oxygen';

export async function loader({ context }: LoaderFunctionArgs) {
  const { storefront } = context;
  
  const { products } = await storefront.query(`
    query BestSellers {
      products(first: 8, sortKey: BEST_SELLING) {
        nodes {
          id
          title
          handle
          priceRange {
            minVariantPrice { amount currencyCode }
          }
        }
      }
    }
  `);

  return json({ products: products.nodes });
}