Hey @TWREE
Danke für die Frage und tolles Outdoor Shop! Schauen wir wie du das mit den CTAs erreichen kannst was du haben möchtest.
Um zwei Call-To-Action-Buttons (CTAs) auf der Startseite mit dem Theme “Motion” zu platzieren, wirst du die entsprechenden Liquid-Dateien bearbeiten müssen. Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
Gehe zu “Online Store” > “Themes” → “Actions” → “Duplizieren” → “Edit code” und suche nach der Datei “sections/hero.liquid” oder so ähnlich bearbeiten (gerne kann ich einen Experten dafür empfehlen), um den zusätzlichen Button hinzuzufügen. Klicke darauf, um die Datei zu öffnen und suche nach dem vorhandenen Action-Button Code. Es sollte einen Codeblock geben, der etwa wie folgt aussieht:
{% if section.settings.button_label %}
{{ section.settings.button_label | escape }}
{% endif %}
Kopiere diesen Codeblock und füge ihn direkt unterhalb des bestehenden Buttons ein. Passe den Code entsprechend an, um den Text und den Link für den neuen Button festzulegen.
Zum Beispiel:
{% if section.settings.button_label2 %}
{{ section.settings.button_label2 | escape }}
{% endif %}
Nun musst du die Theme-Einstellungen aktualisieren, um die neuen Button-Einstellungen hinzuzufügen. Suche in der “sections/hero.liquid” Datei nach dem Codeblock, der die Einstellungen des ersten Buttons definiert. Es sollte in etwas wie folgt aussehen:
{
"type": "url",
"id": "button_link",
"label": "Button link",
"default": "#"
},
{
"type": "text",
"id": "button_label",
"label": "Button label",
"default": "Shop now"
},
Füge direkt darunter einen ähnlichen Codeblock für den zweiten Button hinzu:
{
"type": "url",
"id": "button_link2",
"label": "Button 2 link",
"default": "#"
},
{
"type": "text",
"id": "button_label2",
"label": "Button 2 label",
"default": "Learn more"
},
Jetzt füge den CSS-Code hinzu, um die Buttons nebeneinander anzuzeigen und den Abstand anzupassen. Suche im linken Dateibaum nach “assets/theme.scss.liquid” und klicke darauf, um die Datei zu öffnen. Füge am Ende der Datei den folgenden CSS-Code hinzu:
.hero__button.new-button {
margin-left: 20px;
}
Speichere die Änderungen, und jetzt sollten zwei Call-to-Action-Buttons auf deiner Landingpage zu sehen sein. Die Text- und Link-Einstellungen für den zweiten Button können über den Theme-Editor angepasst werden.
ODER
Finde die relevanten Codeabschnitte wahrscheinlich in der “sections/featured-content.liquid” Datei. Führe die folgenden Schritte aus, um die Änderungen vorzunehmen. Suche den Codeabschnitt, der den derzeitigen Button erstellt. Der Code sollte etwa so aussehen:
{{ block.settings.button_text }}
Dupliziere diesen Code und platziere ihn direkt darunter und passe den Link und den Text des zweiten Buttons nach deinen Wünschen an. Zum Beispiel:
{{ block.settings.button_text }}
TEXT_FÜR_DEN_ZWEITEN_BUTTON
Speichere das und wenn du möchtest, dass die beiden Buttons nebeneinander angezeigt werden, stelle sicher, dass sie innerhalb eines Containers mit der CSS-Eigenschaft display: flex oder einer ähnlichen Technik positioniert sind. Falls notwendig, zusätzliche CSS-Stile im CSS Editor hinzufügen:
Bitte beachte, dass dies eine allgemeine Anleitung ist, und es kann sein, dass das Theme “Motion” in Ihrer speziellen Installation leicht abweicht.
Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
