button motion when pressed
Hello @shop22dash!
We can easily solve this issue by using a simple event listener and the scrollTo() method. Please refer to the steps below to achieve this end-to-end.
1. Open the Code Editor for the theme where you would like to apply the modifications as directed in the screenshot below.
2. Let’s create a new snippet to add these modifications. We suggest using a snippet so you can easily add or remove it as needed. The screenshot below shows how to create a new snippet.
3. Now, inside this file, paste in the code below:
<script>
const redirectButton = document.getElementById('redirect-button-id');
const targetButton = document.getElementById('target-button-id');
const targetButtonTop = targetButton.offsetTop;
redirectButton.addEventListener("click",()=>{
window.scrollTo({top: targetButtonTop, behavior: 'smooth'})
})
</script>
Note: You would need to update the ids, or selectors for your store’s buttons/elements. In the example code shared above, the targetButton is the element I am taking the user to when the redirectButton is clicked.
4. Finally, let's render this file inside your theme layout file just before the closing </body> tag. Screenshot below for reference.
Once saved, let’s go to the storefront. This is what it should now behave like:
If my response helped you, please consider giving it a like (👍) and marking it as an accepted solution if it resolved your issue. Your feedback helps other community members with similar questions.
Thank you!
Regards,
Aaryan from Swym
