Produktbeschreibung - Style Code globalisieren *Keine gute Beschreibung ich weiss*

[PB79]

Hallo Leute,

um mein Problem einmal kurz zu schildern:

Ich habe meinen Produkten in der Produktbeschreibung mit einem Online Tabellentool eine Tabelle hinzugefügt und diese farblich angepasst.

Nun befindet sich in jedem Produkt ein Klumpen riesigen Style Codes:

<style type="text/css"><!--
.tg {border-collapse:collapse;border-color:#ccc;border-spacing:0;}
.tg td{background-color:#fff;border-color:#ccc;border-style:solid;border-width:0px;color:#333;
font-family:Open Sans;font-size:14px;overflow:hidden;padding:
3px;word-break:normal;}
.tg th{background-color:#f0f0f0;border-color:#ccc;border-style:solid;border-width:0px;color:#333;
font-family:Open Sans;font-size:14px;font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-lboi{border-color:inherit;text-align:left;vertical-align:middle}
.tg .tg-d459{background-color:#f4f4f4;border-color:inherit;text-align:left;vertical-align:middle}
@media screen and (max-width: 767px) {.tg {width: auto !important;}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;margin: auto 0px;}
--></style>

Ich habe mir sagen lassen, dies wäre nicht wirklich toll und ich solle den Style global in meinem Theme anlegen.

Und leider weiss ich nicht wie ich das anstellen soll. Das ist totales Neuland für mich.

Wäre jemand so freundlich und kann mir das "umsetzen" bzw mir sagen was ich genau - wo editieren muss?

Den Sinn dahinter habe ich verstanden. Zum Beispiel kann ich Änderungen an der Optik anpassen ohne meine 3k+ Artikel als .csv erst exportieren zu müssen, dann anzupassen und dann erneut wieder zu importieren.

Was mir auch aufgefallen ist, daß wenn ich z.b meine Artikel irgendwo listen möchte, als Produktbeschreibung dort dann in der ersten Zeile auch den Code hier lese:

.tg {border-collapse:collapse;border-color:#ccc;border-spacing:0;}

Und das ist natürlich "unglücklich" 😉

Und sollte ich dann diesen Code Block aus meinen Produkten löschen wollen, hat jemand einen Tip für ein Tool dafür?

Ich habe meine .csv einmal als Google Tabelle hochgeladen, aber dort kann ich scheinbar nur einzeilig suchen+ersetzen.

Aber keinen ganzen Bereich löschen.

Beste Grüße,

Phil

[PB79]

Ich habe mit diesem Tool den Code Block "aufgeräumt"

https://html-css-js.com/css/editor/

Das würde dann folgendermassen aussehen:

<style type="text/css"><!--.tg {
border-collapse:collapse;
border-color:#ccc;
border-spacing:0;
}
.tg td{
background-color:#fff;
border-color:#ccc;
border-style:solid;
border-width:0px;
color:#333;
font-family:Open Sans;
font-size:14px;
overflow:hidden;
padding:3px;
word-break:normal;
}
.tg th{
background-color:#f0f0f0;
border-color:#ccc;
border-style:solid;
border-width:0px;
color:#333;
font-family:Open Sans;
font-size:14px;
font-weight:normal;
overflow:hidden;
padding:10px 5px;
word-break:normal;
}
.tg .tg-lboi{
border-color:inherit;
text-align:left;
vertical-align:middle
}
.tg .tg-d459{
background-color:#f4f4f4;
border-color:inherit;
text-align:left;
vertical-align:middle
}
@media screen and (max-width: 767px) {
.tg {
width: auto !important;
}
.tg col {
width: auto !important;
}
.tg-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: auto 0px;
}
--></style>

Und das müsste dann jetzt "irgendwo" in das Shopify Theme geschrieben werden?

Ich versuche schon immer mir irgendwie selber zu helfen. Nur stosse ich schnell an meine Grenzen 🙂

[PB79]

Ich würde mich freuen, wenn sich jemand einen Moment Zeit nehmen würde um mir zu helfen 🙂

[PB79]

@r8r 

Hast du eventuell einen Lösungsansatz für mich? Du scheinst ja generel sehr bewandert zu sein in solchen Dingen 🙂

Gruss

Phil

[r8r · Accepted solution]

@PB79 – dem Thema werd ich demnächst wohl mal einen Blogeintrag widmen 😉

Im Prinzip könntest Du als quick & dirty Test einfach mal versuchen, den Codeblock (egal ob "aufgeräumt" oder nicht) am Ende der theme.scss.css (o.ä. 😉 ) einzufügen und aus den Produktbeschreibungen zu entfernen. Dann würd ich weitersehen!

LG, Mario

[PB79]

Ja das funktioniert. Den Hinweis hatte ich im englischsprachigen Bereich bereits erhalten 🙂

Vielen Dank das du dir trotzdem Zeit genommen hast!