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

Solved

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

katfinley
Tourist
9 0 3

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

Accepted Solution (1)
Hermit_the_Log
Explorer
50 4 12

This is an 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!

View solution in original post

Replies 7 (7)

Hermit_the_Log
Explorer
50 4 12

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
Tourist
9 0 3

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>

 

Screen Shot 2022-08-15 at 11.18.21 AM.pngScreen Shot 2022-08-15 at 11.18.23 AM.png

 

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

katfinley
Tourist
9 0 3

@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
Explorer
50 4 12

This is an 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
Tourist
9 0 3

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

 

This is what I tried first:

Screenshot1.png

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

Screenshot2.png

 

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

Screenshot3.png

 

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
Tourist
9 0 3

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
Explorer
50 4 12

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.