Finding css file for email

Deutsch Diskussion Shopify Design
, ,
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
Bildschirmfoto 2024-06-18 um 20.22.51.png1258×348 48.6 KB

Thanks!

2

Hey Lara! @Lara14

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

image.png
image.png1510×202 30.2 KB

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
image.png1494×650 96 KB

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
image.png1608×1416 281 KB

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:


    
    
    
    

    # {{ email_title }}
    

Willkommen zu unserem Newsletter!

    Bestätige deine Anmeldung

For any further customizations, check our help doc here.

Hope that helps!

3

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!

4

@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! :wink: