Der erfolgreiche Start eines Shopify-Startups hängt nicht nur von einer ansprechenden Homepage ab – sondern von funktionalen, interaktiven Elementen, die Besucher:innen zu Kund:innen machen. In diesem Artikel zeigen wir, wie du dein Shopify-Theme mit Liquid und JavaScript individuell anpasst und es mit erweiterten Funktionen wie Produktfiltern, einem optimierten Checkout, App-Integrationen, mobiler Optimierung, Analytics und Social-Media-Funktionen ausstattest. Diese Maßnahmen steigern nicht nur die Nutzererfahrung, sondern auch deine Conversion Rate.
Hebe neue Produkte automatisch hervor, indem du ein „New“-Badge für Artikel anzeigst, die in den letzten sieben Tagen hinzugefügt wurden.
liquid:
{% comment %} Display a "New" badge for products added within the last week {% endcomment %}
{% assign one_week_ago = 'now' | date: "%s" | minus: 604800 %}
{% for product in collections.frontpage.products %}
<div class="product-card">
<h2>{{ product.title }}</h2>
{% if product.created_at | date: "%s" > one_week_ago %}
<span class="badge badge-new">New</span>
{% endif %}
<p>{{ product.price | money }}</p>
</div>
{% endfor %}
Erklärung:
Der Code berechnet das Datum von vor einer Woche und überprüft, ob das Produkt neuer ist. Produkte, die innerhalb dieser Zeit erstellt wurden, erhalten automatisch ein sichtbares „New“-Label – ideal für dynamische Startseiten und saisonale Kollektionen.
Begrüße Erstbesucher:innen mit einer freundlichen Nachricht beim ersten Seitenaufruf.
javascript:
<script>
document.addEventListener("DOMContentLoaded", function() {
if (!sessionStorage.getItem('welcomeShown')) {
alert("Welcome to our brand-new store!");
sessionStorage.setItem('welcomeShown', true);
}
});
</script>
Erklärung:
Das Skript prüft, ob der Willkommenshinweis bereits in der aktuellen Browsersitzung angezeigt wurde. Falls nicht, erscheint eine einmalige Nachricht, um einen persönlichen Touch zu schaffen.
Ein funktionaler Filter steigert die Benutzerfreundlichkeit erheblich. Kund:innen finden Produkte schneller, was zu mehr Käufen führt.
liquid:
<!-- Liquid: Generate filter list -->
<ul id="filter-list">
{% for tag in collection.all_tags %}
<li><a href="#" data-tag="{{ tag }}">{{ tag }}</a></li>
{% endfor %}
</ul>
<div id="product-list">
{% for product in collection.products %}
<div class="product-card" data-tags="{{ product.tags | join: ' ' }}">
<h2>{{ product.title }}</h2>
<p>{{ product.price | money }}</p>
</div>
{% endfor %}
</div>
html:
<!-- JavaScript: Dynamic Filtering -->
<script>
document.querySelectorAll('#filter-list a').forEach(function(link) {
link.addEventListener('click', function(e) {
e.preventDefault();
const tag = this.getAttribute('data-tag');
document.querySelectorAll('#product-list .product-card').forEach(function(card) {
if(card.getAttribute('data-tags').includes(tag)) {
card.style.display = 'block';
} else {
card.style.display = 'none';
}
});
});
});
</script>
Erklärung:
Liquid generiert automatisch alle verfügbaren Produkt-Tags. Mit JavaScript werden Produkte dynamisch gefiltert, ohne dass die Seite neu geladen werden muss. Das sorgt für eine schnellere, interaktive Produktsuche und eine bessere UX.
Ein reibungsloser Checkout reduziert Kaufabbrüche. Nutzer:innen sollen so einfach wie möglich zum Abschluss gelangen.
ruby:
# This script grants a 10% discount if the cart exceeds a specified threshold
DISCOUNT_THRESHOLD = 10000 # Amount in cents
DISCOUNT_PERCENTAGE = 10
Input.cart.line_items.each do |line_item|
if Input.cart.subtotal_price >= Money.new(cents: DISCOUNT_THRESHOLD)
discount = line_item.line_price * (DISCOUNT_PERCENTAGE / 100.0)
line_item.change_line_price(line_item.line_price - discount, message: "10% Discount")
end
end
Output.cart = Input.cart
Erklärung:
Das Script prüft den Warenkorbwert und gewährt automatisch einen 10%-Rabatt, sobald der definierte Schwellenwert erreicht ist. Solche personalisierten Anreize erhöhen den durchschnittlichen Bestellwert und stärken die Kundenbindung.
Shopify bietet eine Vielzahl von Apps, um deinen Shop individuell zu erweitern:
Erklärung:
Diese Apps werden einfach über das Shopify Dashboard integriert und erfordern meist nur minimale Einrichtung. Sie verbessern Marketing-Automatisierung, Vertrauen und Wiederkäufe.
Da über 70 % des E-Commerce-Traffics über Smartphones läuft, ist ein mobil optimiertes Design unerlässlich.
css:
/* Standard layout for desktop */
.product-card {
width: 30%;
margin: 1%;
float: left;
}
/* Adjustments for mobile devices */
@media (max-width: 768px) {
.product-card {
width: 100%;
margin: 0 0 20px 0;
float: none;
}
}
Erklärung:
Mit CSS Media Queries passt sich das Layout automatisch der Bildschirmgröße an. So bleibt das Einkaufserlebnis konsistent und benutzerfreundlich – unabhängig vom Endgerät.
Neben Shopify Analytics helfen externe Tools dabei, Nutzerdaten noch präziser auszuwerten.
html:
<script>
// Track a click on a "Buy" button
document.querySelectorAll('.buy-button').forEach(function(button) {
button.addEventListener('click', function() {
gtag('event', 'click', {
'event_category': 'E-Commerce',
'event_label': 'Buy Button'
});
});
});
</script>
Erklärung:
Mit benutzerdefiniertem Event-Tracking (z. B. Google Analytics oder GA4) erfasst du Klicks auf zentrale Elemente wie Kauf-Buttons. So erkennst du, welche Elemente am besten performen und wo Optimierungspotenzial besteht.
Social Media ist ein wichtiger Kanal, um Reichweite und Markenbindung zu steigern. Durch Teilen-Funktionen machst du Produkte viral sichtbar.
html:
<div class="social-sharing">
<a href="https://www.facebook.com/sharer/sharer.php?u={{ shop.url }}" target="_blank">Share on Facebook</a>
<a href="https://twitter.com/intent/tweet?url={{ shop.url }}" target="_blank">Share on Twitter</a>
<a href="https://www.pinterest.com/pin/create/button/?url={{ shop.url }}" target="_blank">Pin it</a>
</div>
Erklärung:
Mit diesen einfachen Buttons können Besucher:innen Produkte direkt auf Facebook, Twitter oder Pinterest teilen. Das erhöht die organische Reichweite und bringt neuen Traffic auf deine Seite.
Ein erfolgreicher Shopify-Launch entsteht durch eine Kombination aus dynamischem Design, intelligenter Funktionalität und gezielter Datenanalyse. Durch Liquid- und JavaScript-Anpassungen, smarte Filter, optimierte Checkouts, App-Integrationen und responsive Layouts baust du ein nachhaltiges Fundament für Wachstum und Skalierung.
Diese Kombination sorgt dafür, dass dein Startup nicht nur gut aussieht – sondern konvertiert.
UNHYDE ist eine Shopify-Agentur aus München, spezialisiert auf Webentwicklung, UX-Design und Conversion-Optimierung. Wir entwickeln performante digitale Plattformen, die Wachstum messbar machen. Als zertifizierter Shopify Partner haben wir internationale Marken erfolgreich beim Launch und bei der Skalierung begleitet.
Für individuelle Beratung oder technische Umsetzung kontaktiere uns unter hello@unhyde.me.
Get in touch
contact now