Bulkneedz ist eine spezialisierte E-Commerce-Plattform für „Bulk Deals“ rund um limitierte Sneaker-Releases. Entwickelt von UNHYDE, erzeugt die Plattform gezielt Dringlichkeit über zeitlich befristete Deals und ein Echtzeit-Stock-Interface. Durch die Verbindung von Shopifys stabilen E-Commerce-Funktionen mit maßgeschneiderten Frontend-Features wie Countdown-Timer und dynamischer Lagerstandsanzeige wird der Einkauf zu einem interaktiven, zeitkritischen Erlebnis.
Die Lösung kombiniert Shopifys Standard-Funktionalität mit Custom JavaScript für dynamische Frontend-Updates. Shopify liefert die autoritative Bestandsquelle, während das Frontend verbleibende Einheiten und Zeit bis zum Dealende in Echtzeit zeigt. Dadurch entsteht eine nahtlose Verbindung zwischen robustem Backend und reaktionsschneller UI.
Ziel: Live-Countdown, der bei Ablauf automatisch endet oder zurückgesetzt wird. Die Endzeit wird aus einem Produkt-Metafield bezogen.
Technologien: Liquid (für Metafield-Ausgabe), JavaScript (für Client-seitige Berechnung und Rendering).
Liquid-Beispiel (Auszug):
Liquid:
<!-- product.liquid or a section template -->
{%- comment -%}
We first check if the product has a metafield called `countdown_end`
in the `custom` namespace. If it exists, we assign that to `deal_end_time`.
Otherwise, we use a fallback date.
{%- endcomment -%}
{% if product.metafields.custom.countdown_end %}
{% assign deal_end_time = product.metafields.custom.countdown_end %}
{% else %}
{% assign deal_end_time = '2025-03-01 23:59:59' %}
{% endif %}
<div id="countdown-timer"
data-deal-end-time="{{ deal_end_time | date: '%Y/%m/%d %H:%M:%S' }}">
</div>
<script>
(function() {
const countdownElement = document.getElementById('countdown-timer');
const dealEndTimeStr = countdownElement.dataset.dealEndTime;
const dealEndTime = new Date(dealEndTimeStr).getTime();
function updateCountdown() {
const now = new Date().getTime();
const distance = dealEndTime - now;
if (distance <= 0) {
countdownElement.innerHTML = "Deal Closed";
// Optionally disable purchase button or handle deal closure logic
return;
}
// Calculate remaining days, hours, minutes, seconds
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24))
/ (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60))
/ (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60))
/ 1000);
// Render in the HTML element
countdownElement.innerHTML =
`${days}d ${hours}h ${minutes}m ${seconds}s`;
}
// Update the countdown every second
setInterval(updateCountdown, 1000);
updateCountdown(); // Run once on page load
})();
</script>
Funktionsweise:
product.metafields.custom.countdown_end liefert die Endzeit pro Produkt.countdown_start) kann ein Startzeitpunkt verwaltet werden.
Ziel: Restbestand in Echtzeit zeigen und Fortschrittsanzeige dynamisch mitführen.
Technologien: Liquid (Initialwert Bestände), JavaScript (UI-Update per Event oder API-Rückmeldung).
Liquid-Beispiel (Auszug):
Liquid:
<!-- product.liquid or a section template -->
{% assign total_stock = product.variants.first.inventory_quantity %}
<div class="stock-container">
<p>Stock remaining: <span id="stock-remaining">{{ total_stock }}</span></p>
<div class="stock-bar" style="border: 1px solid #000; width: 100%; height: 20px;">
<div id="stock-progress" style="background: #FF4500; height: 100%; width: 0%;">
</div>
</div>
</div>
<script>
(function() {
const totalStock = parseInt("{{ total_stock }}", 10);
const stockRemainingElement = document.getElementById('stock-remaining');
const stockProgressElement = document.getElementById('stock-progress');
// Function to update the progress bar
function updateStockProgress(currentStock) {
// Calculate the percentage of stock used (or remaining)
const percentage = ((totalStock - currentStock) / totalStock) * 100;
stockProgressElement.style.width = percentage + '%';
}
// On page load, set initial progress
let currentStock = totalStock;
updateStockProgress(currentStock);
// Example: If an item is purchased, decrease the current stock by 1
// This could be triggered by a real event or an API callback
document.addEventListener('purchaseMade', function() {
currentStock -= 1;
if (currentStock < 0) currentStock = 0;
// Update UI
stockRemainingElement.innerText = currentStock;
updateStockProgress(currentStock);
});
})();
</script>
Funktionsweise:
purchaseMade), das nach Checkout oder AJAX-Kauf ausgelöst werden kann.
Die Kombination aus strategischem UX-Design, zielgerichteten Custom-Features und einer stabilen Shopify-Basis macht Bulkneedz zu einer Plattform mit hoher Conversion-Power. Countdown und Live-Stock sind die zentralen Trigger der Customer Journey und vermitteln glasklar, wie knapp Zeit und Bestand sind. Die Pflege der Deal-Zeiten per Produkt-Metafield ermöglicht individuelle Zeitpläne pro Produkt ohne Hardcoding und vereinfacht das Content- und Kampagnen-Management erheblich. Marken, die ähnliche Dringlichkeitsmechaniken implementieren möchten, erreichen mit Shopifys Bestandssystem plus schlanker JavaScript-Logik eine skalierbare und wirkungsvolle Lösung, die Kaufentscheidungen beschleunigt und das Einkaufserlebnis fühlbar intensiviert.
UNHYDE ist eine Web- und Shopify-Agentur aus München mit Fokus auf Webentwicklung, UX/UI und Performance. Unser Ziel sind performante, skalierbare Plattformen, die messbares Wachstum und starke Markenerlebnisse liefern. Als anerkannter Shopify Partner hat UNHYDE zahlreiche Websites und Webshops weltweit erfolgreich gelauncht. Kontakt: hello@unhyde.me – wir entwickeln gern eine auf deine Ziele zugeschnittene Lösung für Live-Stock, Countdowns und Bulk-Deals.
Get in touch
contact now