Using "Anchor Links" To Smooth Scroll to Bottom of Page

[katfinley]

Hi guys, I've looked through a bunch of different "anchor links" questions on here, and can't seem to find a good solution!

For this page: https://verygoodmfg.com/products/50ml-bottle

I'd like to add an "anchor link" to the text in the product description, where it says "get in touch" - so that when you click it, it automatically scrolls down to the bottom of the page to the last section, where the contact form is.

If the Shopify theme still had the "custom HTML" section in the theme editor, I would use that, and just add an anchor link using HTML right above the form section. Since I can only do "Custom Liquid" sections now in the theme editor, I'm a little bit lost as to how to figure this out!

The ideal outcome would be adding an anchor tag somehow to the contact form, so that if I use the URL https://verygoodmfg.com/products/50ml-bottle#contact, it will do a smooth scroll down the page to the contact form.

Let me know if you can help - thanks in advance!

-Katie

[Hermit_the_Log]

Hi Katie,

Do you see anything on your product.liquid or product-template.liquid files referring to the powr.io form?  We'll want to introduce an id="contact" attribute to the main div container that houses the form

[katfinley]

Thanks so much for responding!

The powr.io form is basically copied/pasted into a "custom liquid" section in the theme editor. It's a small snippet of liquid code that looks like this:

<div class="powr-form-builder" id="b6383ce4_1660063344"></div><script src="https://www.powr.io/powr.js?platform=shopify"></script>

Let me know if you think we can add it in there!

[katfinley]

@Hermit_the_Log also - I can definitely look around more in the product or product template liquid files, if necessary!  I just didn't see anything at first glance in the actual code files linking to the powr.io form

[Hermit_the_Log · Accepted solution]

Hi @katfinley , this should be perfect!  Try adding an empty div into your custom liquid code editor just above your powr form with the id "contact"  It should look like this

<div id="contact"></div>

Then in your product descriptions, you can make the "Get in touch" text a link to this section like so

<p><a href="#contact">Get in touch</a>...</p>

You'll want to be sure to add the "#" in front of "contact" for the href

If all goes according to plan this should scroll down to your form upon clicking.  Let me know how it goes!

[katfinley]

Thank you!!!  It's so close to working.

This is what I tried first:

Which resulted in it knowing that a link was behind the text, but without actually scrolling anywhere:

Then I realized that the powr.io custom liquid block already has an id parameter in it, so I used that one instead:

And that one worked!!!!

So (in order to use anchor links in other places on the site), I tried to create a new custom liquid code block, right above the form, and just put in it:

<div id="contact"></div>

And then tried #contact again, but it didn't work!

Maybe I'm doing something goofy with the syntax - does anything jump out at you as to why the powr.io ID would work, but the #contact ID added in to both the form block or in its own Liquid block wouldn't work?

Thanks!!

[katfinley]

Joke's on me, it totally works with the separate Custom Liquid code block, I just changed the id to "contact-50ml" instead of "contact" ("contact" seems to be the only one that doesn't work, because #katie worked too when I was testing it, haha).

Thanks so much for your help @Hermit_the_Log  - this is super useful and will use it a lot!!

[Hermit_the_Log]

Good deal!!  Glad it's working for you now!  It could be that there is another DOM element with the id of "contact" already on the page that I didn't notice.  That could cause it to not work.  Excellent troubleshooting as well!  There's always plenty of that to be done when building a site haha.