Shopify Theme Farbe des Textes ändern funktioniert nicht
Hallo, ich möchte die Farbe des Textes der 404 Seite, der Agbs und der Suchanzeige ändern, jedoch funktioniert es nicht. Kann mir jemand helfen? Ich habe es im Fahrbscheme unter Anpassen schon geändert, es hat sich aber trotzdem nichts verändert.
Hey @Tiziannn
Danke für den Link und folgendes (siehe hier und auch hier) :
Um den gesamten Text innerhalb des div-Elements schwarz zu machen, etwas CSS hinzufügen, die die Farbe aller Textelemente in diesem Container auf schwarz setzt:
#shopify-section-template--21278206394710__main {
color: black;
}
Oder füge ein style-Tag in das HTML-Dokument ein, entweder im <head> oder innerhalb des div-Elements:
<div id="shopify-section-template--21278206394710__main" class="shopify-section">
<style type="text/css">
.template-404 .title + * {
margin-top: 1rem;
}
@media screen and (min-width: 750px) {
.template-404 .title + * {
margin-top: 2rem;
}
}
#shopify-section-template--21278206394710__main {
color: black;
}
</style>
<div class="template-404 page-width page-margin center">
<p>
404
</p>
<h1 class="title">
Seite nicht gefunden
</h1>
<a href="/collections/all" class="button">
Weiter shoppen
</a>
</div>
</div>
Diese Regel setzt die Textfarbe aller Elemente innerhalb des div-Containers mit der ID shopify-section-template--21278206394710__main auf schwarz. Falls du sicherstellen möchtest, dass diese Regel alle Textfarben überschreibt, kannst du die color-Eigenschaft mit !important markieren:
#shopify-section-template--21278206394710__main {
color: black !important;
}
Hey @Tiziannn
Es scheint dass die Farbschemen des Colorblock Themes nicht bis in diese Seiten greifen - 404 Seite, AGB, und die Suchanzeige - und somit stellt das ggf. eine Limitation der Farbschema Einstellungen im Theme dar.
Du kannst aber:
- Andere Themes wie unsere Premium Themes testen, wenn das somit ein Limit unseres Free Colorblock Themes ist.
- Oder eine Farben App wie Globo testen.
- Oder etwas CSS Code hinzufügen (Anleitung dazu hier).
Es DIY im CSS machen
Der Vorteil der CSS Code Anpassungen ist, dass solche Code Änderungen dein Colorblock Theme nicht aus den Theme Updates ausschließen.
Beispiel 1 - die Farben der Suchseite und Ergebnisse zu blau ändern
Die Titel scheinen mit <h1> und <h3> Tags markiert zu sein. Du kannst die Farbe dieser Titel auf Blau setzen, indem du folgende CSS-Regeln hinzufügst:
h1, h3 {
color: blue; /* Oder einen speziellen Blauton, z.B. #0000FF */
}
Um die allgemeine Textfarbe zu ändern, kannst du eine Regel für den <body> Tag oder spezifische Klassen hinzufügen. Da es viele Textelemente gibt, zeige ich, wie man die Textfarbe für alles innerhalb eines Div-Containers ändert:
div {
color: blue; /* Stellt die Farbe aller Texte in Div-Containern auf Blau */
}
Die Suchleiste verwendet das <input> Tag für die Eingabe. Du kannst die Textfarbe und den Hintergrund der Suchleiste ändern, indem du Folgendes hinzufügst:
input[type="search"] {
color: white; /* Farbe des Textes */
background-color: blue; /* Hintergrundfarbe der Suchleiste */
}
Um diese Änderungen in deinen HTML-Code zu implementieren, füge die CSS-Regeln innerhalb eines <style> Tags im <head> Bereich deiner HTML-Datei hinzu:
<head>
<style>
h1, h3 {
color: blue;
}
div {
color: blue;
}
input[type="search"] {
color: white;
background-color: blue;
}
</style>
</head>
Wenn du weitere Details brauchst, bitte mich zu einem Beispiel verlinken, so dass ich den HTML Code da analysieren kann.
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.
Hey @Tiziannn
Danke für den Link und folgendes (siehe hier und auch hier) :
Um den gesamten Text innerhalb des div-Elements schwarz zu machen, etwas CSS hinzufügen, die die Farbe aller Textelemente in diesem Container auf schwarz setzt:
#shopify-section-template--21278206394710__main {
color: black;
}
Oder füge ein style-Tag in das HTML-Dokument ein, entweder im <head> oder innerhalb des div-Elements:
<div id="shopify-section-template--21278206394710__main" class="shopify-section">
<style type="text/css">
.template-404 .title + * {
margin-top: 1rem;
}
@media screen and (min-width: 750px) {
.template-404 .title + * {
margin-top: 2rem;
}
}
#shopify-section-template--21278206394710__main {
color: black;
}
</style>
<div class="template-404 page-width page-margin center">
<p>
404
</p>
<h1 class="title">
Seite nicht gefunden
</h1>
<a href="/collections/all" class="button">
Weiter shoppen
</a>
</div>
</div>
Diese Regel setzt die Textfarbe aller Elemente innerhalb des div-Containers mit der ID shopify-section-template--21278206394710__main auf schwarz. Falls du sicherstellen möchtest, dass diese Regel alle Textfarben überschreibt, kannst du die color-Eigenschaft mit !important markieren:
#shopify-section-template--21278206394710__main {
color: black !important;
}
CSS:
.shopify-policy__container {
color: black;
}
Füge ein style-Tag in das HTML-Dokument ein, entweder im <head> oder innerhalb des div-Elements:
<div class="shopify-policy__container">
<style type="text/css">
.shopify-policy__container {
color: black;
}
</style>
<div class="shopify-policy__title">
<h1>AGB</h1>
</div>
<div class="shopify-policy__body">
<div class="rte">
<h3 class="h3"><b>Allgemeine Geschäftsbedingungen</b></h3>
<h3 class="h3">
<b>1.<span> </span></b><b>Geltungsbereich</b>
</h3>
<p>Für alle Lieferungen von Ethereal Clothing e.U. (nachfolgend Ethereal Clothing) an Verbraucher gelten diese Allgemeinen Geschäftsbedingungen (AGB).<br>Verbraucher ist jede natürliche Person, die ein Rechtsgeschäft zu einem Zwecke abschließt, der überwiegend weder ihrer gewerblichen noch ihrer selbstständigen beruflichen Tätigkeit zugerechnet werden kann.</p>
<h3 class="h3">
<b>2.<span> </span></b><b>Vertragspartner</b>
</h3>
<p>Der Kaufvertrag kommt zustande mit Ethereal Clothing e.U., Inhaber: Tizian Müller, Bürgerstr. 26, 12347 Berlin</p>
<h3 class="h3">
<b>3.<span> </span></b><b>Vertragsschluss</b>
</h3>
<p><b>3.1.<span> </span></b>Die Darstellung der Produkte im Online-Shop stellt kein rechtlich bindendes Angebot, sondern nur eine Aufforderung zur Bestellung dar.</p>
<p><b>3.2.<span> </span></b>Durch Anklicken des Buttons [Kaufen/kostenpflichtig bestellen] geben Sie eine verbindliche Bestellung der auf der Bestellseite aufgelisteten Waren ab. Ihr Kaufvertrag kommt zustande, wenn wir Ihre Bestellung durch eine Auftragsbestätigung per E-Mail unmittelbar nach dem Erhalt Ihrer Bestellung annehmen.</p>
<h3 class="h3">
<b>4.<span> </span></b><b>Widerrufsrecht</b>
</h3>
<p><b>4.1.<span> </span></b>Wenn Sie Verbraucher sind (also eine natürliche Person, die die Bestellung zu einem Zweck abgibt, der weder Ihrer gewerblichen oder selbständigen beruflichen Tätigkeit zugerechnet werden kann), steht Ihnen nach Maßgabe der gesetzlichen Bestimmungen ein Widerrufsrecht zu.</p>
<p><b>4.2.<span> </span></b>Machen Sie als Verbraucher von Ihrem Widerrufsrecht nach Ziffer 4.1 Gebrauch, so haben Sie die regelmäßigen Kosten der Rücksendung zu tragen.</p>
<p><b>4.3.<span> </span></b>Im Übrigen gelten für das Widerrufsrecht die Regelungen, die im Einzelnen wiedergegeben sind in der folgenden<br><b><br>Widerrufsbelehrung<br><br>Widerrufsrecht<br><br></b>Sie haben das Recht, binnen vierzehn Tagen ohne Angabe von Gründen diesen Vertrag zu widerrufen.<br><br>Die Widerrufsfrist beträgt vierzehn Tage ab dem Tag an dem Sie oder ein von Ihnen benannter Dritter, der nicht der Beförderer ist, die Waren in Besitz genommen haben bzw. hat.<br><br>Um Ihr Widerrufsrecht auszuüben, müssen Sie uns [Ethereal Clothing, Bürgerstr. 26, 12347 Berlin, +49 17623609412, info@etherealclo.de] mittels einer eindeutigen Erklärung (z.B. ein mit der Post versandter Brief oder eine E-Mail) über Ihren Entschluss, diesen Vertrag zu widerrufen, informieren. Sie können dafür das beigefügte Muster-Widerrufsformular verwenden, das jedoch nicht vorgeschrieben ist. Sie können das Muster- Widerrufsformular oder eine andere eindeutige Erklärung auch auf unserer Webseite (www.etherealclo.de) elektronisch ausfüllen und übermitteln. Machen Sie von dieser Möglichkeit Gebrauch, so werden wir Ihnen unverzüglich (z.B. per E-Mail) eine Bestätigung über den Eingang eines solchen Widerrufs übermitteln.<br><br>Zur Wahrung der Widerrufsfrist reicht es aus, dass Sie die Mitteilung über die Ausübung des Widerrufsrechts vor Ablauf der Widerrufsfrist absenden.<br><br><b>Folgen des Widerrufs</b><br><br>Wenn Sie diesen Vertrag widerrufen, haben wir Ihnen alle Zahlungen, die wir von Ihnen erhalten haben, einschließlich der Lieferkosten (mit Ausnahme der zusätzlichen Kosten, die sich daraus ergeben, dass Sie eine andere Art der Lieferung als die von uns angebotene, günstigste Standardlieferung gewählt haben), unverzüglich und spätestens binnen vierzehn Tagen ab dem Tag zurückzuzahlen, an dem die Mitteilung über Ihren Widerruf dieses Vertrags bei uns eingegangen ist. Für diese Rückzahlung verwenden wir dasselbe Zahlungsmittel, das Sie bei der ursprünglichen Transaktion eingesetzt haben, es sei denn, mit Ihnen wurde ausdrücklich etwas anderes vereinbart; in keinem Fall werden Ihnen wegen dieser Rückzahlung Entgelte berechnet. Wir können die Rückzahlung verweigern, bis wir die Waren wieder zurückerhalten haben oder bis Sie den Nachweis erbracht haben, dass Sie die Waren zurückgesandt haben, je nachdem, welches der frühere Zeitpunkt ist.<br><br>Sie haben die Waren unverzüglich und in jedem Fall spätestens binnen vierzehn Tagen ab dem Tag, an dem Sie uns über den Widerruf dieses Vertrages unterrichten, an uns oder an (hier sind gegebenenfalls der Name und die Anschrift der von Ihnen zur Entgegennahme der Ware ermächtigten Person einzufügen) zurückzusenden oder zu übergeben. Die Frist ist gewahrt, wenn Sie die Waren vor Ablauf der Frist von vierzehn Tagen absenden.<br><br>Sie tragen die unmittelbaren Kosten der Rücksendung der Waren.<br><br>Sie müssen für einen etwaigen Wertverlust der Waren nur aufkommen, wenn dieser Wertverlust auf einen zur Prüfung der Beschaffenheit, Eigenschaften und Funktionsweise der Waren nicht notwendigen Umgang mit ihnen zurückzuführen ist.<br><br><b>- Ende der Widerrufsbelehrung –<br></b></p>
<p><b>4.4.<span> </span></b>Über das Muster-Widerrufsformular informiert Ethereal Clothing nach der gesetzlichen Regelung wie folgt:<br><br><b>Muster-Widerrufsformular</b><br>(Wenn Sie den Vertrag widerrufen wollen, dann füllen Sie bitte dieses Formular aus und senden Sie es zurück.)<br><br>- An [Tizian Müller, Ethereal Clothing, Bürgerstr. 26, 12347 Berlin, info@etherealclo.de]:<br>–Hiermit widerrufe(n) ich/wir (*) den von mir/uns (*) abgeschlossenen Vertrag über den Kauf der folgenden Waren (*)/die Erbringung der folgenden Dienstleistung (*)<br>–Bestellt am (*)/erhalten am (*)<br>–Name des/der Verbraucher(s)<br>–Anschrift des/der Verbraucher(s)<br>–Unterschrift des/der Verbraucher(s) (nur bei Mitteilung auf Papier)<br>–Datum __________<br>(*) Unzutreffendes streichen</p>
<h3 class="h3">
<b>5.<span> </span></b><b>Preise und Versandkosten</b>
</h3>
<p><b>5.1.<span> </span></b>Die auf den Produktseiten genannten Preise enthalten die gesetzliche Mehrwertsteuer und sonstige Preisbestandteile.</p>
<p><b>5.2.<span> </span></b>Zusätzlich zu den angegebenen Preisen berechnen wir für die Lieferung innerhalb Deutschlands pauschal 4,99 Euro pro Bestellung. Die Versandkosten werden Ihnen auf den Produktseiten, im Warenkorbsystem und auf der Bestellseite nochmals deutlich mitgeteilt.</p>
<h3 class="h3">
<b>6.<span> </span></b><b>Lieferung</b>
</h3>
<p><b>6.1.<span> </span></b>Die Lieferung erfolgt nur innerhalb der EU, inkl. Deutschlands mit DHL.</p>
<p><b>6.2.<
.template-search__header {
color: black;
}Oder:
<div class="template-search__header page-width scroll-trigger animate--fade-in">
<style type="text/css">
.template-search__header {
color: black;
}
</style>
<h1 class="h2 center">Suchergebnisse</h1>
<div class="template-search__search">
<predictive-search data-loading-text="Wird geladen ...">
<main-search>
<form action="/search" method="get" role="search" class="search">
<div class="field">
<input class="search__input field__input" id="Search-In-Template" type="search" name="q" value="dfgdfg" placeholder="Suchen" role="combobox" aria-expanded="false" aria-owns="predictive-search-results" aria-controls="predictive-search-results" aria-haspopup="listbox" aria-autocomplete="list" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false">
<label class="field__label" for="Search-In-Template">Suchen</label>
<input name="options[prefix]" type="hidden" value="last">
<div class="predictive-search predictive-search--search-template" tabindex="-1" data-predictive-search="">
<link href="//etherealclo.de/cdn/shop/t/2/assets/component-loading-spinner.css?v=116724955567955766481712503229" rel="stylesheet" type="text/css" media="all">
<div class="predictive-search__loading-state">
<svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</div>
<span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
<button type="reset" class="reset__button field__button" aria-label="Suchbegriff zurücksetzen">
<svg class="icon icon-close" aria-hidden="true" focusable="false">
<use xlink:href="#icon-reset"></use>
</svg>
</button>
<button type="submit" class="search__button field__button" aria-label="Suchen">
<svg class="icon icon-search" aria-hidden="true" focusable="false">
<use xlink:href="#icon-search"></use>
</svg>
</button>
</div>
</form>
</main-search>
</predictive-search>
</div>
<p role="status">Keine Ergebnisse gefunden für "dfgdfg". Überprüfe die Schreibweise oder versuche es mit einer anderen Suchanfrage.</p>
</div>
Community Blog Artikel
Mit dem Lernpfad der Shopify Academy und dem Verified Skills-Badge Expanding Your Sho...
By Shopify Feb 7, 2025
Den Verkauf im Großhandel steigern: In der Shopify Academy lernst du, wie das geht, zum...
By Shopify Feb 3, 2025
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024