Email Templates auf responsive umstellen

Shopware 5 Administration
1

Hallo zusammen,

ich würde gerne die Email-Templates jetzt auf responsive umstellen. Da mittlerweile viele KundInnen schon nachgefragt haben, wieso wir keine “hübschen” Mails versenden, wird es wohl Zeit, die Optik anzugehen und die im Shop enthaltenen Vorlagen sind schon ziemlich altbacken und nicht responsive.

Ein erster Versuch ist jetzt aber gescheitert, sobald ich hier css einbinde. Dann scheint es wohl mi dem Ersetzen der Variablen nicht mehr zu funktionieren. Könnte demnach an Smarty liegen, schätze ich mal. Die Mail ist so aufgebaut:

	Order
	

	




    @charset "utf-8";
    /* CSS Document */
    
    @font-face {
	 font-family: 'Lato', sans-serif;
    }
    
    @media screen and (max-width: 768px) and (min-width: 390px) {
	    body {
		    margin: 0 auto !important;
		    width: 600px !important;
	    }
	    .wrapper_table {
		    width: 600px !important;
		    margin:0 auto;
		    text-align:center;
	    }
	    .padding {
		    width: 20px !important;
	    }
	    .logo{
		    width: 200px !important;
	    }
	    .navbar{
		    width: 400px !important;
	    }
	    .content{
		    width: 600px !important;
	    }
	    .content_row {
		    width: 560px !important;
	    }
	    .one_third {
		    width: 170px !important;
		    margin-bottom: 30px;
	    }
	    .one_third img {
		    max-width: 170px !important;
	    }
	    .one_half {
		    width: 270px !important;
	    }
	    .noresponsive {
		    display: none;
	    }
	    .content_row img {
		    max-width: 560px !important;
		    height: auto !important;
	    }
	    .one_half img {
			max-width: 270px !important;
	    }
	    .image_standard {
		    width: auto !important;
		    height: auto !important;
	    }
	    .one_quarter img {
		    max-width: 136px !important;
	    }
	    .one_quarter {
		    width: 136px !important;
	    }
	    .address_bar {
		    width: 290px !important;
	    }
    }
    .....</code></pre>

<p>Wie muss ich das anpassen, damit es funktioniert? Vielen Dank!</p>
2

Hallo ChriMaLuxe,

bist du mit dem Thema weitergekommen? Würde mich auch stark interessieren.

Schöne Grüße,

Björn

3

E-Mail-Programme (und demnach auch E-Mails) können nur eine Untermenge aller CSS-Eigenschaften unterstützen.

Grundsätzlich geht das schon, du musst dich nur tiefer mit der Materie befassen.

4

Ja, die Mails sind mittlerweile responsive. Habe mich intensiv damit beschäftigt und dann am Ende eine Vorlage von Zurb (Foundation for Emails 2) genommen.

nabjoern, sieh dir das am besten dort mal an und lade dir die Vorlagen runter. Dann kannst du die nach deinen Wünschen umbauen. Kostet natürlich etwas Zeit, bis man damit klarkommt und alle Variablen ersetzt hat. Aber es lohnt sich!

Du musst nur darauf achten, beim Header ein {literal} vorzuschalten, damit Smarty das mit den Variablen hinbekommt. Sieht dann so aus:

   

   

        {literal}
        …


1 „Gefällt mir“
5

@ChriMaLuxe schrieb:

Du musst nur darauf achten, beim Header ein {literal} vorzuschalten, damit Smarty das mit den Variablen hinbekommt. Sieht dann so aus:

Hängt vielleicht mit deiner Sytax oder Mail-Vorlage zusammen. Bei uns brauchen wir kein {literal} in der Mail-Vorlage. Das CSS ist bei uns in „emailheaderhtml“ eingebunden, also bei Grundeinstellungen -> Storefront -> E-Mail-Einstellungen