Solved

How to change link text color on NEW email template

  • 6 November 2021
  • 41 replies
  • 6345 views

Badge +2

Hi friends!
I assume this would be an easy answer but I can’t seem to figure it out. With the old/previous “editing templates”, I had no issues changing the Link Text details however using the new/updating editing template, looks what's happening.

New template link color #C88755
email campaign test run: shows blue link text color when I want #c88755



As you can see I'd like to change Link Text color to #c88755 however, when I test out a campaign and view this in preview, it’s blue! How come? Thanks in advance 🍃 

icon

Best answer by David To 5 April 2022, 22:34

View original

41 replies

Userlevel 7
Badge +60

Hello @OasisAdaptogens,

Thanks for sharing your experience with the Klaviyo Community! I’ll share this insight with our Product Team!

I’ve seen this occur from time to time when the new template editor doesn’t properly save. To alleviate this I would advise ensuring you’ve clicked the Save and Return to Templates button after making your edits. This will make sure your template is saved and using the most up to date version of itself. 

Keep us posted on how that works out as we are still working through some of kinks with our new editor! :grinning:

Thanks for being a part of the Klaviyo Community!

David

Badge +2

Hi @david.to 

 

Thanks for the response!!! I definitely did all your suggestions and still no luck.. Ad you can see in the image below the two links are completely different color. That DARN blue!! haha.

 

Userlevel 7
Badge +60

Hey @OasisAdaptogens,

Thanks for that latest screenshot! Since it appears those emails are adhering to the template’s style setting, I would suggest double checking the source code of where that blue text is appearing. I would make sure that both the manage preferences and unsubscribe text aren’t being overridden by any coding.

This can often times happen if you’ve copied and pasted this code from another source and the formatting comes along with it. The source code will always override the template’s style in cases like this. To alleviate this I would suggest removing the bit of code that is defining that text color that is overriding the template’s style. Alternatively, if you copied this text from a different source, I would suggest copying the text again and pasting it back into this template without the additional formatting and styling.

David

@david.to Hello there! I am also facing the same issue. The unsubscribe link was the one I’ve used for the standard template selected so the source code wasnt tampered with.

I’ve also tried the method of save and return to template method you’ve suggested and it wasnt working too. I am still getting the blue colour text link

 

Possible to assist on it please?

 

Ps: I am also using the new template editor

 

Thank you so much!

Userlevel 7
Badge +60

Hey @Gang and @OasisAdaptogens 

Thanks for that additional feedback! I’ve since gone ahead and shared your feedback and experience with our Product Team to investigate this behavior further. 

At present this appears to be an unexpected behavior restricted only to the new template editor. I’ll share and provide any updates from our Product Team when made available to me! 

Really appreciate you both for raising this issue and for being members of our Community!

David

 

Badge +2

Hey @david.to 

Any updates on this! It seems to still be happening!

Thank you!

Userlevel 7
Badge +60

Hey @OasisAdaptogens,

At this time there aren’t any updates we can provide on this template behavior. However, our team is working diligently to resolving this as soon as they can!

I’ll provide an update in this thread when I hear anything from our Product Team regarding a resolution!

David

Badge +1

Also having issues with this in the new editor - hope Kaviyo fix this annoying issue soon.

As a temporary workaround you can use these in your templates:

{% web_view_link %}

{% unsubscribe_link %}

and then add inline styles to your a href links e.g.

<a style=”color: #c88755 !important;” href="{% unsubscribe_link %}" >unsubscribe</a>

For other regular links in text blocks you will need to go in and add: style=”color: #c88755 !important;” to your href tags.

 

Badge +1

Has there been any progress on this issue? All of the links in my emails are bright blue even though I changed the link color under “Styles”. I am also using the new editor and am using the drag and drop text boxes.

This is frustrating as the blue is a jarring color and not what I want in my emails.

I read the workaround @jand proposed but was not able to make it work. Anything I add to my source code is not saved, even when I click Done and Save. 

Please advise @David To and thank you in advance.

Userlevel 7
Badge +60

Hey @NatalieP,

Sorry to hear you’re being effected by this as well!

After reaching out to our Product Team regarding this behavior, it appears they are aware and confirmed that this is currently a bug causing this behavior. They’ve since escalated the case to our engineering. 

We really appreciate everyone’s patience as our teams work towards a resolution to squashing this bug!

David

Badge +1

Hey there, I know it’s just been 8 days but I’m also experiencing this issue. I’ve tried hyperlinking text rather than using the “Add Personalization” and I’m either stuck with the blue or I get a code error. I checked the code but it’s like it won’t save at all. I also noticed it appears to (sometimes) be adding %22 in place of quotations in the source code if that helps at all. 

Here’s the preview: 

 

Here’s the editor: 

 

Please please help! Thank you.

 

Badge +1

Hey there, I’m also experiencing this issue where once I type in a URL in the button, it overrides the text color. Is there a workaround for it at this moment? How do I accomplish setting the color?

Badge +1

Also, in the new template, the “Product” block button URL is not working at all (I set to assign a URL automatically). When I test it in the email, it does not link anywhere (it is not even a link at all because when I hover the cursor does not even change)

Userlevel 7
Badge +60

Hey Community members, 

Just wanted to provide a quick update on this bug that’s been impacting link in the new template editor always turning blue.

Our Product team is actively working on a resolution to this behavior and I look forward to updating this post when it has been resolved. In the interim, @Anna McCarthy, our Senior Template Specialist has created a very helpful Loom video walkthrough for a workaround which i’ve included below! If you’re having trouble with the video, you can also access it by going to this link here

 

Anna also spoke to this in the video, but also just wanted to note that this workaround will not work for the unsubscribe/web view links. You can also find the code that Anna used to paste in the Source tab of a text block below for your convenience. Keep in mind to swap in your own hex code color, link, and text!

<p><a style="color: #addhexcodehere;" href="www.google.com"> Add your text here </a></p>

Thanks for being members of the Klaviyo Community!

David

Userlevel 7
Badge +60

Hey Community members,

I know it wasn’t that long ago that I posted, but wanted to share that our Product Team did recently release a fix to resolve this behavior of links always turning blue despite what their styling was set as.

I also just want to thank everyone’s patience as our team worked towards implementing a solution for this bug.

Have a great day!

David 

 

Badge +1

Hi David, 

 

Did you guys find a solution for the unsubscribe/web view links yet? Mine are still showing blue in both the new and the old editor now when before, the Klaviyo update, I did not have these issues. 

 

Thanks!

Userlevel 4
Badge +9

Hey Community members,

I know it wasn’t that long ago that I posted, but wanted to share that our Product Team did recently release a fix to resolve this behavior of links always turning blue despite what their styling was set as.

I also just want to thank everyone’s patience as our team worked towards implementing a solution for this bug.

Have a great day!

David 

 

Hi @David To

I’m experiencing this exact same problem now in the OLD editor. No code edits, saved and returned to templates etc. If you have any insight that would be great.

Thanks!

Userlevel 7
Badge +60

Hey @Kathleen and @wernstrom,

Are either of you by chance testing this through a Gmail inbox provider? Although Gmail is most prominent for this, a variety of inbox providers will override the styling when it comes to an unsubscribe or manage preference link as Litmus explains in both their Frustrated by Blue Links in Email? Conquer Them for Good and How to Fix Gmail Blue Links for an Email Dream Come True blog articles. 

You can typically combat this by using a tag to provide only the URL for your unsubscribe link and wrapping it within <a href></a> tags similar to what is mentioned in the How to Add an Unsubscribe Link to Klaviyo Emails Help Center article. For example, if I wanted to force the unsubscribe link to display as black I can use <a href ="{% unsubscribe_link %}" style="color: #000000 !important;">Unsubscribe</a>

David

Userlevel 4
Badge +9

Hi @David To , thanks for your reply. Yes, I’m testing in gmail, however, up until extremely recently this has not been an issue, so I would tend to think that gmail isn’t the problem (or at least it wasn’t until now). Will give your workaround a try. Thanks!

Userlevel 4
Badge +9

Hi @David To I haven’t had any luck implementing this solution, could you please provide a bit of extra context?

My previously working block contained:

<p style="text-align: center;"><span style="font-size:14px;"><span style="color:#d4d4d4;">Update&nbsp;your email&nbsp;preferences:</span> <strong><span style="color:#F5A623;">{% manage_preferences %}</span></strong>.</span></p>

<p style="text-align: center;"><span style="font-size: 14px;"><span style="color:#d4d4d4;">No longer want to receive any marketing emails?</span> <span style="color:#F5A623;"><strong>{% unsubscribe %}.</strong></span></span></p>

<p style="text-align: center;"><span style="color:#FFFFFF;"><span style="font-size:14px;">{{ organization.name }} {{ organization.full_address }}.&nbsp;</span></span></p>

I’m not super familiar with html… is this how the the <a href> tag is supposed to be added? because this doesn’t seem to work and I’m sure I’m probably missing something:

<p style="text-align: center;"><span style="font-size: 14px;"><span style="color:#d4d4d4;">No longer want to receive any marketing emails? </span><a href="{% unsubscribe %}" style="color: #F5A623 !important;">Unsubscribe</a> </span></p>

Thanks!

Userlevel 4
Badge +9

I feel like even with my poor html skills something is buggy. 

@David To here’s an example, as far as I can tell, both tags are the same. One is for managing preferences, one is for unsubscribing:

<p>Update your email preferences:<a href="{% manage_preferences %}" style="color: #F5A623 !important;">Manage Preferences</a></p>

<p>Don't want to receive any marketing emails?<a href="{% unsubscribe_link %}" style="color: #F5A623 !important;">Unsubscribe</a></p>

Both display fine in Klaviyo, except this time, when I send a preview to gmail, the unsub displays the correct color while the preference one is like this:

Am I missing something, or is something wrong?

Thanks!

Userlevel 7
Badge +60

Hey @wernstrom,

So close! Looks like you’re actually using the default manage preference variable as opposed to one that generates a link. Instead of using {% manage_preferences %}, you’ll want to use {% manage_preferences_link %} to create this hyperlink experience. More details on using different forms of the variable tags can be found in the Guide to Template Tags and Variable Syntax Help Center article.

Awesome to hear you’re heading in the right direction! 

David

Userlevel 4
Badge +9

OH! Duh! Thank you once again @David To !

Badge +1
<span>{% unsubscribe '<span style="color: #000000;"><u style="text-decoration-color: #000000;">Unsubscribe</u></span>' %}</span>

 

Badge +1

Hi ! 
I still have this strange behavior on gmail… I also tried the fix with the # but it didn’t change anyhting… Do you have any update? 
Thanks, 

Reply