# Shopify Variations

URL: https://docs.ablyft.com/de/guides/experiments/shopify-variations/

> Teste ein Draft-Theme oder ein alternatives Template in deinem Shopify-Store.



Wenn deine Website auf Shopify läuft, kannst du ganze Themes oder Seiten-Templates ohne Code testen. ABlyft bietet dafür
zwei Variation-Typen: **Shopify Theme** und **Shopify Template**.

Bevor du beginnst, muss das ABlyft-[Snippet](https://docs.ablyft.com/de/developers/installation/snippet/) in deinem Shopify-Theme installiert
sein, und das Experiment braucht wie jedes andere eine [Page](https://docs.ablyft.com/de/guides/audiences-and-delivery/pages/) und ein
[Goal](https://docs.ablyft.com/de/guides/goals-and-measurement/configure-goals/).

## Shopify Theme

Zeigt einen Teil deiner Kunden ein Draft-Theme deines Stores, bevor du es veröffentlichst.

1. Gehe in Shopify zu **Online Store → Themes** und bereite dein Draft-Theme vor (veröffentliche es nicht).
2. Öffne die Seite **Edit code** des Draft-Themes. Die Theme-ID ist Teil der URL, zum Beispiel `themes/123456789`.
3. Erstelle in ABlyft eine Variation vom Typ **Shopify Theme**, siehe [Variations](https://docs.ablyft.com/de/guides/experiments/variations/).
4. Gib im Bereich **Shopify Theme** die **Draft theme ID** ein (nur Ziffern, bis zu 12 Stellen) und speichere.

Wird ein Visitor der Variation zugewiesen, wartet das Snippet, bis Shopify auf der Seite verfügbar ist. Sieht der Visitor
das Draft-Theme noch nicht, leitet das Snippet auf die Preview dieses Themes weiter und blendet die Preview-Leiste von
Shopify aus.

## Shopify Template

Zeigt ein alternatives Template eines Seitentyps, zum Beispiel ein zweites Layout der Produktseite. Es funktioniert mit
allen Seitentypen: product, collection, page, blog, article, cart, search und customers.

1. Erstelle in deinem Theme das alternative Template, zum Beispiel `product.alternate.liquid` oder
   `product.alternate.json`.
2. Erstelle in ABlyft eine Variation vom Typ **Shopify Template**.
3. Gib im Bereich **Shopify Template** den **Template name** ein. Nur der Teil zwischen dem Seitentyp und der
   Dateiendung wird verwendet. Für `product.alternate.liquid` gib `alternate` ein.
4. Speichere.

Das Snippet lädt die Seite dann mit dem Parameter `?view=alternate` neu, wodurch Shopify das alternative Template
rendert. Hat die Seite bereits einen `view`-Parameter, leitet das Snippet nicht weiter.

> **Template und Theme müssen existieren:** ABlyft prüft nicht, ob die Theme-ID oder das Template in deinem Store existiert. Sieh dir die Variation in der Preview
> an (siehe unten), bevor du das Experiment startest.

## Preview und Goals

* Nutze **Show in browser** im Menü der Variation oder die Preview des Experiments, um zu prüfen, wie das Theme oder
  Template aussieht. Siehe [Preview & QA](https://docs.ablyft.com/de/guides/experiments/preview-and-qa/).
* Goals funktionieren wie in jedem anderen Experiment. Siehe [Goal types](https://docs.ablyft.com/de/guides/goals-and-measurement/goal-types/).
  Für Käufe und Revenue in Shopify unterstützt ABlyft Order Tracking per Webhook oder per Customer Event Pixel, siehe
  [Shopify tracking](https://docs.ablyft.com/de/developers/tracking-and-events/shopify/).

## Verwandtes

Für Entwickler: Die zugrunde liegenden Funktionen sind `shopifyPreviewTheme` und `shopifySwitchTemplate` in den
[JavaScript tools](https://docs.ablyft.com/de/developers/reference/javascript-api/tools/#shopify).

## Nächste Schritte

- [Variations](https://docs.ablyft.com/de/guides/experiments/variations/): Alle Variation-Typen.
- [Preview & QA](https://docs.ablyft.com/de/guides/experiments/preview-and-qa/): Prüfe die Variation, bevor sie live geht.