A Shopify store owner wants to redirect their “About Us” main menu link to a specific homepage section while preserving the original URL (www.mydomain.com/page/about-us) instead of showing a section ID.
Proposed Solution:
scrollIntoView() with smooth scrolling behavior to navigate to the target sectionImportant Consideration:
#shopify-section-template--21767037190437__c79ece61-6edd-4d33-be74-12b06c1d5534) will change if the section is removed and re-addedStatus: Solution provided but requires manual maintenance if section structure changes.
Hello everyone, i need some help with my store. I want to redirect my main menu named 'About Us" to a specific section in my homepage but i want to remain the url to www.mydomain.com/page/aboutus instead of the id of specific shopify section. Can anyone help? I want to redirect it in this section below.
Shopify name url: www.ravinginbox.com
Add this code to your JS file and it will work.
document.querySelector("#HeaderMenu-about-us").addEventListener("click",(e)=>{
e.preventDefault();
document.querySelector("#shopify-section-template--21767037190437__c79ece61-6edd-4d33-be74-12b06c1d5534").scrollIntoView({ behavior: 'smooth' });
})
Please keep in mind that if you remove the “about us” section from your website and add it back again, the ID of the section will change. This means that you will need to update the “shopify-section-template–21767037190437__c79ece61-6edd-4d33-be74-12b06c1d5534” to the new ID. I have included the current ID for your reference.
