FROM CACHE - de_header

Finding css file for email

Gelöst

Finding css file for email

Lara14
Tourist
25 0 1

Hello everybody, 

I'm currently trying to adjust the design of the email that customers get when they sign up to our newsletter. So it's basically like a two-step verification process when they sign up to our newsletter. 

 

In the HTML code of the email there is a link to the css file (link rel"stylesheet" type="text/css"...). Does somebody know how I can access this file? I couldn't find it on shopify. 

 

Bildschirmfoto 2024-06-18 um 20.22.51.png

Thanks! 

1 AKZEPTIERTE LÖSUNG
Gabe
Shopify Staff
18475 2895 4264

Erfolg.

@Lara14 

 

Das ist somit leider ein Limit deines Themes. Bzgl. den Abonnieren Button in der Mitte, siehe bitte diesen Thread zum Thema.

 

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lösung in ursprünglichem Beitrag anzeigen

3 ANTWORTEN 3

Gabe
Shopify Staff
18475 2895 4264

Hey Lara! @Lara14 

 

You have reached the German community here but we can chat in English too, that's no problem!

 

image.png

 

The newsletter sign-up involves the mandatory DOI (double-opt-in) process for their own security, and for the security of the store.

 

image.png

 

You haven't really told us what you are trying to achieve with the newsletter confirmation flow and look, so I'll fill in some gaps here. I am assuming you would like to change the design of the confirmation page itself like maybe the position of your branding logo, or change its look and feel, is that correct? 

 

If you mean the newsletter confirmation page that you would like to change, this is a system page and cannot be changed other than by adding some CSS to the above Liquid in your screenshot, or change the wording of it in the standard theme texts.

 

For example you can make the call to action button smaller or bigger or even center it with some CSS:

 

image.png

 

This below line references the CSS file that is stored in the asset folders of your theme. To customize the email's CSS you will need to go to the Assets folder, where all your CSS and JS files are stored. Find the file named styles.css or any other CSS file referenced in your email HTML template:

 

/assets/notifications/styles.css

 

Apropos, you can also change the link in the CTA button liquid in the above email template and redirect the customer to a different thank-you page that you created yourself in case it is that which you are trying to achieve (which I couldn't get from your questions...)

 

Here's an example of what your CSS file might look like and how you can add styles:

 

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
}

h1 {
    color: #1a1a1a;
}

a {
    color: #4CAF50;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

 

If you need to add custom styles directly to the Liquid template of the email, you can embed the styles within the <style> tag. Here’s how you can do it:

 

<!DOCTYPE html>
<html lang="de">
<head>
    <title>{{ email_title }}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
        }
        h1 {
            color: #1a1a1a;
        }
        a {
            color: #4CAF50;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h1>{{ email_title }}</h1>
    <p>Willkommen zu unserem Newsletter!</p>
    <a href="{{ confirmation_link }}">Bestätige deine Anmeldung</a>
</body>
</html>

 

For any further customizations, check our help doc here.

 

Hope that helps!

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lara14
Tourist
25 0 1

Hey Gabe, 

vielen Dank für deine Hilfe. 

Ich wollte den Button in der Email ändern. Also momentan ist er nämlich auf der Linken Seite des Screens. Ich würde ihn aber gerne in der Mitte platzieren. Leider konnte ich das CSS file mit dem Namen style.css nicht beim Assets Folder finden. Weißt du zufällig ob es auch einen anderen Namen haben könnte? 

 

Vielen Dank!

Gabe
Shopify Staff
18475 2895 4264

Erfolg.

@Lara14 

 

Das ist somit leider ein Limit deines Themes. Bzgl. den Abonnieren Button in der Mitte, siehe bitte diesen Thread zum Thema.

 

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog