Lägg till en kort dekorativ text före ett befintligt element utan att dölja dess riktiga innehåll.
Guiden gäller administratörer som kan HTML och CSS och använder ett Diversity-tema i Go, Plus eller Pro. ::before är ett pseudo-element, inte en CSS-klass. Exemplen gäller bara när temat använder de angivna klasserna. TPL och andra komponenter kan ha annan struktur.
1. Kontrollera om texten ska ändras i innehållet
Rätta produktnamn, beskrivningar, priser och temats vanliga texter i deras egna fält. CSS med content skapar bara en visuell tilläggstext. Använd det inte som enda bärare av viktig information, eftersom genererat innehåll inte är tillförlitligt tillgängligt för alla skärmläsare. Pris, rabattvillkor, lagerstatus och köpvillkor ska vara riktiga uppgifter i innehållet.
Om oväntad text visas på en produkt, undersök produktfält, import och integrationer innan du döljer något. En text är inte automatiskt ett CSS-problem.
2. Hitta rätt element
Öppna butikssidan, högerklicka på texten och välj webbläsarens funktion för att inspektera elementet. I exemplet har rabattetiketten klasserna tws-article-labels--special-offer och tws-article-labels--label-text. Kontrollera att samma struktur finns i ditt tema.
Bilden visar en äldre etikett med en beräknad rabatt. Den uppgiften ska fortsätta vara synlig; använd inte rabattetiketten som en allmän märkning för produkter utan verklig rabatt.
3. Lägg till texten och behåll rabatten
Spara en kopia av befintlig CSS. Öppna Utseende → Teman → Redigera för rätt tema och sedan Stil → Egen CSS. Följande regel lägger till en text före rabattuppgiften:
.tws-article-labels--special-offer .tws-article-labels--label-text::before {
content: "Erbjudande ";
}För olika språk kan du i stället använda:
:lang(sv) .tws-article-labels--special-offer .tws-article-labels--label-text::before {
content: "Erbjudande ";
}
:lang(en) .tws-article-labels--special-offer .tws-article-labels--label-text::before {
content: "Special offer ";
}:lang(sv) och :lang(en) matchar elementets språk, som kan ärvas från sidan. Lägg till regler för de språk du faktiskt använder. Detta översätter inte produktdata eller text i bilder.
Den äldre bilden ovan visar principen att lägga text före rabattvärdet. Spara sedan och kontrollera den färdiga sidan, inte bara provet i webbläsarens utvecklarverktyg.
4. Undvik att dölja originaltexten
Denna äldre illustration visar font-size: 0 på originaletiketten. Följ inte det steget för att ersätta rabattinformationen: regeln döljer också rabattvärdet. Behåll originaltexten och ändra bara det avsedda tillägget. Ska en rabatt ändras måste du ändra den riktiga prisinställningen.
Kontrollera och återställ
Kontrollera produktlista och produktsida på mobil och dator, med och utan rabatt och på butikens språk. Säkerställ att den faktiska rabatten fortfarande är läsbar. Om tillägget saknas, kontrollera selektor, content, språk och den regel som vinner i kaskaden. Om resultatet blir fel, ta bort just den tillagda regeln eller återställ den från din kopia. Radera inte all egen CSS. Gör om kontrollen när du byter tema.
För fördjupning finns introduktionen till pseudo-element och beskrivningen av :lang.
Snabbstart
Kontrollera att uppgiften är dekorativ och inte ska rättas i innehållsfälten.
Inspektera det verkliga elementet och spara en kopia av CSS:en.
Lägg till en avgränsad ::before-regel utan att dölja originaltext.
Spara och kontrollera rabatt, språk, mobil och dator.
Abonnemang och tema
Egen CSS finns i Go, Plus och Pro. Klasser och menyvägar i exemplet gäller Diversity och behöver kontrolleras mot butikens aktiva tema.
