200+ Projekte
erfolgreich abgeschlossen
Meine Arbeiten
Shopify, Webdesign & mehr.
Elite Cosmetics
Shopify
Hypeworld München
Shopify
Chin Chin's World
Shopify
Leandro Lopes Sunglasses
Shopify
Costhetic
Shopify
Velamont
Shopify
Masira
Shopify
Denza
Shopify
Conford
Shopify
Glow Home
Shopify
Flausemaus
Shopify
MH VIP Design Pfaffenhofen
Webseite
Klarblick Fenster
Webseite
OHZOE Pforzheim
Webseite
Denza Massagekerzen
Logo
go for Dubai
Logo
Italia World
Flyer
Flyer Pistazienpesto
Flyer
B Beautiful
Flyer
Montana Hotel
Logo + Visitenkarte
Corona Test Zentrum
Plakat
Keine Projekte in dieser Kategorie.
Du hast bereits alle Agenturen durch?
Dein externes Shopify Team.
01
Shopify Development
Custom Sections, Themes und Funktionen — praezise umgesetzt fuer deine Anforderungen.
02
Webseiten Design
Moderne, schnelle Webseiten mit klarer Struktur — designed fuer Conversion und Markenauftritt.
03
SEO Optimierung
Technisches SEO, On-Page Optimierung und strukturierte Daten fuer mehr organische Sichtbarkeit.
04
Shop Management
Laufende Betreuung deines Shops — Produkte, Apps, Updates und alles was taeglich anfaellt.
Kostenloser Website- & Shop-Audit
Wir analysieren deine Website auf SEO, Benutzerfreundlichkeit und Conversion-Potenzial – kostenlos und unverbindlich.
Wir könnten viel erzählen – unsere Kunden tun es bereits.
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.
