Rahmen um Text

[DCB]

Hallo zusammen

Könnt ihr mir kurz helfen zwecks einer Designtechnischen Bitte.

Ich möchte einen Rahmen / Sprechblase um einen bestimmten Text. (Siehe Bild)

Würde sowas mit einem Benutzerdefiniertem Liquid funktionieren?

Ich möchte einen anderen Text einfügen aber es wäre toll wenn die Sprechblase für dem Preis ist. Zurzeit sieht es auf unserer Seite so aus:

Ich hatte vor den Preis und den Streichpreis noch zu ändern, also die Position, jedoch muss ich diesen Code noch finden. ^^ 

Vielen Dank im Voraus!

[Gabe]

Hey @DCB 

Ja, du kannst eine Sprechblase oder einen Rahmen um einen Text in Shopify mit benutzerdefiniertem Liquid-Code und CSS erstellen. Liquid ermöglicht es dir, dynamische Inhalte in deinem Shop zu rendern, während du mit CSS das Aussehen dieser Inhalte anpassen kannst. 

Hier ist ein grundlegendes Beispiel, wie du eine Sprechblase um den Preis gestalten könntest - Liquid (innerhalb deines Produkttemplates):

<div class="price-bubble">
  <span class="original-price">{{ product.original_price | money }}</span>
  <span class="sale-price">{{ product.price | money }}</span>
  <span class="discount-percentage">-{{ product.discount_percentage }}%</span>
</div>

Hier etwas CSS (mehr dazu hier) :

.price-bubble {
  position: relative;
  padding: 10px;
  background-color: #ffffff; /* Hintergrundfarbe der Sprechblase */
  border: 2px solid #ff0000; /* Farbe des Rahmens */
  border-radius: 10px; /* Runde Ecken für die Sprechblase */
  display: inline-block;
  font-size: 16px; /* Angepasste Schriftgröße */
}

.price-bubble:before {
  content: '';
  position: absolute;
  bottom: -10px; /* Position der Spitze */
  left: 50%;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #ffffff; /* Hintergrundfarbe der Sprechblase */
  transform: translateX(-50%);
}

Um die Position der Preise und des Streichpreises zu ändern, müsstest du wahrscheinlich das HTML und CSS in deinen Shopify-Theme-Dateien anpassen. In der Regel findest du den relevanten Code im product-template.liquid oder einem ähnlichen Template, je nachdem, wie dein Theme aufgebaut ist.

Bei weiteren Fragen dazu kann ich gerne einen unserer zertifizierten Shopify Partner und Programmierer empfehlen. 

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[DCB]

Sehr tolle Nachricht, gibt es evtl. einen Code zum kopieren ? Ich bin im Coden leider nicht so affin^^ Basics kann ich, aber das erfordert doch mehr Wissen. 

[Gabe]

@DCB 

Du wirst das mit einem Programmierer machen müssen denn das verlangt einen Blick in deinen Theme und Code. 

Du findest welche wenn du deine Frage hier auf Englisch stellst.

Hoffe das hilft dir weiter! 😉

[DCB]

Habs jetzt die Frage hier nochmal gestellt.  "Du findest welche wenn du deine Frage hier auf Englisch stellst."

Danke Gabe!

[DCB]

Vielen Dank für die tolle und ausführliche Erklärung jedoch wurde es glaub ich falsch verstanden. 🙂

Ich brauch den Rahmen/Sprechblase über den preis, also das " 2,50€ pro Maniküre". Also gar nicht so kompliziert ^^ 

[Gabe]

@DCB 

Yup und verlangt trotzdem ein Experte um das zu programmieren, wenn es kein Theme gibt dass diese Sprechblase out-of-the-box anbietet. 

Es verlangt ja ein Algorithmus über Javascript das in das Kästchen ein-gecodet wird das den genauen Wert "€X pro {Produkt_ID}" ausrechnet - denn der Rabatt und die product_quantity kann sich ja auch ändern.

VG,

[DCB]

Nein nein, es braucht nicht ausgerechnet werden. 😥

Ich möchte es selbst reinschreiben. Also zum Beispiel "Bestseller" - Plain Text. Nichts kompliziertes 🙂

Ich brauche nur den Rahmen, den Text schreibe ist selbst rein.