How can I make my logo spin?

1 0 0

for reference:


I already have the code thanks to google gemini.


// Get a reference to the logo element
const logo = document.getElementById("logo");

// Function to handle the scroll event and rotate the logo
function handleScroll() {
  // Get the current scroll position
  const scrollPosition = window.pageYOffset;

  // Get the total document height and viewport height
  const docHeight = document.documentElement.scrollHeight;
  const viewportHeight = window.innerHeight;

  // Calculate the rotation angle based on scroll position
  const rotationAngle = (scrollPosition / (docHeight - viewportHeight)) * 360;

  // Apply the rotation transformation to the logo = `rotate(${rotationAngle}deg)`;

// Add a scroll event listener to the window
window.addEventListener("scroll", handleScroll);


This method involves editing your Shopify theme files directly. Here's how to do it:

  • Access Theme Code: Go to your Shopify admin panel, navigate to Online Store > Themes. Click Customize on your chosen theme.
  • Locate Template: In the theme editor, click on Actions > Edit code. Locate the template file responsible for your website header section (usually header.liquid or a similar name).
  • Add Script Tag: Find the closing </body> tag in the template code. Just before this tag, paste the following code snippet:
  // Paste your JavaScript code for the spinning logo here


So now I just need to be able to give my logo element a unique ID but this is where I get stuck.


Any help is much appreciated

Reply 1 (1)

Shopify Partner
870 235 263

Hi @ferverco,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

2. Sections/header.liquid

3. find "header__heading-logo motion-reduce"

4. Add "id: 'logo'," likes the screenshot below




If is your store. You only need replace code


const logo = document.getElementById("logo");


const logo = document.getElementById("rotate3D");



Hope can help

If you find my reply helpful, please hit Like and Mark as Solution