Brooklyn - Newsletter Section auf einer extra Seite einfügen

[JohnJ]

Hallo zusammen,

kann mir jemand sagen, ob man den Abschnitt "Newsletter abonnieren" (von der Startseite) auf einer neu angelegten Seite einfügen kann? Würde gerne eine Newsletter Seite anlegen, wo man den selben Abschnitt zum Newsletter abonnieren sieht wie auf der Startseite.
Vielen Dank!

 

[tewe · Accepted solution]

Hallo @JohnJ ,

das ist möglich über ein neues Template für die Seiten:

1. Im Code des Themes erstelle im Verzeichnis templates eine neue Datei page.newsletter.liquid. Kopiere den Inhalt der Datei page.liquid in die neu erstellte Datei. Füge anschließend noch

{% section 'newsletter' %}

dazu. Damit wird die Seite über so erweitert, dass der Newsletterblock von der Startseite eingebunden wird. Die dazugehörige Datei ist in dem Verzeichnis Sections.

2. Lege eine neue Seite genau da an, wo Du es markiert hast, und wähle das neue Template 'page.newsletter' aus

Jetzt sollte die neue Seite ungefähr wie folgt aussehen:

Gruß
Thomas

• War meine Antworthilfreich? Hinterlass bitte ein Like.
• Hat meine Antwort Dein Problem gelöst? Bitte akzeptiere sie als Lösung.

[tewe · Accepted solution]

Hallo @JohnJ ,

das ist möglich über ein neues Template für die Seiten:

1. Im Code des Themes erstelle im Verzeichnis templates eine neue Datei page.newsletter.liquid. Kopiere den Inhalt der Datei page.liquid in die neu erstellte Datei. Füge anschließend noch

{% section 'newsletter' %}

dazu. Damit wird die Seite über so erweitert, dass der Newsletterblock von der Startseite eingebunden wird. Die dazugehörige Datei ist in dem Verzeichnis Sections.

2. Lege eine neue Seite genau da an, wo Du es markiert hast, und wähle das neue Template 'page.newsletter' aus

Jetzt sollte die neue Seite ungefähr wie folgt aussehen:

Gruß
Thomas

• War meine Antworthilfreich? Hinterlass bitte ein Like.
• Hat meine Antwort Dein Problem gelöst? Bitte akzeptiere sie als Lösung.

[JohnJ]

Hallo @tewe ,

danke dir! Hat super funktioniert.
Habe noch eine Frage dazu. Auf meiner Startseite ist die Newsletter Section optisch angepasst. D.h. ein Hintergrundbild eingefügt und die Schriftfarbe geändert. Kannst du mir sagen wo/was ich kopieren muss, um die Eigenschaften der Newsletter Section der Startseite, auf die Newsletter Section auf der neu erstellten Seite zu übertragen?
Danke

[tewe]

Hallo @JohnJ ,

wusste gar nicht, dass man in Brooklyn so einfach ein Bild als Hintergrund des Newsletters einstellen kann. Normalerweise funktioniert das auf Codeebene über

  <div class="newsletter"  style="background-image: url({{'background-image-jpg' | asset_url}}); height: 200px; width: 100%;">

oder über eine CSS-Klasse, siehe https://community.shopify.com/c/Shopify-Design/How-to-add-my-own-custom-background-image/td-p/327450.

Da der Hintergrund nicht mitgewandert ist, ist das Bild auf der Homepage vermutlich an irgend ein anderen Knoten geknüpft (Parent-Node). Um das zu erkennen, müsste ich die Homepage sehen.

Gruß
Thomas

[JohnJ]

@tewe ,

ist wie du sagtest tatsächlich nicht ohne weiteres Möglich gewesen.
Für die optische Anpassung (Hintergrundbild und Textfarbe) habe ich den folgenden Code der theme.scss.liquid hinzugefügt:

.template-index .newsletter{
    background-image: url(https://dieURLdesBildes);
    background-size: cover;
    background-repeat: no-repeat;
}

.newsletter .section-header {
    color: #fff !important;
}
.newsletter .section-subheading {
    color: #fff !important;
}

.newsletter .section-header__title {
    color: #fff !important;
}

Könnte ich diesen Code einfach der zuvor neu erstellten page.newsletter.liquid hinzufügen?

[tewe · Accepted solution]

Hallo @JohnJ,

das Stylesheet sollte für jede Seite gelten. Entferne einmal .template-index ganz am Anfang, vermutlich funktioniert es dann auf der Homepage und auf der neuen Seite. .template-index ist eine Spezialisierung, die zumindest auf der neuen Seite nicht mehr passt.

Gruß
Thomas

[JohnJ]

Meinst du das hier einfach löschen?

[tewe]

genau.

Gruß

Thomas

[JohnJ]

Super! Es funktioniert. Nochmals Danke.