Shopify Checkout anpassen: Grenzen und Lösungen 2025

/* Custom CSS (limitiert auf Standard-Plänen) */
.checkout-logo {
max-width: 200px;
}

.step__footer {
background-color: #2E865F; /* Shopify Green */
}

/* Button-Anpassung */
.step__footer__continue-btn {
background-color: #2E865F;
border-radius: 8px;
}

// extensions/checkout-ui/src/Checkout.tsx
import {
reactExtension,
TextField,
useApplyAttributeChange,
useNote,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
'purchase.checkout.block.render',
() => <CustomDeliveryNote />
);

function CustomDeliveryNote() {
const applyAttributeChange = useApplyAttributeChange();
const note = useNote();

const handleChange = (value: string) => {
  applyAttributeChange({
    type: 'updateAttribute',
    key: 'delivery_notes',
    value,
  });
};

return (
  <TextField
    label="Lieferhinweise (optional)"
    placeholder="z.B. Hintereingang nutzen"
    value={note || ''}
    onChange={handleChange}
  />
);
}

// shopify.extension.toml
# [extension]
# type = "ui_extension"
# name = "delivery-notes"
# handle = "delivery-notes"
#
# [[extensions.targeting]]
# module = "./src/Checkout.tsx"
# target = "purchase.checkout.block.render"

// extensions/free-shipping-banner/src/Checkout.tsx
import {
reactExtension,
Banner,
useSubtotalAmount,
useSettings,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
'purchase.checkout.block.render',
() => <FreeShippingBanner />
);

function FreeShippingBanner() {
const subtotal = useSubtotalAmount();
const settings = useSettings();

const threshold = settings.freeShippingThreshold || 50;
const remaining = threshold - parseFloat(subtotal.amount);

// Nicht anzeigen wenn Schwelle erreicht
if (remaining <= 0) {
  return (
    <Banner status="success">
      🎉 Sie erhalten kostenlosen Versand!
    </Banner>
  );
}

return (
  <Banner status="info">
    Noch {remaining.toFixed(2)} {subtotal.currencyCode} bis kostenloser Versand!
  </Banner>
);
}

// Extension Settings (shopify.extension.toml)
# [settings]
# [[settings.fields]]
# key = "freeShippingThreshold"
# type = "number_decimal"
# name = "Free Shipping Threshold"
# description = "Minimum order value for free shipping"

// extensions/trust-badges/src/Checkout.tsx
import {
reactExtension,
BlockStack,
InlineStack,
Image,
Text,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
'purchase.checkout.block.render',
() => <TrustBadges />
);

function TrustBadges() {
return (
  <BlockStack spacing="tight">
    <InlineStack spacing="base" blockAlignment="center">
      <Image
        source="https://cdn.shopify.com/s/files/1/0xxx/ssl-badge.png"
        alt="SSL Verschlüsselt"
        aspectRatio={1}
      />
      <Image
        source="https://cdn.shopify.com/s/files/1/0xxx/payment-icons.png"
        alt="Sichere Zahlungsmethoden"
        aspectRatio={4}
      />
    </InlineStack>

    <Text size="small" appearance="subdued">
      Sichere Zahlung mit 256-Bit-Verschlüsselung.
      Ihre Daten sind bei uns sicher.
    </Text>
  </BlockStack>
);
}

// extensions/product-upsell/src/Checkout.tsx
import {
reactExtension,
BlockStack,
Heading,
InlineLayout,
Image,
Text,
Button,
useCartLines,
useApplyCartLinesChange,
} from '@shopify/ui-extensions-react/checkout';

const UPSELL_PRODUCT = {
variantId: 'gid://shopify/ProductVariant/123456789',
title: 'Geschenkverpackung',
price: '5.00',
image: 'https://cdn.shopify.com/...',
};

export default reactExtension(
'purchase.checkout.block.render',
() => <ProductUpsell />
);

function ProductUpsell() {
const cartLines = useCartLines();
const applyCartLinesChange = useApplyCartLinesChange();

// Prüfen ob Upsell bereits im Warenkorb
const hasUpsell = cartLines.some(
  (line) => line.merchandise.id === UPSELL_PRODUCT.variantId
);

if (hasUpsell) return null;

const handleAdd = async () => {
  await applyCartLinesChange({
    type: 'addCartLine',
    merchandiseId: UPSELL_PRODUCT.variantId,
    quantity: 1,
  });
};

return (
  <BlockStack spacing="base">
    <Heading level={3}>Perfekt für Ihr Geschenk</Heading>

    <InlineLayout
      spacing="base"
      columns={['auto', 'fill']}
      blockAlignment="center"
    >
      <Image
        source={UPSELL_PRODUCT.image}
        alt={UPSELL_PRODUCT.title}
        aspectRatio={1}
      />

      <BlockStack spacing="tight">
        <Text size="medium" emphasis="bold">
          {UPSELL_PRODUCT.title}
        </Text>
        <Text size="small" appearance="subdued">
          {UPSELL_PRODUCT.price} €
        </Text>
      </BlockStack>

      <Button kind="secondary" onPress={handleAdd}>
        Hinzufügen
      </Button>
    </InlineLayout>
  </BlockStack>
);
}

// extensions/shipping-discount/src/main.rs
use shopify_function::prelude::*;
use shopify_function::Result;

#[shopify_function]
fn run(input: input::ResponseData) -> Result<output::FunctionResult> {
  let cart_total: f64 = input.cart.cost.subtotal_amount.amount.parse()?;

  let operations = if cart_total >= 50.0 {
      vec![output::Operation {
          update: Some(output::UpdateOperation {
              delivery_option: Some(output::DeliveryOption {
                  title: Some("Kostenloser Versand".to_string()),
                  cost: Some(output::Cost {
                      amount: 0.0,
                  }),
              }),
          }),
      }]
  } else {
      vec![]
  };

  Ok(output::FunctionResult { operations })
}

// shopify.extension.toml
# api_version = "2025-01"
#
# [[extensions]]
# type = "function"
# name = "shipping-discount"
# handle = "shipping-discount"
#
# [extensions.input]
# variables = { namespace = "shipping-discount", key = "threshold" }

// extensions/shipping-discount/src/index.ts
import type {
RunInput,
FunctionResult,
} from '../generated/api';

export function run(input: RunInput): FunctionResult {
const cartTotal = parseFloat(input.cart.cost.subtotalAmount.amount);
const threshold = 50; // € 50

if (cartTotal >= threshold) {
  return {
    operations: [
      {
        update: {
          deliveryOption: {
            title: 'Kostenloser Versand',
            cost: {
              amount: '0.00',
              currencyCode: input.cart.cost.subtotalAmount.currencyCode,
            },
          },
        },
      },
    ],
  };
}

return { operations: [] };
}

// package.json
// {
//   "name": "shipping-discount",
//   "scripts": {
//     "build": "javy compile index.js -o index.wasm"
//   }
// }

<!-- sections/cart-template.liquid -->
<div class="cart-note">
<label for="cart-note">Lieferhinweise (optional)</label>
<textarea
  name="note"
  id="cart-note"
  form="cart"
  placeholder="z.B. Hintereingang nutzen"
>{{ cart.note }}</textarea>
</div>

<script>
// Auto-save note
document.getElementById('cart-note').addEventListener('blur', function() {
  fetch('/cart/update.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ note: this.value })
  });
});
</script>

// extensions/age-verification/src/index.ts
import type { RunInput, FunctionResult } from '../generated/api';

export function run(input: RunInput): FunctionResult {
const birthdate = input.cart.attribute?.find(
  (attr) => attr.key === 'birthdate'
)?.value;

if (!birthdate) {
  return {
    errors: [
      {
        localizedMessage: 'Bitte geben Sie Ihr Geburtsdatum an.',
        target: 'cart',
      },
    ],
  };
}

const age = calculateAge(new Date(birthdate));

if (age < 18) {
  return {
    errors: [
      {
        localizedMessage:
          'Sie müssen mindestens 18 Jahre alt sein, um zu bestellen.',
        target: 'cart',
      },
    ],
  };
}

return {};
}

function calculateAge(birthDate: Date): number {
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();

if (
  monthDiff < 0 ||
  (monthDiff === 0 && today.getDate() < birthDate.getDate())
) {
  age--;
}

return age;
}

// extensions/payment-filtering/src/index.ts
import type { RunInput, FunctionResult } from '../generated/api';

export function run(input: RunInput): FunctionResult {
const cartTotal = parseFloat(input.cart.cost.totalAmount.amount);
const operations = [];

// PayPal nur für Orders > €100
if (cartTotal < 100) {
  const paypalMethod = input.paymentMethods.find(
    (method) => method.name === 'PayPal'
  );

  if (paypalMethod) {
    operations.push({
      hide: {
        paymentMethodId: paypalMethod.id,
      },
    });
  }
}

// Rechnung nur für B2B-Kunden
const isB2BCustomer = input.cart.attribute?.find(
  (attr) => attr.key === 'customer_type'
)?.value === 'b2b';

if (!isB2BCustomer) {
  const invoiceMethod = input.paymentMethods.find(
    (method) => method.name === 'Rechnung'
  );

  if (invoiceMethod) {
    operations.push({
      hide: {
        paymentMethodId: invoiceMethod.id,
      },
    });
  }
}

return { operations };
}

<!-- sections/cart-template.liquid -->
<div class="gift-wrap-option">
<label>
  <input
    type="checkbox"
    name="attributes[gift_wrap]"
    value="Ja"
    {{ if cart.attributes.gift_wrap == 'Ja' }}checked{{ endif }}
  />
  Geschenkverpackung hinzufügen (+€5)
</label>
</div>

<script>
// Auto-save attribute
document.querySelector('[name="attributes[gift_wrap]"]')
  .addEventListener('change', function() {
    fetch('/cart/update.js', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        attributes: {
          gift_wrap: this.checked ? 'Ja' : 'Nein'
        }
      })
    });
  });
</script>

// extensions/vat-id-field/src/Checkout.tsx
import {
reactExtension,
TextField,
useApplyAttributeChange,
useAttributes,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
'purchase.checkout.block.render',
() => <VatIdField />
);

function VatIdField() {
const applyAttributeChange = useApplyAttributeChange();
const attributes = useAttributes();

const vatId = attributes.find((attr) => attr.key === 'vat_id')?.value || '';

const handleChange = (value: string) => {
  applyAttributeChange({
    type: 'updateAttribute',
    key: 'vat_id',
    value,
  });
};

// Basic VAT ID validation
const validateVatId = (value: string): boolean => {
  // DE VAT ID: DE + 9 digits
  const dePattern = /^DE[0-9]{9}$/;
  return dePattern.test(value);
};

return (
  <TextField
    label="USt-ID (optional)"
    placeholder="DE123456789"
    value={vatId}
    onChange={handleChange}
    error={vatId && !validateVatId(vatId)
      ? 'Ungültiges USt-ID-Format'
      : undefined
    }
  />
);
}

# Extension lokal testen
shopify app dev

# Extension für Deployment builden
shopify app build

# Extension deployen (zu Shopify Partner Dashboard)
shopify app deploy

# Extension Version erstellen
shopify app release --version=1.0.0

# Mit GitHub Actions automatisieren:
# .github/workflows/deploy-extensions.yml
name: Deploy Checkout Extensions

on:
push:
  branches: [main]

jobs:
deploy:
  runs-on: ubuntu-latest
  steps:
    - uses: actions/checkout@v4

    - name: Setup Node.js
      uses: actions/setup-node@v4
      with:
        node-version: '20'

    - name: Install Shopify CLI
      run: npm install -g @shopify/cli @shopify/app

    - name: Build Extensions
      run: shopify app build

    - name: Deploy to Shopify
      env:
        SHOPIFY_API_KEY: ${{ secrets.SHOPIFY_API_KEY }}
        SHOPIFY_API_SECRET: ${{ secrets.SHOPIFY_API_SECRET }}
      run: shopify app deploy