Überschreiben Von Farb-Wert des Footer auf Einer Spezisischen Produktseite

Deutsch Diskussion Technische Fragen & Antworten
1

Hallo zusammen,

diese Frage haben wir schon im Unterforum für Design gestellt. Leider lief diese Anfrage mehr oder weniger ins Leere. Ein user hat uns einen jedoch einen scheinbar guten Ansatz vorgeschlagen. Nun fragen wir nocheinmal hier. Vielleicht kann uns jemand zur Umsetzung helfen.

---- Originale Anfrage:

Kurz vorab: Hier fragt ein Leihe mit grundlegendem Programmier-Verständnis. Ich hoffe, Ihr könnt uns weiterhelfen!

Unser Problem & Ziel ist das Folgende: Wir wollen die Farbe des Footers auf einer spezifischen product_page ändern, ohne dabei die allgemeinen theme-settings anzufassen.

Wir verwenden aktuell das Motion-Theme für unserem Shop.

Im Quellcode des themes konnte ich die folgenden Zusammenhänge finden:

settings_data.json - In dieser Datei sind wohl alle Variablen und Werte festgelegt, die man über den Shopify-Editor so einstellen kann. Hier findet man auch die global hinterlegten Farbwerte für den Footer und die Footer-Schrift.

{“current”: {
//… anderer Code
“color_footer”: “#0050aa”,
“color_footer_text”: “#ffffff”,

//… anderer Code

footer.liquid - Der Footer müsste also die Daten von settings_data.json erhalten und “umsetzen”

theme.liquid - In dieser Datei wird der Footer mit folgender Anweisung auf alles Seiten geladen.

{%- section ‘footer’ -%}

Meine Frage nun: Gibt es eine “Überschreiben”-Anweisung, welche ich in ein Product-Page-Template (product.product-name.json) setzen kann, sodass die Werte von “color_footer” und “color_footer_text” (aus settings_data.json) für den Footer auf dieser eine Seite überschrieben werden ? Sodass sich, wie oben beschrieben, die Farbe des Footers auf genau dieser einen Product-Page ändert.

Vielen Dank im Voraus & beste Grüße

— Und hier der Vorschlag eines users, den wir gerne umsetzen würden:

@usersoly1200 theoretisch könnte man den Code so umgestalten, dass der…

  1. prüft, ob es sich bei der aktuellen Seite um eine Produktseite handelt…

Wenn ja, dann

  1. Prüft, ob das Produkt einen Farbwert als Metafeld hinterlegt hat

Wenn ja, soll der Farbwert im Footer angezeigt werden.

Hierbei muss allerdings das Product.Object in den Footer übertragen werden…

Das ist der Punkt, bei dem ich mir nicht sicher bin, ob das so einfach ist. Aber vielleicht weiß jemand das hier in der Community.

– Könnte uns an dieser Stelle jemand bei der Erstellung der Anweisung unterstützen?

Vielen Dank im Voraus!

2

@usersoly1200 leider habe ich derzeit keinen Zugang zu einem Motion Theme allerdings hat folgender Code bei Dawn Theme funktioniert:

Voraussetzung ist, dass es ein Metafeld existiert, welches Farbwerte wiedergibt.

Das ist in wenigen Sekunden eingerichtet.

Wie das genau beim Motion Theme eingerichtet werden muss, kann ich dir derzeit leider nicht sagen… aber es ist theoretisch möglich.

1 Like
3

Hallo @Finer ,

abermals vielen Dank für die Antwort.

Ich habe gestern versucht es so umzusetzen, leider ohne Ergebnis:

  • Metafeld im Product angelgt, Bezeichnung: footercolorcustom

  • Metafeld mit hex-Wert für grau gefüllt: 888888, versuchsweise auch: ‘888888’, “888888”, #888888

  • und den Code wie folgt angepasst und in footer.liquid versuchsweise an verschiedenen stellen untergebracht:

Leider verändert sich beim Aufruf der Seite so die Footer Farbe nicht.

Steckt da ein Fehler in meiner Umsetzung oder ist das doch nicht kompatibel mit dem Motion-theme?

Vielen Dank für die Hilfe!

4

Hallo @Finer ,

abermals vielen Dank für die Antwort.

Ich habe gestern versucht es so umzusetzen, leider ohne Ergebnis:

  • Metafeld im Product angelgt, Bezeichnung: footercolorcustom

  • Metafeld mit hex-Wert für grau gefüllt: 888888, versuchsweise auch: ‘888888’, “888888”, #888888

  • und den Code wie folgt angepasst und in footer.liquid versuchsweise an verschiedenen stellen untergebracht:

Leider verändert sich beim Aufruf der Seite so die Footer Farbe nicht.

Steckt da ein Fehler in meiner Umsetzung oder ist das doch nicht kompatibel mit dem Motion-theme?

Vielen Dank für die Hilfe!

5

@usersoly1200 in deiner Umsetzung stecken zwei Fehler, die ggf. dafür sorgen, dass es nicht funktioniert.

  1. Du kannst ein Metafeld erstellen, was als Wert einen Farbton speichert. D.h. es ist kein Textfeld, sondern eine Farbauswahl. Dadurch wird automatisch an entsprechender Stelle das richtige Format verwendet.

  2. Wie du es richtig vermutet hast, musst du für das Motion-Theme den Code etwas anpassen. Da mein Code sich auf das Dawn Theme bezieht. Ich denke, es wird eine Section geben, die footer.liquid heißt. Dort muss man dann schauen, wie das Styling über CSS definiert wird und den Code an entsprechender Stelle einbauen.

1 Like
6

@Finer , vielen Dank - und sorry für die Dopplung.

  • Metafeld als Farbwert neu erstellt

  • beim Durchschauen der Section footer.liquid finde ich leider keine Stelle, die sich irgendwie auf die Farbgebung bezieht. Soweit ich verstehe, bezieht sich das meiste auf Größe, Strukturierung, Menüs des Footer. Daher habe ich den Code der Footer.liquid section unseres themes mal angehangen.

Falls es dir möglich ist, gib uns gerne den letzten Hinweis zum Erfolg :). Besten Dank!

Show More 

Subscribe to get special offers, free giveaways, and once-in-a-lifetime deals.

" }, { "type": "range", "id": "container_width", "label": "Column width", "default": 20, "min": 15, "max": 95, "unit": "%" } ] }, { "type": "custom", "name": "Custom text", "settings": [ { "type": "checkbox", "id": "show_footer_title", "label": "Show title", "default": true }, { "type": "text", "id": "title", "label": "Heading", "default": "Custom text" }, { "type": "richtext", "id": "text", "label": "Text", "default": "

Add your own custom text here.

" }, { "type": "range", "id": "container_width", "label": "Column width", "default": 20, "min": 15, "max": 95, "unit": "%" } ] } ], "default": { "settings": {}, "blocks": [ { "type": "menu", "settings": {} }, { "type": "logo_social", "settings": {} } ] } } {% endschema %} ```
7

@usersoly1200 du musst das in das erste -Tag ersetzen, da über die site-footer Klasse das aussehen definiert wird.

So sollte es aussehen:

1 Like
8

Du hast nicht nur das Problem gelöst, sondern auch mir Verständnis zur Strukturierung der Page verschafft. Herzlichen Dank lieber @Finer !

9

@usersoly1200 freut mich zu hören. Man kann das ganze noch etwas ausbauen und die Schriftfarbe entsprechend anpassen, da der Kontrast zwischen Hintergrundfarbe und Schriftfarbe suboptimal ausfallen kann.

10

Hi Usersoly1200,

es freut mich zu hören, dass du deinen Shopify Shop wie gewollte anpassen konntest.

Da du dich gerade mit der Optimierung deines Shops beschäftigst, dachte ich, kannst du bestimmt auch von diesen Tipps hier profitieren.

Womit bist du momentan sonst noch beschäftigt in deinem Shop?