How to create an anchor link the jumps directly to my newsletter signup form?

Shopify Discussion
1

Hi everyone, so I did some researching on this and thought I was doing this correctly, but it doesn’t seem to be working. I’m trying to make an anchor link that I can post on social media, link tree, instagram etc.. then when people click on it, it takes them to my site and scrolls down directly to my newsletter signup form. I have an embedded Klaviyo newsletter signup form, and on Klaviyo I created an anchor link to the newsletter adding “#newsletter” to the end of my website url (i.e. “shop.mywebsite.com/#newsletter”). They also say to enter “<a id=“newsletter”>" in the html on my website to make sure it re-directs to the newsletter signup form. I tried entering this in custom liquid section where I have the html code for the signup form. I tried putting the code before, after, and also tried in between the

code for the newsletter and none of them worked. The url just takes people to my site but it doesn’t scroll to the bottom of the page to direct them to the newsletter. What am I doing wrong? Is the html code in the right place? Am I doing anything else wrong?

2

Hi NOObalance,

Klaviyo loads a Javascript script into your website and can take a bit to load the code in. I haven’t seen your code but I assume putting an ID set as “newsletter” on the form through Klaviyo may not be the best solution.

Having the ID set within your HTML directly is the better solution.

Remember that an ID is a unique identifier that should not have any other copies of itself. So ensure you do not have more than 1 ID that has the same name on the page.

I recommend to remove the ID from the Klaviyo side and if you are using an embedded sign-up form, wrap the embed inside a

and give it the ID of newsletter (see below):


  INSERT CODE FOR KLAVIYO EMBED FORM

I hope this helps, I cannot help any further unless I have the link to view your website.

3

Hi Dom, thanks for the response. I created a signup form in Klaviyo and it gave me a code like this

to enter on Shopify, so I added a new section with Custom Liquid and just copied and pasted the code. The form showed up immediately so there’s no issue there at all. Then, in Klaviyo I created an anchor link (shop.domain.com/#newsletter), and both Klaviyo and Shopify told me I have to enter this html code on my Shopify website. Klaviyo told me to enter “<a id=“newsletter”>", Shopify told me to enter “<a id="newsletter">” so that when people click this link (shop.domain.com/#newsletter) it will automatically direct them or scroll to the bottom of the site where the signup form is. I tried entering each version of the code, before the
code, after the
code, in between the
code, and the link does not seem to jump to the form, it just takes them to my site like a normal url. Let me know if you need me to clear this up or any additional questions I can answer.

4

I just tried the code the way you mentioned and it worked thank you so much!

1 Like
5

Hi Noobalance,

No worries at all, glad it helped.

For an extra little tip, consider using the scroll behaviour property to allow smooth scrolling when using anchor tags:

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

If it is set to “smooth” then it doesn’t jump the whole page and scrolls it down nicely.

Take care for now.

6

Where do I enter this in the same custom liquid section or somewhere else?

7

Hi NOObalance,

You would have to edit your CSS file that applies to the page.

Often with the scroll-behaviour property, it can be added as a style to the HTML or BODY tags in general, see example below:

https://www.w3schools.com/cssref/pr_scroll-behavior.php

Hope that helps.