Shopify - Versandkosten-Test mit Varify.io durchführen
Kurz gefasst
Um herauszufinden, bei welchen Versandkosten deine Produkte die höchste Conversion oder den besten Deckungsbeitrag erzielen, kannst du Versandkosten-Tests in Shopify durchführen. Füge dazu einen zusätzlichen Variantenfilter zu den zu testenden Produkten hinzu. Weise den jeweiligen Varianten ein neues Versandprofil mit den zu testenden Versandkosten zu.
Das Experiment bleibt für Nutzer unsichtbar, da der Variantenfilter im Store nicht angezeigt wird. Ein JavaScript-Code im A/B-Test sorgt dafür, dass je nach Variante entweder die ursprünglichen Versandkosten oder die Test-Versandkosten auf der Produktdetailseite (PDP) angezeigt werden.
Damit auch auf den Kategorieseiten (Collection-Seiten) die richtigen Versandkosten angezeigt werden und der Variantenfilter versteckt bleibt, hinterlege die URLs der zu testenden Produkte im bereitgestellten JavaScript-Code.
Warum Versandkosten in Shopify testen?
Versandkosten-Tests in Shopify helfen dir herauszufinden, welche Versandkostenhöhe am besten funktioniert - also welche Variante zu mehr Verkäufen oder höherem Umsatz führt. Gezielte A/B-Tests ermöglichen es dir, verschiedene Versandkosten gleichzeitig zu testen, ohne das Einkaufserlebnis zu beeinträchtigen. So kannst du datenbasierte Entscheidungen treffen und deinen Store für mehr Erfolg optimieren.
Schritt 1: Neue Produktvarianten erstellen
- Öffne im Shopify-Backend das Produkt, für das du die Versandkosten testen möchtest.
- Erstelle eine neue Variante mit dem "Optionsnamen" "varify-pricing-test".
- Erstelle dafür zwei "Optionswerte": "Control" und "Variation".
- Wenn das Produkt weitere Varianten hat, wie z. B. einen Farbfilter, ziehe den Variantenfilter per Drag & Drop nach oben, sodass er über den anderen Filtern positioniert ist. Dies ist wichtig, damit der Test korrekt funktioniert.
- Lege für jede Produktvariante in der Preisvariante "varify-pricing-test" den neuen zu testenden Preis 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 auch 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 ursprünglichen Preis und 500 Einheiten für den neuen Variantenpreis festlegen.
Schritt 2: Neues Versandprofil erstellen
Als Nächstes erstellen wir ein neues Versandkostenprofil, in dem wir die Höhe der zu testenden Versandkosten für die Produktvariante festlegen.
- Gehe zu "Einstellungen/Versand und Zustellung"
- Klicke auf "Individuelles Profil erstellen"
- Gib dem Profil einen Namen, zum Beispiel "Versandkosten-Experiment"
- Füge die Produktvarianten hinzu, die die zu testenden Versandkosten erhalten sollen
- Gib dem Profil einen Namen, zum Beispiel "Versandkosten-Experiment"
- Füge die Produktvarianten hinzu, die die zu testenden Versandkosten erhalten sollen
- Klicke nun auf "Versandzone hinzufügen" und definiere die Länder/Zonen, in die die Varianten versendet werden sollen. Hier solltest du die gleichen Zonen auswählen, in die du generell versendest
- Klicke auf "Tarif hinzufügen" und definiere die zu testenden Versandkosten
Schritt 3: Variantenfilter auf der Produktdetailseite (PDP) konfigurieren
Variantenfilter ausblenden
- Öffne eine Produktdetailseite (PDP), auf der du die Varianten für den Versandkosten-Test eingerichtet hast und auf der das Experiment durchgeführt werden soll
- Öffne die Entwicklertools (F12 oder Rechtsklick > "Untersuchen").
- Verwende das Inspektionswerkzeug, 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 die Struktur sowie HTML-Tags und -Klassen anders benannt sein.
- Klicke mit der rechten Maustaste auf die hervorgehobene Stelle im Code und wähle dann: Copy → Copy selector
Dies kopiert den exakten CSS-Selektor für den Preisfilter.
- Speichere den kopierten Selektor am besten in einem Dokument oder einer Notiz - du wirst ihn bald wieder benötigen.
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 der Variante deines Experiments über die Funktion "Add JS" hinzu.
Damit das Versandkosten-Experiment auch technisch in deinem Store funktioniert, müssen einige 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 Collection-Seite befindet.
Ab Zeile 8: Füge hier alle Produkt-URLs hinzu, auf denen das Versandkosten-Experiment durchgeführt werden soll. (Wenn du das Experiment nur für ein Produkt durchführst, musst du hier nur eine URL hinzufügen und kannst die anderen URLs löschen). Achte darauf, das entsprechende Format der URLs ('URL') beizubehalten. Füge nach jeder 'URL' ein Komma hinzu, wenn danach weitere URLs folgen.
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
- Speichere das Experiment und gib ihm einen Namen
- Dupliziere die erstellte Variante im neu erstellten Experiment und benenne sie in "New Original" um.
- Klicke auf "Edit", um das "New Original" zu bearbeiten.
- Öffne das JavaScript-Fenster und ändere die Variable in Zeile 4 von 'Variation' zu 'Controll
- Speichere die Änderungen.
- Setze den Split für den Test auf 50:50 zwischen "Variation 1" und "New Control". "Original" erhält 0 %.
- Passe das Page Targeting an und setze es auf "Contains" mit deiner Store-URL.
- Starte das Experiment.
