Rotate featured product

Shopify Discussion

Topic summary

A Shopify store owner using the Dawn theme wanted to create a continuously rotating featured product image on their homepage. They had attempted custom CSS and JavaScript but encountered issues.

Initial Problem:

  • Custom rotate.js file and CSS transitions weren’t working correctly
  • Image rotation was choppy and not continuous

Solution Provided:

  • Update the JavaScript selector to target the correct DOM element: .featured-product .product-media-container .product__media
  • Implement a smoother rotation using setInterval() with 1-degree increments every 20ms instead of CSS hover transitions
  • The complete code snippet uses DOMContentLoaded event listener and continuously increments rotation angle

Outcome:
The solution successfully resolved the issue, creating a smooth continuous rotation effect. Another user later requested clarification on where to implement this code, indicating ongoing interest in the solution.

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

I am trying to get my featured product to rotate on my home page. I want it to continuously rotate. I have entered custom code and apparently I’m not doing it correctly. I’ve created a custom rotate.js in my assets, I’ve wrapped my in

, I’ve added

.product__media–featured {
transition: transform 0.5s ease;
}

.product__media–featured:hover {
transform: rotate(5deg);
}
at the bottom of my base.css - what am I missing here?

I am using the Dawn theme.

Any help would be greatly appreciated!

1 Like
2

@AvyCoffee , change the selector in your rotate.js file like this

const featuredImage = document.querySelector('.featured-product .product-media-container .product__media');

BSSCommerceB2B_0-1724760889857.png
BSSCommerceB2B_0-1724760889857.png448×203 7.78 KB

3

EDIT**

This worked! Thank you so much! Now I just need to adust the timing so it’s not so choppy.

4

@AvyCoffee , to make it smoother, you should change your whole custom fuction like this

document.addEventListener('DOMContentLoaded', function() {
    const featuredImage = document.querySelector('.featured-product .product-media-container .product__media');
    if (featuredImage) {
        let angle = 0;
        setInterval(() => {
            angle += 1; // Rotate by 1 degree for smoother rotation
            featuredImage.style.transform = `rotate(${angle}deg)`;
        }, 20);
    }
});

If it helps you, please like and mark it as the solution.

Best Regards :heart_eyes:

5

You are brilliant! Thank you so much.

1 Like
6

Glad to help you :blush:

7

Hi. Thank you for your post.
Would you please advise as to where I need to enter this code as I am having the same issue. I am also using the Dawn theme.