Liquid, JavaScript, Themes
Hallo zusammen,
ich verwende die aktuelle Dawn Version und würde gerne an dem Abschnitt "Blog-Beitrag" etwas ändern. Unter dem Beitrag befindet sich standardmäßig immer folgendes: "<-- Zurück zum Blog"
1. Ich würde diesen Text gerne in "Zurück" ändern.
2. Soll diese Schaltfläche nicht dazu führen, zurück zum Blog zu kehren, sondern, dass die vorherige Seite geöffnet wird. So als ob ich im Internet Browser "zurück" drücken würde.
Ist das möglich?
Vielen herzlichen Dank!
Gelöst! Zur Lösung
Erfolg.
Den Button Text kannst du in den Standard Theme Texte finden und ändern je nach Sprache:
Dann findest du den genauen Button Code in der Developer Console:
Um den Button so anzupassen, dass er zur vorherigen Seite zurückkehrt, ersetze den href
-Wert im <a>
-Tag durch javascript:history.back()
. Dies führt JavaScript-Code aus, der die Browserfunktionalität "Zurück" imitiert und wahrscheinlich im article-template.liquid
oder ähnlich. Dort kannst du den Text direkt im <a>
-Tag ändern und die href
-Eigenschaft anpassen, um JavaScript für die Rückkehr zur vorherigen Seite zu nutzen.
Der geänderte Code könnte so aussehen:
<div class="article-template__back element-margin-top center scroll-trigger animate--slide-in">
<a href="javascript:history.back()" class="article-template__link link animate-arrow">
<span class="icon-wrap"><svg viewBox="0 0 14 10" fill="none" aria-hidden="true" focusable="false" class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.537.808a.5.5 0 01.817-.162l4 4a.5.5 0 010 .708l-4 4a.5.5 0 11-.708-.708L11.793 5.5H1a.5.5 0 010-1h10.793L8.646 1.354a.5.5 0 01-.109-.546z" fill="currentColor">
</path></svg>
</span>
Zurück
</a>
</div>
Wenn du es selber programmieren möchtest dann immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das obige ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
Erfolg.
Den Button Text kannst du in den Standard Theme Texte finden und ändern je nach Sprache:
Dann findest du den genauen Button Code in der Developer Console:
Um den Button so anzupassen, dass er zur vorherigen Seite zurückkehrt, ersetze den href
-Wert im <a>
-Tag durch javascript:history.back()
. Dies führt JavaScript-Code aus, der die Browserfunktionalität "Zurück" imitiert und wahrscheinlich im article-template.liquid
oder ähnlich. Dort kannst du den Text direkt im <a>
-Tag ändern und die href
-Eigenschaft anpassen, um JavaScript für die Rückkehr zur vorherigen Seite zu nutzen.
Der geänderte Code könnte so aussehen:
<div class="article-template__back element-margin-top center scroll-trigger animate--slide-in">
<a href="javascript:history.back()" class="article-template__link link animate-arrow">
<span class="icon-wrap"><svg viewBox="0 0 14 10" fill="none" aria-hidden="true" focusable="false" class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.537.808a.5.5 0 01.817-.162l4 4a.5.5 0 010 .708l-4 4a.5.5 0 11-.708-.708L11.793 5.5H1a.5.5 0 010-1h10.793L8.646 1.354a.5.5 0 01-.109-.546z" fill="currentColor">
</path></svg>
</span>
Zurück
</a>
</div>
Wenn du es selber programmieren möchtest dann immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das obige ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024