Rotate featured product

Shopify Discussion
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.