How Do I Add An Anchor Link For The Same Page?

Store Design
1

I can’t figure out how to add an anchor link for the same page. I have a row of images across the top that I want to link to the corresponding section below. For example (in image attached), clicking the Shop Entertaining image jumps to the Everyday Entertaining section. The second image “Shop Birthday” would jump to a section below and so on. Thanks for any assistance!

Screenshot 2025-03-01 at 10.48.14 AM.png
Screenshot 2025-03-01 at 10.48.14 AM.png2742×1526 1.05 MB

2

Hello @partyfairshop ,

Here the example you can follow https://codepen.io/roeey/pen/vVWZwG

btw in your case using Shopify first you need to dynamically assign IDs to the target sections then with href you can target them.

Regards
Guleria

3

Thank you for the response, although I don’t understand what to do with the codes in your link. And how do I assign IDs to the target sections?

4

Use the shared example as a reference and apply it in your code accordingly.
To assign Ids to the target section, find the section code and call the section.id in the parent element of the element.

If you are looking for a developer to implement it you can drop an email to discuss further.

5

I think I got it, the only issue is when you click an anchor it should be scrolled up a bit to see the heading title. If you need to see what I mean please visit the website: https://partyfair.shop/pages/instagrammable-partyware password: snoopy

Thank you again