Re: Rotate featured product

Solved

Rotate featured product

AvyCoffee
Excursionist
22 0 7

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 <img> in <div>, 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!

Accepted Solutions (2)

BSSCommerce-B2B
Shopify Partner
1953 560 561

This is an accepted solution.

@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

 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-B2B
Shopify Partner
1953 560 561

This is an accepted solution.

@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 😍

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

View solution in original post

Replies 5 (5)

BSSCommerce-B2B
Shopify Partner
1953 560 561

This is an accepted solution.

@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

 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

AvyCoffee
Excursionist
22 0 7

 

EDIT**

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

BSSCommerce-B2B
Shopify Partner
1953 560 561

This is an accepted solution.

@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 😍

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

AvyCoffee
Excursionist
22 0 7

You are brilliant! Thank you so much.

BSSCommerce-B2B
Shopify Partner
1953 560 561

Glad to help you 😊

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now