Re: Edit font & wrap text in 'Contact Buyer' email template

Caneleo1234 · ‎08-28-2022

Hi guys,

Is anyone able to help with how I'd add code to the Contact Buyer email to change the font of the text and make it wrapped so the length of each line of text is adjusted to fit the screen it is being viewed on?

I don't know where to put the style details 😞 any help would be much appreciated! Thank you!

Cedcommerce · ‎08-29-2022

Hello @Caneleo1234,

Could you share the screenshot of the Contact Buyer email template and font name? So that we will let you know the exact solution.

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- [email protected]
- Whatsapp:- Join Here

Caneleo1234 · ‎08-29-2022

I've attached a screenshot below and will also copy/paste the code as I cannot see where it says the font sorry. You can see that some text is standard boring computer text (that's what I want to change) and the text runs off-screen to the right.

<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ email_title }}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
<style>
.button__cell { background: {{ shop.email_accent_color }}; }
a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }

.google-button {
background: #D53 url('https://i.imgur.com/qFlAIL1.png') no-repeat 8px -3px;
background-size: 40px;
box-shadow: 0 -0.2rem 0 #F88;
color: #FFF;
font-family: 'Helvetica Neaue','Helvetica','Calibri',sans-serif;
font-size: 16px;
line-height: 46px;
padding: 15px 10px 10px 34px;
text-decoration: none;
-webkit-border-radius: 0.5rem;
-moz-border-radius: 0.5rem;
border-radius: 0.5rem;
position:relative;
}
.google-button:hover {
background-color: rgb(189, 44, 8);
background-size: 40px;
box-shadow: 0 -0.2rem 0 #5C1818;
color: #FFF;
font-family: 'Helvetica Neaue','Helvetica','Calibri',sans-serif;
font-size: 16px;
line-height: 46px;
padding: 15px 10px 10px 34px;
text-decoration: none;
-webkit-border-radius: 0.5rem;
-moz-border-radius: 0.5rem;
border-radius: 0.5rem;
top: 2px;
position:relative;
}

</style>
</head>

<table class="row">
<tr>
<td class="shop-name__cell">
{%- if shop.email_logo_url %}
<img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
{%- else %}
<h1 class="shop-name__text">
<a href="{{shop.url}}">{{ shop.name }}</a>
</h1>
{%- endif %}
</td>

</tr>
</table>

</td>
</tr>
</table>

</center>
</td>
</tr>
</table>

<table class="row content">
<tr>
<td class="content__cell">
<center>
<table class="container">
<tr>
<td>

<p>{{ custom_message }}</p>
<pre>
<body> As a small family business, we heavily rely on word of mouth to get our name out there and online reviews validate the quality of what we have to offer.

We would absolutely LOVE if you could take a moment to pop up a quick Google Review.

It not only makes us do a little happy dance & gives us the motivation to keep going, but it helps others just like you who want confirmation that Meridian Etch is legit worth it!

Thank you again for your order and thank you in advance if you choose to complete a brief review xx
<pre>
<pre>
<a class="google-button" href="https://g.page/r/CU1tp8wrMd_GEAI/review">Leave a Review!</a>

</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row footer">
<tr>
<td class="footer__cell">
<center>
<table class="container">
<tr>
<td>

<p class="disclaimer__subtext">If you have any questions, reply to this email or contact us at <a href="mailto:{{ shop.email }}">{{ shop.email }}</a></p>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>

</td>
</tr>
</table>
</body>
</html>

ms_marci · ‎10-14-2022

how to edit the welcome to my shop > instead i want store not shop ?

Cedcommerce · ‎10-18-2022

Hello @Caneleo1234,

You can add the below-provided code just before the </head> tag in the email template to get this issue fixed.

/* for mobile devices */

@media screen and (max-width: 480px) {

p {

font-family: sans-serif;

font-size: 14px;

}

/* for other devices like desktop, iPad */

@media screen and (min-width: 480px) {

p {

font-family: sans-serif;

font-size: 14px;

}

Instead of "p", you can change the selector according to your requirements.

Hope it was helpful, let us know if you need any other help with your Shopify store.

All the best,

CedCommerce

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- [email protected]
- Whatsapp:- Join Here

ms_marci · ‎10-21-2022

Thank You I will Try It , and let you know how it came out .

ms_marci · ‎10-21-2022

i tried dont work i see the code up the top , on the preview and it still say welcome to my shop , i want it to say store instead of shop

Re: Edit font & wrap text in 'Contact Buyer' email template

Edit font & wrap text in 'Contact Buyer' email template

Community Blog Articles