What we take on. Priced in the open.

{%- comment -%} Online Store 2.0 · theme · 2026-10 {%- endcomment -%}
{%- liquid
  assign v = product.selected_or_first_available_variant
  assign servings = product.metafields.custom.servings.value -%}
<fieldset class="plan-picker">
  {%- for a in v.selling_plan_allocations -%}
    <label class="plan">
      <input type="radio" name="selling_plan"
        value="{{ a.selling_plan.id }}">
      {{ a.selling_plan.name }} · {{ a.price | money }}
      <small>{{ a.price | divided_by: servings | money }}</small>
    </label>
  {%- endfor -%}
</fieldset>

// API version 2026-10
import '@shopify/ui-extensions/preact';
import {render} from 'preact';
export default () => render(<Upsell />, document.body);
function Upsell() {
  const id = String(shopify.settings.value.upsell_variant);
  const lines = shopify.lines.value;
  if (lines.some((l) => l.merchandise.id === id)) return null;
  const add = () => shopify.applyCartLinesChange(
    {type: 'addCartLine', merchandiseId: id, quantity: 1});
  return <s-banner heading="Complete your routine">
    <s-button onClick={add}>Add Daily Foundation · $24</s-button>
  </s-banner>;
}

// API version 2026-10
import {DiscountClass, ProductDiscountSelectionStrategy}
  from '../generated/api';
export function cartLinesDiscountsGenerateRun(input) {
  const routine = input.cart.lines.filter(
    (line) => line.merchandise.product?.inRoutine);
  if (!input.discount.discountClasses.includes(DiscountClass.Product)
      || routine.length < 2) return {operations: []};
  return {operations: [{productDiscountsAdd: {
    candidates: [{message: 'Routine bundle · 10% off',
      targets: routine.map((l) => ({cartLine: {id: l.id}})),
      value: {percentage: {value: 10}}}],
    selectionStrategy: ProductDiscountSelectionStrategy.First}}]};
}

# API version 2026-10 · Storefront API
query ProductFacts($handle: String!) {
  product(handle: $handle) {
    metafields(identifiers: [
      {namespace: "custom", key: "servings"},
      {namespace: "custom", key: "lab_tested"}
    ]) { key value }
    sellingPlanGroups(first: 1) {
      nodes { name sellingPlans(first: 2) { nodes { name } } }
    }
  }
}