Produkt Preis Badge für Dringlichkeit - Shopify
Es geht los! 🚀
Hier findest du die Installationsanleitung und den Code, um den Block direkt in deinen Shop einzubinden. Nutze diese Anleitung, um deinen Shop schnell und unkompliziert zu verbessern.
Viel Erfolg beim Einrichten und Anpassen!
So sieht es in wenigen Minuten bei Dir aus! ⚡
- Erhöhte Dringlichkeit: Fördert schnelle Kaufentscheidungen durch begrenzte Angebote
- Attraktive Sichtbarkeit: Zieht die Aufmerksamkeit auf wichtige Produktinformationen oder Sonderaktionen.
Und so funktioniert es!
1. Shopify Dashboard > Onlineshop > Theme > Code bearbeiten
2. Sections (Abschnitte) > main-product.liquid (oder eine andere Produktseite)
3. Im Code nach "{%- case block.type -%} {%- when '@app' -%} {% render block %}" suchen > unterhalb davon den Code einfügen
{%- when ‘speech_bubble’ -%}
<div
class=”speech-bubble {{ block.settings.pointer_direction }}”
style=”
–speech-bubble-bg-color: {{ block.settings.background_color }};
–speech-bubble-font-color: {{ block.settings.font_color }};
–speech-bubble-font-size: {{ block.settings.font_size }}px;
–speech-bubble-font-family: {{ block.settings.font_family }};
“
>
{{ block.settings.bubble_text }}
</div>
4. nach "{% schema %}" suchen > nach ""blocks": [ { "type": "@app" }," den Code einfügen
{
“type”: “speech_bubble”,
“name”: “sayweb – Sprechblase”,
“settings”: [
{
“type”: “select”,
“id”: “pointer_direction”,
“label”: “Richtung des Zeigers”,
“options”: [
{
“value”: “up-left”,
“label”: “Oben Links”
},
{
“value”: “down-left”,
“label”: “Unten Links”
}
],
“default”: “up-left”
},
{
“type”: “text”,
“id”: “bubble_text”,
“label”: “Text der Sprechblase”,
“default”: “Ihr Text hier”
},
{
“type”: “color”,
“id”: “background_color”,
“label”: “Hintergrundfarbe”,
“default”: “#ffffff”
},
{
“type”: “color”,
“id”: “font_color”,
“label”: “Schriftfarbe”,
“default”: “#000000”
},
{
“type”: “range”,
“id”: “font_size”,
“label”: “Schriftgröße (px)”,
“min”: 12,
“max”: 36,
“step”: 1,
“default”: 16
},
{
“type”: “select”,
“id”: “font_family”,
“label”: “Schriftart”,
“options”: [
{
“value”: “Arial, sans-serif”,
“label”: “Arial”
},
{
“value”: “‘Helvetica Neue’, Helvetica, sans-serif”,
“label”: “Helvetica Neue”
},
{
“value”: “‘Times New Roman’, Times, serif”,
“label”: “Times New Roman”
},
{
“value”: “‘Courier New’, Courier, monospace”,
“label”: “Courier New”
},
{
“value”: “‘Georgia’, serif”,
“label”: “Georgia”
}
],
“default”: “Arial, sans-serif”
}
]
},
5. "section-main-product.css" (oder andere dazugehörige .css) suchen und öffnen > suche nach "/* Product info */" > füge den Code unterhalb ein
/* Sprechblase Styles mit CSS-Variablen */
.speech-bubble {
position: relative;
padding: 15px 20px;
border-radius: 15px;
max-width: 300px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
margin: 20px auto; /* Zentriert die Sprechblase */
background-color: var(–speech-bubble-bg-color, #ffffff); /* Fallback auf Weiß */
color: var(–speech-bubble-font-color, #000000); /* Fallback auf Schwarz */
font-size: var(–speech-bubble-font-size, 16px); /* Fallback auf 16px */
font-family: var(–speech-bubble-font-family, Arial, sans-serif); /* Fallback auf Arial */
display: inline-block; /* Ermöglicht dynamische Breitenanpassung */
}
/* Linkseitige Spitze */
.speech-bubble.up-left::after,
.speech-bubble.down-left::after {
content: “”;
position: absolute;
left: 20px;
width: 0;
height: 0;
border: 10px solid transparent;
}
.speech-bubble.up-left::after {
bottom: -20px;
border-top-color: var(–speech-bubble-bg-color, #ffffff); /* Spitze oben */
}
.speech-bubble.down-left::after {
top: -20px;
border-bottom-color: var(–speech-bubble-bg-color, #ffffff); /* Spitze unten */
}
/* Rechtseitige Spitze */
.speech-bubble.up-right::after,
.speech-bubble.down-right::after {
content: “”;
position: absolute;
right: 20px;
width: 0;
height: 0;
border: 10px solid transparent;
}
.speech-bubble.up-right::after {
bottom: -20px;
border-top-color: var(–speech-bubble-bg-color, #ffffff); /* Spitze oben */
}
.speech-bubble.down-right::after {
top: -20px;
border-bottom-color: var(–speech-bubble-bg-color, #ffffff); /* Spitze unten */
}
/* Responsive Anpassungen */
@media (max-width: 600px) {
.speech-bubble {
max-width: 90%;
font-size: var(–speech-bubble-font-size, 14px); /* Anpassung für kleinere Bildschirme */
padding: 10px 15px;
}
/* Linkseitige Spitze Anpassungen */
.speech-bubble.up-left::after,
.speech-bubble.down-left::after {
left: 15px;
border-width: 8px;
}
/* Rechtseitige Spitze Anpassungen */
.speech-bubble.up-right::after,
.speech-bubble.down-right::after {
right: 15px;
border-width: 8px;
}
.speech-bubble.up-left::after {
bottom: -16px;
}
.speech-bubble.down-left::after {
top: -16px;
}
.speech-bubble.up-right::after {
bottom: -16px;
}
.speech-bubble.down-right::after {
top: -16px;
}
}
6. Shopify-Dashboard > Onlineshop > Theme anpassen > Produktinformationen > Block hinzufügen > Block auswählen
7. Alles erledigt! ✅ Der Block kann jetzt deiner Produktseite hinzugefügt und im Onlineshop angezeigt werden!
- 19. September 2024
Preis Badge-Block für Shopify
Mit dem Preis Badge-Block können Sie wichtige Produktinformationen und zeitlich begrenzte Angebote prominent auf Ihren Produktseiten präsentieren. Die anpassbare Sprechblase zieht sofort die Aufmerksamkeit der Kunden auf sich und steigert die Dringlichkeit, wodurch schnelle Kaufentscheidungen gefördert werden. Benutzerfreundlich über den Shopify Theme-Editor konfigurierbar, ermöglicht dieser Block die individuelle Anpassung von Schriftfarbe, -größe und -typ sowie die Positionierung der Sprechblasen-Spitze. Dank des responsiven Designs passt sich der Produkthinweis nahtlos allen Endgeräten an und sorgt für eine optimale Sichtbarkeit und Benutzererfahrung.
Hast Du schon diese Sections?
- Alle Beiträge
- Anleitungen
Zahlungsmethoden – Shopify payment icon Es geht los! 🚀 Hier findest du die Installationsanleitung und den Code, um den Block…
Lieferdatum Hinweis im Warenkorb – Shopify Es geht los! 🚀 Hier findest du die Installationsanleitung und den Code, um die…
Circle Menu Shopify Jetzt geht´s los 🚀 Auf dieser Seite findest du die notwendige Installationsanleitung sowie den Code, um die…
Kontakt
Brauchst du Custom Sections?
Optimiere Deinen Shopify-Onlineshop mit uns. Kontaktiere uns, um Deine spezifischen Bedürfnisse zu besprechen.