Button

[TWREE]

Liebe Community

Auf unserer Startseite würde ich gerne unten zwei Action-Buttons platzieren. Zurzeit ist da nur einer drauf, siehe www.rotauf.ch Wir benutzen das Theme "Motion". Mit HTML und CSS kenne ich mich eigentlich etwas aus. Es wäre keine grosse Sache den Button zu duplizieren und mit etwas margin-left richtig zu platzieren, jedoch finde ich im Shopify-Edit nicht die richtige Stelle. Es taucht keine Index Seite auf, auch in der gegebenen Struktur finde ich nicht de entsprechende html-Seite. Wäre mega wenn ihr mir helfen könntet.
Besten Dank im Voraus.

[Gabe]

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 %}
  <a href="{{ section.settings.button_link }}" class="hero__button btn btn--secondary">
    {{ section.settings.button_label | escape }}
  </a>
{% 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 %}
  <a href="{{ section.settings.button_link2 }}" class="hero__button btn btn--secondary new-button">
    {{ section.settings.button_label2 | escape }}
  </a>
{% 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:

<a href="{{ block.settings.button_link }}" class="button {% if block.settings.button_style == 'outline' %}button--outline{% endif %}">
  {{ block.settings.button_text }}
</a>

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:

<a href="{{ block.settings.button_link }}" class="button {% if block.settings.button_style == 'outline' %}button--outline{% endif %}">
  {{ block.settings.button_text }}
</a>
<a href="LINK_ZUM_ZWEITEN_BUTTON" class="button {% if block.settings.button_style == 'outline' %}button--outline{% endif %}" style="margin-left: 20px;">
  TEXT_FÜR_DEN_ZWEITEN_BUTTON
</a>

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!

[TWREE]

Hei Gabe

Erstmal Herzlichen Dank für das schnelle informative Feedback. Insbesondere mit dem Code und den Screenshots ist es super verständlich. Leider finde ich in unserem Theme-Code nicht die passende Section mit dem Namen "hero.liquid". Es gibt eine "hero-video.liquid" aber die ist es nicht, auch in anderen Sections habe ich den Code-Block leider nicht gefunden.

[Gabe]

@TWREE 

Gerne und welches Theme ist das?

[TWREE]

Das Theme "Motion".

[Gabe]

@TWREE 

Ah 'tschuldigung, hast du ja oben schon erwähnt. 😉

Cool, somit wirst du im Theme Code diesen Button Code suchen müssen und verdoppeln bzw. duplizieren (Chrome Browser -> Rechtsklick auf dem Button -> Inspect Tool):

Teste das aber mal zuerst in einer Themekopie (Theme -> Aktionen -> Duplizieren) 😉