Shopify - Preise mit Varify.io testen

Zuletzt aktualisiert am 22. Apr. 20265 Min. Lesezeit

Inhaltsverzeichnis

• Kurz gefasst
• Warum Shopify-Preise testen?
• Schritt 1: Filter erstellen und Preise anpassen
• Schritt 2: Die relevanten CSS-Selektoren identifizieren
• Schritt 3: Code für das Experiment anpassen
• Schritt 4: Neues Experiment speichern

Kurz gefasst

Um herauszufinden, bei welchem Preis deine Produkte den besten Deckungsbeitrag erzielen, kannst du Preistests durchführen. Für das entsprechende zu testende Produkt wird ein zusätzlicher Variantenfilter hinzugefügt. Über diesen Filter legst du den alternativen Preis fest.

Das Experiment ist für den Nutzer unsichtbar, da der Preisfilter für den Nutzer nicht sichtbar ist. Ein JavaScript-Code im A/B-Test sorgt dann dafür, dass je nach Variante entweder der Originalpreis oder der zu testende Preis auf der Produktdetailseite (PDP) angezeigt wird.

Damit der neue Preis auch auf den Kategorieseiten (Collection Pages) angezeigt wird und der Preisfilter nicht sichtbar ist, trage die URLs der zu testenden Produkte in den bereitgestellten JavaScript-Code ein.

Warum Shopify-Preise testen?

Preistests auf Shopify helfen dir herauszufinden, welcher Preis für ein Produkt am besten funktioniert – also welcher Preis zu mehr Verkäufen oder höherem Umsatz führt. Gezielte A/B-Tests ermöglichen es dir, verschiedene Preisvarianten gleichzeitig zu testen, ohne das Einkaufserlebnis zu stören. So kannst du datenbasierte Entscheidungen treffen und deinen Store für mehr Erfolg optimieren.

Schritt 1: Filter erstellen und Preise anpassen

1. Öffne das Produkt im Shopify-Backend, für das du den Preis testen möchtest.
2. Erstelle eine neue Variante mit dem „Option name“ „varify-pricing-test“.
3. Erstelle dafür zwei „Option values“: „Control“ und „Variation“.

1. Falls das Produkt weitere Varianten hat, wie zum Beispiel einen Farbfilter, ziehe den Variantenfilter per Drag & Drop nach oben, sodass er über den anderen Filtern positioniert ist. Das ist wichtig, damit der Test korrekt funktioniert.

1. Lege für jede Produktvariante den neuen zu testenden Preis in der Preisvariante „varify-pricing-test“ fest.

• Tipp: Aktiviere „Group by varify-pricing-test“, um die Varianten besser zu verwalten.
• Wenn du unterschiedliche Varianten oder Farben hast, solltest du hier auch den Variantenpreis anpassen
• Denke außerdem daran, die verfügbare Menge anzupassen, damit das Produkt im Store verfügbar ist.
  Wenn du beispielsweise 1.000 Einheiten des Produkts auf Lager hast, kannst du 500 Einheiten für den Originalpreis und 500 Einheiten für den neuen Variantenpreis festlegen.

Schritt 2: Die relevanten CSS-Selektoren identifizieren

Finde nun die CSS-Selektoren für die Elemente:

• Price filter
• Product card auf der Collection-Seite
• Price auf der Collection-Seite.

Preisfilter

• Öffne eine Produktdetailseite (PDP), auf der du den Preisfilter eingerichtet hast und auf der das Experiment durchgeführt werden soll
• Öffne die Entwicklertools (F12 oder Rechtsklick > „Untersuchen“).
• Verwende das Inspektionstool, um das neu erstellte varify-pricing-test-Filterelement auszuwählen, sodass es vollständig hervorgehoben ist – so stellst du sicher, dass du den richtigen Selektor identifiziert hast.
  • In diesem Beispiel wird das erste <div>-Element im <variant-selects>-Element ausgewählt. Je nach Template können Struktur, HTML-Tags und Klassen anders benannt sein.

• Klicke mit der rechten Maustaste auf die hervorgehobene Position im Code und wähle dann: Copy → Copy selector
  Dadurch wird der exakte CSS-Selektor für den Preisfilter kopiert.

• Es ist am besten, den kopierten Selektor in einem Dokument oder einer Notiz zu speichern - du wirst ihn bald wieder brauchen.

Produktkarte auf der Kollektionsseite

• Öffne eine Kollektionsseite.
• Untersuche die Seite (F12 oder Rechtsklick > "Untersuchen") und wähle ein Produktkarten-Element aus.
• Finde das übergeordnete Element der Karte - normalerweise ist das äußere Element der Produktkarte ein Listenelement.
  • Kopiere die Klasse erneut über "Copy selector" und speichere sie in demselben Dokument, in dem du den Selektor für den Preisfilter gespeichert hast

Preis auf der Kollektionsseite

• Öffne die Produktkachel auf der Collection-Seite erneut in den Entwicklertools.
• Gehe tiefer in die Struktur der Map und suche nach dem „Price“-Element
• Stelle sicher, dass du wirklich das Element auswählst, das während des Tests geändert werden soll – also den spezifischen Text oder HTML-Block, der den Preis anzeigt.

• In diesem Fall die Klasse des Preiselements price__regular. Sie kann bei deiner Seite anders sein.
• Kopiere diesen Klassennamen mit „Copy selector“ und speichere ihn zusammen mit den beiden anderen bisher ermittelten Klassennamen

Schritt 3: Code für das Experiment anpassen

Erstelle ein neues Experiment über das Varify Dashboard. Gib dazu die Store-Startseite in das Eingabefeld ein und klicke auf „Create new Experiment“. Unten findest du den JavaScript-Code für den Preistest. Füge diesen mit der Funktion „Add JS“ zur Variante deines Experiments hinzu.

Damit der Preistest auch technisch in deinem Shop funktioniert, müssen ein paar Anpassungen am bereitgestellten JavaScript-Code vorgenommen werden. Ändere das JavaScript in deiner Variante wie folgt:

Zeile 1: Füge den kopierten CSS-Selektor für den Preisfilter in die Anführungszeichen ein.

Zeile 2: Gib die Klasse des Preises an - also das Element, das später geändert werden soll.

Zeile 3: Gib die Klasse der Produktkachel an, damit der Code weiß, wo sich der Preis auf der Kollektionsseite befindet.

Ab Zeile 7: Füge hier alle Produkt-URLs hinzu, auf denen der Preistest durchgeführt werden soll. (Wenn du einen Preistest nur für ein Produkt durchführst, musst du hier nur eine URL hinzufügen und kannst die anderen URLs löschen). Achte darauf, dass du das entsprechende Format der URLs ('URL') beibehältst. Füge nach jeder 'URL' ein Komma hinzu, wenn weitere URLs folgen.

💡 Hinweis: Der Preis auf den Kategorieseiten wird vollständig durch den Code ersetzt. Falls zusätzliche Währungssymbole oder Wörter wie „ab" an den Preis angehängt werden, kannst du diese direkt im Code anpassen (Zeile 81)

Ohne zusätzlichen Text:
z. B. neuer Preis -> 25,99

priceElement.textContent = `${newPrice}`;

Mit zusätzlichem Text:
z. B. neuer Preis -> Ab 25,99 EUR

priceElement.textContent = `From ${newPrice} EUR`;

JavaScript-Code für den Preistest

const varifyPriceFilterSelector = '#variant-selects-template--25418368778580__main > div:nth-child(1)';
const priceClass = 'price__regular';
const cardClass = 'grid__item';
const desiredVariantOption = 'Variation'; // Variation or Control

// Only URLs – variant IDs no longer required
const productURLs = [
    'https://demo-shop.com/products/article1',
    'https://demo-shop.com/products/article2',
    'https://demo-shop.com/products/article3'
];

const updatedHandles = new Set();

function hidePriceFilterOnMatchingProductPages() {
    const currentURL = window.location.href;
    const matchesProductPage = productURLs.some(url => currentURL.includes(url));

    if (matchesProductPage && varifyPriceFilterSelector) {
        const style = document.createElement('style');
        style.textContent = `
      ${varifyPriceFilterSelector} {
        display: none !important;
      }
    `;
        document.head.appendChild(style);
        console.log('Hiding price filter on matching product page:', varifyPriceFilterSelector);
    }
}

hidePriceFilterOnMatchingProductPages();

function formatPrice(priceInCents) {
    return (priceInCents / 100).toFixed(2);
}

function extractHandleFromHref(href) {
    const match = href.match(/\/products\/([^/?#]+)/);
    return match ? match[1] : null;
}

function extractHandlesFromURLs(urls) {
    return urls.map(extractHandleFromHref).filter(Boolean);
}

function updateProducts(retryCount = 0) {
    const productCards = document.querySelectorAll(`.${cardClass}`);
    const allowedHandles = extractHandlesFromURLs(productURLs);

    if (productCards.length === 0 && retryCount < 5) {
        console.warn(`No product cards found – retrying (${retryCount + 1}/5)`);
        setTimeout(() => updateProducts(retryCount + 1), 300);
        return;
    }

    allowedHandles.forEach((handle) => {
        if (updatedHandles.has(handle)) return;

        fetch(`/products/${handle}.js`)
            .then(response => response.json())
            .then(product => {
                const targetVariant = product.variants.find(v => v.option1 === desiredVariantOption);
                if (!targetVariant) {
                    console.warn(`No variant found with option1 === '${desiredVariantOption}' for "${handle}"`);
                    return;
                }

                let updated = false;

                productCards.forEach(card => {
                    const link = card.querySelector('a[href*="/products/"]');
                    if (!link) return;

                    const href = link.getAttribute('href');
                    const linkHandle = extractHandleFromHref(href);

                    if (linkHandle === handle) {
                        const priceElement = card.querySelector(`.${priceClass}`);
                        if (priceElement) {
                            const oldPrice = priceElement.textContent.trim();
                            const newPrice = formatPrice(targetVariant.price);
                            priceElement.textContent = `${newPrice}`;

                            console.log(`"${product.title}" – Price updated: ${oldPrice} → €${newPrice}`);
                        }

                        const imageElement = card.querySelector('.product-card-image img');
                        if (imageElement && targetVariant.featured_image) {
                            imageElement.src = targetVariant.featured_image.src;
                            console.log(`Image updated for "${product.title}".`);
                        }

                        // Update link with ?variant=...
                        const url = new URL(link.href, window.location.origin);
                        url.searchParams.set('variant', targetVariant.id);
                        link.href = url.toString();

                        updated = true;
                    }
                });

                if (updated) {
                    updatedHandles.add(handle);
                }
            })
            .catch(error => {
                console.error(`Error loading product "${handle}":`, error);
            });
    });
}

// Optional: Set filter selection on the PDP
function setPriceFilter() {
    const selectElement = document.querySelector(`${varifyPriceFilterSelector} select`);
    if (selectElement) {
        selectElement.value = desiredVariantOption;
        selectElement.dispatchEvent(new Event('input', { bubbles: true }));
        selectElement.dispatchEvent(new Event('change', { bubbles: true }));
    }
}

// Initial call after DOM ready
window.varify.helpers.onDomLoaded(() => {
    setPriceFilter();
    updateProducts();
});

// Optional: Repeat on DOM changes
window.varify.helpers.onDomChanged(() => {
    updateProducts();
});

Schritt 4: Neues Experiment speichern

1. Speichere das Experiment und gib ihm einen Namen
2. Dupliziere die erstellte Variante in dem neu erstellten Experiment und benenne sie in „New Original" um.
3. Klicke auf „Edit", um „New Original" zu bearbeiten.
4. Öffne das JavaScript-Fenster und ändere die Variable in Zeile 4 von 'Variation' zu 'Controll'.
5. Speichere die Änderungen.
6. Stelle den Split für den Test auf 50:50 zwischen „Variation 1" und „New Control". „Original" erhält 0 %.
7. Passe das Page Targeting an und setze es auf „Contains" mit deiner Store-URL.
8. Starte das Experiment.

Hinweis: Varify übernimmt keine Verantwortung für die Funktionalität des Codes und der Informationen.
Es liegt in der Verantwortung des Nutzers, den Code gründlich zu testen und ihn korrekt zu implementieren.