How can I make my logo spin?

Store Design
, , , ,

Topic summary

A user wants to add a scroll-based spinning animation to their store logo and already has JavaScript code (generated by Google Gemini) that rotates the logo based on scroll position.

Current Challenge:

  • The user needs to assign a unique ID to their logo element but is stuck on implementation.
  • The text appears corrupted/reversed in places, making some instructions difficult to parse.

Proposed Solution:

  • Access Shopify theme code via Online Store > Themes > Edit code
  • Locate the header template file (typically header.liquid in the Sections folder)
  • Find the element with class “header__heading-logo motion-reduce”
  • Add id: 'logo' to this element
  • Insert the JavaScript code before the closing </body> tag
  • Update a reference in the code from document.getElementById("D3etator") to document.getElementById("logo")

Status: The discussion provides step-by-step implementation guidance with screenshots, but the reversed/garbled text suggests potential formatting issues in the original post.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

for reference: petalsandpeacocks.com

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
  logo.style.transform = `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 tag in the template code. Just before this tag, paste the following code snippet:
<script>
  // Paste your JavaScript code for the spinning logo here
</script>

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

2

Hi @ferverco ,

May I suggest to update code these steps:

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

EBOOST_1-1672356985580.png
EBOOST_1-1672356985580.png532×438 15.6 KB

  1. Sections/header.liquid

  2. find “header__heading-logo motion-reduce”

  3. Add “id: ‘logo’,” likes the screenshot below

EBOOST_0-1713947369845.png
EBOOST_0-1713947369845.png1764×696 57 KB

If petalsandpeacocks.com is your store. You only need replace code

From

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

To

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