Um ein Startup erfolgreich zu starten, braucht es mehr als nur eine ansprechende Homepage — es lebt von dynamischen, interaktiven und funktionalen Elementen, die Besucher zu treuen Kunden machen. In diesem Artikel behandeln wir nicht nur die Grundlagen der Anpassung Ihres Shopify-Themas mit Liquid und JavaScript, sondern untersuchen auch zusätzliche Funktionen. Dazu gehören erweiterte Produktfilterung, ein optimierter Checkout-Prozess, die Integration nützlicher Apps, Optimierung für Mobilgeräte, erweiterte Analysen und die Integration sozialer Medien. Solche Maßnahmen verbessern das Nutzererlebnis und steigern die Konversionsraten.
Um frische Produkte hervorzuheben, kannst du dynamisch ein „Neu“ -Badge für Artikel anzeigen, die innerhalb der letzten Woche hinzugefügt wurden.
{% 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 den Zeitstempel von vor einer Woche und durchläuft die Produkte auf der Titelseite. Wenn ein Produkt innerhalb dieses Zeitraums erstellt wurde, wird unter bestimmten Bedingungen ein Logo mit der Aufschrift „Neu“ angezeigt.
Verbessern Sie das Nutzererlebnis, indem Sie neue Besucher beim ersten Besuch Ihrer Website mit einer Willkommensnachricht begrüßen. Das folgende Skript zeigt beim Betreten eine einmalige Warnung an:
<script>
document.addEventListener("DOMContentLoaded", function() {
if (!sessionStorage.getItem('welcomeShown')) {
alert("Welcome to our brand-new store!");
sessionStorage.setItem('welcomeShown', true);
}
});
</script>
Erklärung:
Dieses Script prüft, ob während der aktuellen Sitzung bereits eine Willkommensnachricht angezeigt wurde. Wenn nicht, zeigt es eine Warnung an und setzt eine Markierung, um zu verhindern, dass die Nachricht erneut angezeigt wird.
Ein wichtiger Aspekt eines erfolgreichen Onlineshops ist es, Kunden das Auffinden von Produkten zu erleichtern. Durch die Implementierung fortschrittlicher Filter- und Sortierfunktionen können Besucher schnell finden, wonach sie suchen.
Verwenden Sie Liquid, um Filteroptionen aus Produktattributen zu generieren, und kombinieren Sie es mit JavaScript, um die Seite ohne erneutes Laden dynamisch zu aktualisieren:
flüssig:
<!-- 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:
Dieser Code generiert eine Liste aller Produkt-Tags und ermöglicht es Besuchern, auf ein Tag zu klicken, um Produkte, die diesem Tag entsprechen, dynamisch anzuzeigen. Die Kombination von Liquid und JavaScript verbessert die Benutzerfreundlichkeit und reduziert die Ladezeiten.
Ein reibungsloser Checkout-Prozess ist entscheidend, um einen Abbruch des Warenkorbs zu vermeiden. Shopify Plus bietet Shopify-Skripte an, mit denen Sie das Checkout-Erlebnis anpassen können.
Rubin
# 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:
Dieses Ruby-Skript überprüft die Zwischensumme des Warenkorbs und wendet automatisch einen Rabatt an, wenn ein definierter Schwellenwert überschritten wird. Solche Anreize können zu höheren Ausgaben führen und die Konversionsraten verbessern.
Shopify bietet eine Vielzahl von Apps, mit denen Sie die Funktionalität Ihres Shops erweitern können. Zu den Beispielen gehören:
Erklärung:
Diese Apps werden in der Regel über einfache Installationen und Einstellungsanpassungen im Shopify-Adminbereich integriert. Sie können beispielsweise automatische Folge-E-Mails einrichten oder Produktbewertungen dynamisch anzeigen.
Ein erheblicher Teil des Online-Traffics stammt von Mobilgeräten. Daher ist es wichtig, sicherzustellen, dass Ihr Geschäft auf allen Bildschirmgrößen optimal funktioniert.
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:
Mithilfe von CSS-Medienabfragen können Sie das Layout dynamisch an die Bildschirmgröße anpassen. Dadurch wird sichergestellt, dass Produktdarstellungen und andere Inhalte auf Mobilgeräten übersichtlich und benutzerfreundlich bleiben.
Neben den integrierten Analysen von Shopify können Sie zusätzliche Tracking-Tools wie Google Analytics oder Facebook Pixel verwenden, um das Besucherverhalten detailliert zu analysieren.
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:
Durch Hinzufügen eines benutzerdefinierten Event-Trackings können Sie wichtige Benutzerinteraktionen in Echtzeit überwachen. Dieser Einblick ermöglicht es Ihnen, potenzielle Verbesserungen im Verkaufsprozess zu identifizieren und entsprechend zu optimieren.
Die Integration sozialer Medien ist ein weiterer Hebel zur Umsatzsteigerung. Teilen Sie Ihre Produkte direkt auf Plattformen wie Facebook, Instagram oder Pinterest, indem Sie Schaltflächen zum Teilen in sozialen Netzwerken integrieren.
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:
Diese einfachen Links ermöglichen es Besuchern, Ihre Produkte auf ihren bevorzugten Social-Media-Kanälen zu teilen, was möglicherweise die Reichweite erhöht und mehr Besucher auf Ihre Website bringt.
Für weitere Einblicke oder wenn Sie bereit sind, Ihre Website auf das nächste Level zu heben, wenden Sie sich bitte an wenden Sie sich an uns bei UNHYDE®, der Webdesign-Agentur. Wir sind immer hier, um zusammenzuarbeiten und maßgeschneiderte Lösungen zu entwickeln, die Ihren individuellen Bedürfnissen entsprechen.
kostenloses erstgespräch
NEHMEN SIE KONTAKT AUF