All things Shopify and commerce
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!
Solved! Go to the solution
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');
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
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
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');
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
EDIT**
This worked! Thank you so much! Now I just need to adust the timing so it's not so choppy.
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
You are brilliant! Thank you so much.
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
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024