Kostenlose Code Snippets
Benutzerdefiniertes Liquid für deinen Shopify-Shop – einfach kopieren & einfügen.
3 Snippets verfügbar
Lieferdatum Badge
Zeigt Kunden dynamisch das voraussichtliche Lieferdatum direkt auf der Produktseite an.
[%- assign delivery_date = "now" | date: "%s" | plus: 345600 | date: "%d.%m.%Y" -%]
<style>
.shipping-banner {
background-color: transparent;
border: none;
padding: 8px 12px;
display: flex;
align-items: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
}
.shipping-info {
display: flex;
align-items: center;
}
.green-dot {
width: 8px;
height: 8px;
background-color: #4CAF50;
border-radius: 50%;
margin-right: 6px;
flex-shrink: 0;
display: inline-block;
}
.shipping-text {
font-size: 14px;
color: #000;
font-weight: bold;
}
.shipping-text b {
background-color: transparent;
color: #000;
}
</style>
<div class="shipping-banner">
<div class="shipping-info">
<span class="green-dot"></span>
<span class="shipping-text">Auf Lager – vsl. am <b>[[ delivery_date ]]</b> bei dir</span>
</div>
</div>
Rabattcode Banner
Kompakter Aktionsbalken mit kopierbarem Rabattcode – ein Klick kopiert den Code direkt in die Zwischenablage.
<style>
.km-promo-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
padding: 10px 20px;
background: #F7F4EF;
border-radius: 10px;
border: 1px solid #e5e0d8;
}
.km-promo-badge {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #fff;
background: #2B2B2B;
border-radius: 6px;
padding: 3px 9px;
line-height: 1.4;
flex-shrink: 0;
}
.km-promo-text {
font-size: 13px;
color: #2B2B2B;
font-weight: 400;
letter-spacing: 0.01em;
}
.km-promo-sep {
width: 1px;
height: 16px;
background: #D8CFC4;
flex-shrink: 0;
}
.km-promo-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 13px;
background: transparent;
color: #2B2B2B;
border: 1px dashed #2B2B2B;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
font-family: inherit;
transition: all 0.2s ease;
white-space: nowrap;
}
.km-promo-btn:hover {
border-style: solid;
background: #2B2B2B;
color: #F7F4EF;
}
.km-promo-btn:hover .km-promo-hint { opacity: 1; color: #F7F4EF; }
.km-promo-btn.km-copied { border-style: solid; background: #2B2B2B; color: #F7F4EF; opacity: 0.6; }
.km-promo-hint {
font-size: 9px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.4;
transition: all 0.2s;
}
@media (max-width: 600px) { .km-promo-sep { display: none; } }
</style>
<div class="km-promo-wrap">
<span class="km-promo-badge">Sale</span>
<span class="km-promo-text">Exklusiver Rabatt für unsere Community</span>
<div class="km-promo-sep"></div>
<button class="km-promo-btn" onclick="kmCopyCode(this)" data-code="SALE20" type="button">
SALE20
<span class="km-promo-hint">Kopieren</span>
</button>
</div>
<script>
function kmCopyCode(btn) {
var hint = btn.querySelector('.km-promo-hint');
navigator.clipboard.writeText(btn.getAttribute('data-code')).then(function() {
if (hint) hint.textContent = 'Kopiert!';
btn.classList.add('km-copied');
setTimeout(function() {
if (hint) hint.textContent = 'Kopieren';
btn.classList.remove('km-copied');
}, 2000);
});
}
</script>
Lieferzeiten Timeline
Visualisiert den Bestellprozess in drei Schritten mit automatisch berechneten Lieferdaten.
<style>
.km-delivery-wrap {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: #f9f8f6;
border-radius: 8px;
border: 1px solid #eae6e0;
}
.km-delivery-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex: 1;
position: relative;
z-index: 1;
}
.km-delivery-step:not(:last-child)::after {
content: '';
position: absolute;
top: 12px;
left: calc(50% + 12px);
right: calc(-50% + 12px);
height: 1px;
background: #d8d3cc;
}
.km-delivery-icon-wrap {
width: 24px;
height: 24px;
border-radius: 50%;
background: #fff;
border: 1px solid #dedad4;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.km-delivery-icon-wrap svg {
width: 11px;
height: 11px;
color: #5a5450;
}
.km-delivery-title {
font-size: 10px;
font-weight: 600;
color: #2b2b2b;
font-family: inherit;
text-align: center;
white-space: nowrap;
}
.km-delivery-date {
font-size: 9px;
font-weight: 400;
color: #999;
font-family: inherit;
text-align: center;
white-space: nowrap;
}
</style>
<div class="km-delivery-wrap">
<div class="km-delivery-step">
<div class="km-delivery-icon-wrap">
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 10V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7"></path><path d="M16 2v4M8 2v4M3 10h18"></path>
</svg>
</div>
<span class="km-delivery-title">Bestellt</span>
<span class="km-delivery-date" id="km-date-order"></span>
</div>
<div class="km-delivery-step">
<div class="km-delivery-icon-wrap">
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="1" y="3" width="15" height="13" rx="1"></rect><path d="M16 8h4l3 5v3h-7V8z"></path><circle cx="5.5" cy="18.5" r="2.5"></circle><circle cx="18.5" cy="18.5" r="2.5"></circle>
</svg>
</div>
<span class="km-delivery-title">Versandt</span>
<span class="km-delivery-date" id="km-date-dispatch"></span>
</div>
<div class="km-delivery-step">
<div class="km-delivery-icon-wrap">
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 1 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle>
</svg>
</div>
<span class="km-delivery-title">Geliefert</span>
<span class="km-delivery-date" id="km-date-delivery"></span>
</div>
</div>
<script>
(function() {
var months = ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'];
function fmt(d) { return d.getDate() + '. ' + months[d.getMonth()]; }
function addBiz(d, n) {
var r = new Date(d), added = 0;
while (added < n) { r.setDate(r.getDate()+1); if (r.getDay()!==0 && r.getDay()!==6) added++; }
return r;
}
var today = new Date();
var dispatch = addBiz(today, 1);
var delFrom = addBiz(today, 3);
var delTo = addBiz(today, 5);
document.getElementById('km-date-order').textContent = fmt(today);
document.getElementById('km-date-dispatch').textContent = fmt(dispatch);
document.getElementById('km-date-delivery').textContent = fmt(delFrom) + ' – ' + fmt(delTo);
})();
</script>
Keine Snippets gefunden.
In unter 3 Minuten in Deinem Shop
1.
Auf deiner Produktseite 'Benutzerdefiniertes Liquid' oder 'Custom Liquid' an einer beliebigen stelle hinzufügen.
2.
Unser Kostenloses Snippet Kopieren und einfügen.
