Finding css file for email
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.
Thanks!
Hey Lara! @Lara14
You have reached the German community here but we can chat in English too, that's no problem!
The newsletter sign-up involves the mandatory DOI (double-opt-in) process for their own security, and for the security of the store.
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:
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!
Community Blog Artikel
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024
Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024
Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024